티스토리 뷰

JAVA

css 연동 방법

코린이도이 2023. 10. 7. 13:46

1. <head></head> 태그 안에 <style></style> 태그를 입력합니다. 그 안에 h1 {color: red;}를 입력하고 실행 결과를 확인해보세요.

=> Inline Style Sheet - 태그 안에 직접 원하는 스타일을 적용하기

2. <head></head> 태그 안에 <link rel="stylesheet" href="index.css"> 입력하여 css 파일을 연동시킨 후 실행해보세요. index.css 파일 내용과 함게 실행 결과를 확인해보세요.

=> External Style Sheet - <link> 태그로 CSS 문서 불러오기

3. <body></body> 태그 안에 있는 열린 태그 <h1>에 style="color:blue;를 입력하고 실행 결과를 이전 값과 비교해 보세요.

=> Inline Style Sheet: 태그 안에 직접 원하는 스타일 적용하기

 

 

- index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>CSS 연동 방법</title>
    
    <style>
    	h1 {
        	color: red;
        }
    </style>
    <link rel="stylesheet" href="index.css">
    </head>
    <body>
    
    <h1 style = "color: blue;">Hello world</h1>
    
    </body>
    </html>

 

- index.css

h1 {
	background color:yellow;
}
저작자표시

'JAVA' 카테고리의 다른 글

CSS 속성의 상속  (0) 2023.10.07
CSS 선택자  (0) 2023.10.07
CSS  (0) 2023.10.04
웹사이트 여러가지 태그  (0) 2023.10.04
웹사이트 제작(HTML)  (0) 2023.10.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함