안녕하세요
HTML 과 CSS를 복습해보려고 합니다.
CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의한다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있다.
이러한 목적으로 사용되는 것이 셀렉터(Selector)이다. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것이다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
}
p {
color: blue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>안녕하세요 저는 서수찬입니다</p>
</body>
</html>
정상적으로 출력되는 것을 확인할 수 있습니다.
1. 전체 셀렉터 (Universal Selector)
| 패턴 | Description |
| * | HTML 문서 내의 모든 요소를 선택한다. html 요소를 포함한 모든 요소가 선택된다. (head 요소도 포함된다) |
2. 태그 셀렉터 (Type Selector)
| 패턴 | 설명 |
| 태그명 | 지정된 태그명을 가지는 요소를 선택한다. |
3. ID 셀렉터 (ID Selector)
| 패턴 | 설명 |
| #id 어트리뷰트 값 | id 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. id 어트리뷰트 값은 중복될 수 없는 유일한 값이다. |
4. 클래스 셀렉터 (Class Selector)
| 패턴 | 설명 |
| .class 어트리뷰트 값 | class 어트리뷰트 값을 지정하여 일치하는 요소를 선택한다. class 어트리뷰트 값은 중복될 수 있다. |
HTML 요소에 class 어트리뷰트 값은 공백으로 구분하여 여러 개 지정할 수 있다. 아래와 같이 클래스 셀렉터를 사용하여 미리 스타일을 정의해 두고, HTML 요소는 이미 정의되어 있는 클래스를 지정하는 것으로 필요한 스타일을 지정할 수 있다. 이것은 재사용의 측면에서 유용하다.