— Cascading Style Sheet
HTML은 웹 페이지의 뼈대를 담당하고 CSS는 웹 페이에 옷을 입혀주는 역할을 한다고 보면 됩니다.
웹 브라우저는 HTML 문서를 불러오면 이를 파싱하고 DOM(Document Object Model) Tree를 구성합니다. 그 후 CSS 문서를 불러온 뒤 파싱하여 DOM Tree의 어떠한 노드에 Style을 적용시킬 것인지 파악하고 이를 화면에 보여줍니다.
즉 우리가 공부할 핵심은 두 가지입니다. 첫번째는 우리가 Style을 적용시키고 싶은 특정 HTML Element를 지정하는 방법이고, 두번째는 Style을 지정하는 방법입니다.
기본적인 CSS 문법은 아래와 같습니다.
p {
color: red;
}
위 CSS 코드에서 p 부분을 Selector라고 하며, Style을 적용시키고 싶은 특정 HTML Element를 지정하는 역할을 합니다. Selector 뒤 중괄호로 감싼 부분에 우리가 적용시키고 싶은 스타일들을 나열합니다. 스타일을 지정하는 방법은 (Style Name) : (Style Value); 형태입니다. 위 예제에서는 “p” Selector에 해당하는 HTML Element들에 Color Style을 Red로 지정하였습니다.
HTML 문서 내에 CSS 문서를 포함시키는 방법에는 총 세 종류가 있습니다.
External Stylesheet
External Stylesheet는 말 그대로 외부의 CSS 문서를 불러오는 방법입니다. 아래와 같이 HTML 문서의 Head 태그에 포함시켜 정의합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
...
</body>
</html>
Internal Stylesheet
Internal Stylesheet는 HTML 문서 내부에 직접 CSS 문서를 포함시키는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style>
p {
color: red;
}
</style>
</head>
<body>
...
</body>
</html>
Inline Style
Inline Style은 특정 HTML Element에만 스타일을 지정하고 싶을 때 사용합니다. 이 경우 이미 Element가 지정된 상태이므로 Selector를 명시하지 않습니다. HTML Element의 Style Attribute를 이용하여 지정할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<p style="color:red;">
Hello world!
</p>
</body>
</html>
Style을 지정할 특정 HTML Element를 선택하는 방법인 CSS Selector는 아래와 같은 종류들이 있습니다.
<aside> 👉 *
</aside>