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;
}