CSS - CSS 선택자는 무엇인가?
CSS - CSS 선택자는 무엇인가?
이번 포스팅에서는 CSS 선택자에 대해서 알아보겠습니다
CSS 이전 포스팅에서는 CSS는 HTML 문서를 꾸며주는 역할을 한다고 하였습니다
그런데 CSS 사용하려면 무언가에 스타일을 주고 대상을 지정하는 것을 선택자라고 합니다
CSS - CSS 선택자 문법 |
아래의 문법의 내용을 토대로 하나씩 알아보도록하겠습니다
선택자 문법 : [선택자] { [속성] : [속성 값] ; [속성] : [속성 값] ; }
먼저 사용자가 원하는 선택자를 입력합니다
선택자를 입력 후 { } 중괄호를 입력하며 중괄호 안에는 선언문(속성 + 속성 값)을 입력합니다
입력한 선언문에서의 속성과 속성 값의 구분은 : 콜론으로 구분합니다
CSS - CSS 선택자 종류 |
1. ID 선택자
문법 : #[이름] { [속성] : [속성 값] }
예시 : #my_id {corlor:red}
ID 선택자는 사용자가 사용하고 싶은 이름을 입력하시면 되며, ID 선택자를 사용하시려면 반드시 #(샵)을 입력하셔야 됩니다
File : my.html
<!DOCTYPE> <html> <head> <link rel="stylesheet" href="my.css" type="text/css"> <title>서버구축이야기!!</title> </head> <body> <ul> <li id="my_id">서버구축이야기!!</li> </ul> </body> </html>
File : my.css
@charset "utf-8";
#my_id {color:red;}
출력결과 :
- 서버구축이야기!!
2. 클래스 - (Class) 선택자
문법 : .[이름] { [속성] : [속성 값] }
예시 : .my_class {corlor:blue}
클래스 선택자는 사용자가 사용하고 싶은 이름을 입력하시면 되며, ID 선택자를 사용하시려면 반드시 .(점)을 먼저 입력하신후 이름을 입력하셔야 됩니다
File : my.html
<!DOCTYPE> <html> <head> <link rel="stylesheet" href="my.css" type="text/css"> <title>서버구축이야기!!</title> </head> <body> <ul> <li id="my_id">서버구축이야기!!</li> <li class="my_class">서버구축이야기!!</li> </ul> </body> </html>
File : my.css
@charset "utf-8";
#my_id {color:red;}
.my_class {color:blue;}
출력결과 :
- 서버구축이야기!!
- 서버구축이야기!!
3. 태그 - (Tag) 선택자
문법 : [태그] { [속성] : [속성 값] }
예시 : li {color:green}
태그 선택자는 HTML 태그중 적용하고 싶은 태그를 입력하시면 되며, 태그 선택자는 ID, 클래스 선택자와 다르게 CSS에서 적용하실 태그만 입력하시면 됩니다.
File : my.html
<!DOCTYPE> <html> <head> <link rel="stylesheet" href="my.css" type="text/css"> <title>서버구축이야기!!</title> </head> <body> <ul id="my_id"> <li class="my_class_01">서버구축이야기!!</li> <li class="my_class_02">서버구축이야기!!</li> <li class="my_class_03">서버구축이야기!!</li> </ul> </body> </html>
File : my.css
@charset "utf-8";
#my_id {color:red;}
.my_class {color:blue;}
li {color:yellow;}
출력결과 :
- 서버구축이야기!!
- 서버구축이야기!!
- 서버구축이야기!!
CSS - ID 선택자와 클래스 선택자 사용시 주의점 |
ID 선택자와 클래스 선택자는 사용시 주의하셔야 될 부분이 있습니다
ID 선택자는 한번에 CSS를 적용하려고 할때 사용하며, 클래스 선택자는 특정 부분을 별도로 분리하려고 할때 사용합니다
글로 설명하려니 다소 혼동이 있으실 수 있을것으로 보여 코드를 보며 설명하도록 하겠습니다
File : my.html
<!DOCTYPE> <html> <head> <link rel="stylesheet" href="my.css" type="text/css"> <title>서버구축이야기!!</title> </head> <body> <ul id="my_id"> <li class="my_class_01">서버구축이야기!!</li> <li class="my_class_02">서버구축이야기!!</li> <li class="my_class_03">서버구축이야기!!</li> </ul> </body> </html>
File : my.css
@charset "utf-8";
#my_id {font-size:20px;}
#my_id .my_class_01 {color:red;}
#my_id .my_class_02 {color:blue;}
#my_id .my_class_03 {color:green;}
위 코드를 보시면 ID 선택자에 폰트 크기를 20으로 설정하였습니다
그리고 ID 안에 있는 텍스트에는 각각 별도의 색상을 주기위해 클래스 선택자를 사용하였구요
즉, ID 선택자는 한번에 여러가지의 내용을 적용할때 사용되며, 클래스 선택자는 특정 부분을 다르게 적용할때 사용하게 됩니다
출력결과 :
- 서버구축이야기!!
- 서버구축이야기!!
- 서버구축이야기!!
즉, ID 선택자는 한번만 등장하여 적용하며 클래스 선택자는 여러번 등장하여 적용할 수 있습니다
