온라인 강의/CSS
CSS 연동 방법
onebeans
2023. 4. 13. 16:32
CSS를 연동하는 방법으로는 세 가지가 있습니다. 세 방법으로 CSS를 연동해보고, 차이를 알아봅시다!
- Inline Style Sheet – 태그 안에 직접 원하는 스타일을 적용합니다.
<body>
<h1 style="color: blue;">Hello World</h1>
</body>
2. Internal Style Sheet – <style> 태그 안에 CSS 코드를 작성합니다.
<head>
<style> h1 { color: blue; }
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
3. External Style Sheet – <link> 태그로 CSS 문서를 불러옵니다.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World</h1>
</body>
/* css 문서 */
h1 { color: blue; }
- <head></head> 태그 안에 <style></style> 태그를 입력합니다. 그 안에 h1 {color:red;}를 입력하고 실행 결과를 확인해보세요.
- <head></head> 태그 안에 <link rel="stylesheet" href="index.css"> 입력하여 css 파일을 연동시킨 후 실행해보세요. index.css파일 내용과 함께 실행 결과를 확인해보세요!
- <body></body> 태그 안에 있는 열린 태그 <h1> 에 style="color:blue;"를 입력하고 실행 결과를 이전 값과 비교해보세요.
비교결과 - 우선순위에 의해 Hello World는 파란색이 됨
<!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>