CSS를 적용하는 방법
HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있다.
1. 인라인 스타일(Inline style)
HTML 태그의 style 속성에 CSS 코드를 넣는 방법
2. 내부 스타일 시트(Internal style sheet)
HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법
3. 외부 스타일 시트(External style sheet)
별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법
스타일 적용의 우선순위
위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.
1. 인라인 스타일 (HTML 요소 내부에 위치함)
2. 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)
3. 웹 브라우저 기본 스타일
인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다.
또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.
mystyle.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}'HTML > Day37' 카테고리의 다른 글
| [CSS] CSS 예제 (0) | 2021.12.27 |
|---|---|
| [HTML] table 태그 예제 (0) | 2021.12.26 |