티스토리 뷰
[HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기
Lkt_Programmer 2019. 3. 24. 17:02[HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자
[HTML/CSS] HTML 기초 강좌 - ul/li 태그 & img 태그
[HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그)
[HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기
1. 선택자를 통해 태그 선택하기 |
선택자란 선택을 해주는 요소를 의미하는데, 앞서 배운 HTML 태그들을 선택하여 선택자에 의해 선택된 태그요소들의 속성값을 변경하는데 사용이 됩니다. CSS에 대한 정의는 head 태그 내부에 style 태그내부에 Rule-Set으로 정의가 됩니다. 그렇다면 이 Rule-Set을 정의하는 방식에 대해 살펴 보겠습니다.
선택자 : 선택자는 특정 태그를 선택을 해주는 요소를 의미합니다.
- 속성명 : 선택자에 의해서 선택 된 태그의 특정 속성명을 의미합니다.
- 속성값 : 선택자에 의해서 선택 된 태그의 특정 속성에 대한 속성값을 지정합니다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS 기초 </title> <style> div { background-color : red; margin : 0px; } </style> </head> | cs |
<head> 태그 내부에 <style> 태그를 통해 Rule-Set을 정의하고 있습니다. 주목해야 할 부분은 9 Line 입니다. 앞서 선택자란 용어를 사용하였는데 위의 div가 바로 선택자에 해당합니다. div는 태그 선택자로 <html> 태그 내부에 사용 된 태그들중에서 div 태그를 선택한다는 의미입니다. 태그를 선택하는 요소 즉 선택자에는 여러 선택자가 있는데 이를 잘 활용한다면 효율적으로 CSS 스타일시트를 작성 할 수 있습니다.
정리하자면 9번 라인에 해당하는 Rule-Set의 경우는 div 태그를 선택하여 background-color 속성의 속성값을 red로 margin 속성값을 0px로 준다는 의미로 해석이 가능합니다.
다음 포스팅부터는 여러 선택자들을 활용하여 html 내부 태그 요소를 선택하는 다양한 방식에 대해서 알아보도록 하겠습니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자 (0) | 2019.03.26 |
|---|---|
| [HTML5/CSS3] 선택자(Selector)를 통해 CSS를 적용해보자 #1 (0) | 2019.03.25 |
| [HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그 (0) | 2019.03.23 |
| [HTML5/CSS3] span 태그 & div 태그의 차이 (0) | 2019.03.22 |
| [HTML5/CSS3] form 태그를 활용한 간단한 회원가입 페이지 만들기 (0) | 2019.03.21 |