티스토리 뷰
안녕하세요. 저번 포스팅에서는 CSS 스타일시트 작성법과 선택자의 개념에 대해 알아보았습니다. 이번 포스팅에서는 태그를 선택하는 여러 종류의 선택자들에 대해 알아보겠습니다.
[HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기
1. 태그 선택자 |
태그 선택자는 태그명을 통해 태그를 선택하는 선택자입니다. 간단한 예로 아래의 스타일시트를 살펴 보겠습니다.
<style> 태그 내부에 정의 된 Rule-Set을 해석해보자면 다음과 같습니다.
h1 태그의 border 속성값을 1px solid red로 줘라
h2 태그의 border 속성값을 1px solid blue로 줘라
h3 태그의 border 속성값을 1px solid green으로 줘라
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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>img 태그</title> <style> h1 {border : 1px solid red} h2 {border : 1px solid blue} h3 {border : 1px solid green} </style> </head> <body> <h1>Hello!!</h1> <h2>Hello!!</h2> <h3>Hello!!</h3> </body> </html> | cs |
body 영역에 h1, h2, h3 태그를 사용하여 Hello!! 라는 Text를 뿌려주는 간단한 HTML 입니다. 그리고 <style> 태그 내부에서 h1, h2, h3 태그를 선택 태그자로 선택을 하여 Border 속성의 속성값을 주고 Color를 다르게 지정합니다.
이렇게 웹 페이지에서 확인을 해보면 CSS가 정상적으로 적용 된 것을 확인 할 수 있습니다.
2. 전체 선택자
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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>img 태그</title> <style> * {margin : 0px} h1 {border : 1px solid red} h2 {border : 1px solid blue} h3 {border : 1px solid green} </style> </head> <body> <h1>Hello!!</h1> <h2>Hello!!</h2> <h3>Hello!!</h3> </body> </html> | cs |
위 소스에서 추가 된 라인은 10번 라인입니다. 전체선택자 기호인 '*'을 사용하여 margin 값을 0px로 지정하는 코드입니다. 웹 페이지에서 실행 된 화면을 살펴 보겠습니다.
캡쳐화면이 조금 이상하지만 어찌 되었든 h1, h2, h3 태그들의 Margin 값이 0px로 들어간 것을 확인 할 수 있습니다.
3. ID선택자
ID선택자는 특정 태그의 ID 속성값을 사용하여 태그를 선택하는 선택자입니다.
사용방법은 #기호를 사용하여 뒤에 CSS를 적용하고자 하는 특정 태그의 ID속성값을 지정하시면 됩니다. 아래 샘플 예제를 확인 해보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!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>선택자</title> <style> #div1{ background-color : red } </style> </head> <body> <div id = "div1">Hello</div> <div id = "div2">Hello</div> <div id = "div3">Hello</div> </body> </html> | cs |
<body> 태그 내부에 3개의 div 태그를 작성하였고 각각 다른 ID속성값으로 지정을 하였습니다. CSS가 적용되는 9~11 Line을 해석하자면 'ID 속성값이 "div1"인 태그를 선택하여 background-color를 red로 설정하라' 라고 해석 할 수 있습니다.
그렇다면 <body> 태그 내부의 첫 번째 <div>태그가 선택되어 배경이 빨강색으로 나올것입니다. 아래는 웹페이지에서 표현된 형태입니다.
첫 번째 Hello 영역만 배경색이 빨강색으로 나오는 것을 확인 할 수 있습니다.
4. Class선택자
Class 선택자는 태그의 class 속성값을 사용하여 태그를 선택하는 선택자입니다. 사용방식은 ID선택자와 거의 비슷한데 기호를 #대신 .을 사용하여 나타냅니다. 아래 샘플 예제를 살펴 보겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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>img 태그</title> <style> .div1{ background-color : red; } .div2{ background-color : blue; } </style> </head> <body> <div class = "div1">Hello</div> <div class = "div2">Hello</div> <div class = "div2">Hello</div> </body> </html> | cs |
첫 번째 <div>태그의 class 값을 div1으로 지정하고 나머지 2개의 <div>태그의 class 값을 div2로 지정을 하였습니다. 스타일시트의 각각의 Rule-Set을 해석하자면 다음과 같습니다.
- 11Line : class 속성값이 'div1'인 태그를 선택하여 배경색을 red로 지정
- 12Line : class 속성값이 'div2'인 태그를 선택하여 배경색을 blue로 지정
위와같이 CSS가 정상적으로 적용 된 것을 확인 할 수 있습니다. 다음 포스팅에서 다른 선택자들에 대해 계속 알아보도록 하겠습니다.
'Programming > HTML&CSS' 카테고리의 다른 글
| [HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자 (0) | 2019.03.27 |
|---|---|
| [HTML5/CSS3] 선택자를 통해 CSS를 적용해보자 #2 #혼합 선택자 #속성 선택자 (0) | 2019.03.26 |
| [HTML5/CSS3] CSS 기초강좌 #1 - CSS 스타일시트 작성법과 선택자에 대해 알기 (0) | 2019.03.24 |
| [HTML5/CSS3] 간단한 웹 페이지 레이아웃 구성 및 시맨틱 태그 (0) | 2019.03.23 |
| [HTML5/CSS3] span 태그 & div 태그의 차이 (0) | 2019.03.22 |