이번 장에서는 본격적으로 HTML문서에 스타일을 적용하기 위해 Selector들에 대해 알아보자.
1. Type
먼저 타입을 이용하여 지정하는 방법이다. 예를 들어 HTML문서의 h1 태그에 스타일을 적용하고 싶다면 다음과 같이 쓰는 것이다.
h1 {
color : blue
}위는 h1태그에 글자 색을 파란색으로 적용하는 코드이다.
2. Class
다음은 class 를 이용한 방법으로써 타입보다 세밀한 조정이 가능하다. HTML의 태그에 우리는 class라는 속성을 적용할 수 있었다. 거기서 지정한 클래스명을 CSS에 받아서 스타일을 적용할 수 있다.
.name1 {
background-color: blue;
}
div.name1.name2 {
background-color: brown;
}먼저 name1 이라는 클래스에 배경색을 파란색으로 주었다. 이는 html에서 속성으로 class="name1" 을 갖고 있을 것이다.
다음은 div라는 타입을 갖고있고 클래스가 name1이자 name2를 갖고 있는 곳에는 배경색을 갈색으로 주라는 선언이다. 이는 html에서 <div class="name1 name2"></div> 를 갖고 있을 것이다.
3. ID Selector
ID는 html문서에서 특정 태그를 식별할 때 사용했었던 속성이다. 예를 들어 <div id="name00"></div> 와 같은 태그가 있다면 이는 다음과 같이 스타일을 적용한다.
#name00{
color: coral;
}
4. 자식, 자손, 형제 Selector
우리는 HTML문서에서 자식과 자손 및 형제 태그에 대해서 배웠다. 이를 다시 알아보면 다음과 같다.
<body>
<h1>
제목제목 여기는 제목
</h1>
<div>
<p>
내용내용 여기는 첫번째 내용 첫번째
</p>
<p>
내용내용 여기는 두번째 내용 두번째
</p>
</div>
</body>간단하게 위를 보면 body의 직계자손은 h1태그와 div태그가 있다. h1과 div는 형제태그이며, p태그는 div태그의 직계자식이자 body의 자손이다.
이를 이용하여 CSS에 작성하면 다음과 같다.
부모>자식 부모 자손 부모+형제 부모~형제
CSS에서 부모태그>자식태그 를 작성시 직계자식에 스타일을 적용하는 것이다. 띄어쓰기를 사용할 시 자식과 자손을 포함한 모든 손자들 중 조건에 맞는 곳에 스타일을 적용한다.
형제는 +를 이용하면 그 이후로오는 조건에 맞는 하나만, ~는 그 이후로오는 조건에 맞는 모든 태그들에 스타일을 적용한다.
참고
이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.
모든 내용과 코드 및 이미지는 직접 재구성하였습니다.
김버그의 HTML&CSS는 재밌다 - 구름EDU
HTML&CSS를 한번에! 탄탄한 개념이해부터 실습까지 한 강의로 끝내기, 실무 가능한 실력으로 😎
edu.goorm.io
'Language > CSS' 카테고리의 다른 글
| <CSS 기초> 06. Float (0) | 2020.11.12 |
|---|---|
| <CSS 기초> 05. Box 타입 (0) | 2020.11.10 |
| <CSS 기초> 04. Box 모델과 크기 (0) | 2020.11.05 |
| <CSS 기초> 03. 가상클래스 셀렉터 (0) | 2020.11.03 |
| <CSS 기초> 01. CSS의 기본과 사용 (0) | 2020.10.27 |
