-
선택자(selector) (1)프로그래밍/HTML&CSS 2022. 8. 26. 19:30728x90
선택자(selector)는 웹 문서에게 HTML의 어느 부분에 스타일을 적용할지 알려주기 위해 적용 대상을 지정하는 방식을 의미한다. 선택자를 사용하는데는 대표적인 여러 방법이 있다.
1. 전체 선택자
스타일을 문서의 모든 요소에 적용할 때 사용하는 선택자로 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용한다.
* { padding:0, margin: 0;} /*모든 요소에 padding:0, margin: 0를 적용*/위와 같이 웹 문서 전체에 마진과 패딩을 0으로 지정하면 필요없는 여백을 지워 깔끔하게 웹문서를 정리할 수 있다.
2. 요소 선택자
특정 태그를 사용해 지정하면 해당 태그를 사용한 모든 요소에 스타일을 지정한다.
p { color: deepskyblue; } /* p 태그 요소의 글자 색을 deepskyblue로 지정*/[전체 선택자&요소 선택자 예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>전체선택자</title> <style> * {color: deeppink;} /*전체 선택자*/ h2 {color: deepskyblue; font-weight: bold;} /*요소 선택자*/ </style> </head> <body> <h2>전체선택자</h2> <p>전체선택자는 * 기호를 사용</p> <ol> <li>전체선택자는 한번에 많은 용소를 선택</li> <li>너무 많은 요소가 있는 문서에서는 부하를 줄 수 있음</li> </ol> </body> </html>
전체 선택자&요소 선택자 예제 결과 위 예제를 보면 전체 선택자로 지정한 부분은 deeppink이지만, 요소 선택자로 지정한 부분은 deepskyblue와 글자 크기 bold가 지정된 것을 볼 수 있다. 이것을 보아 전체 요소가 먼저 적용되고 하위 요소가 그 위를 덮어 씌는 것을 확인할 수 있다.
3. id 선택자
웹 문서 안의 특정 부분을 선택하여 스타일을 적용할 때 사용되며, #기호를 사용하여 id 속성을 가진 요소에 스타일을 적용한다.
h2{font-size: 20px;} /*요소 선택자 사용, h2요소의 글자크기는 20px로 지정*/ #hello {color: pink;} /*id 선택자 사용, id="hello"를 가진 요소의 글자색을 pink로 지정 */ h2#bye{color: yellow;} /*요소, id 선택자 사용, h2요소와 id="bye"를 동시에 만족하는 요소의 글자색을 yellow로 지정*/ <h2 id="hello">안녕하세요</h2> <p id="hi">안녕</p> <h2 id="bye">잘지내</h2>id 선택자는 문서에서 한 번만 적용이 가능하여 요소에 id 선택자를 중복해서 적용할 수 없다.
[id 선택자 예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>id선택자</title> <style> #container{ background-color: gold; padding: 20px; /* padding : 안쪽 여백*/ width: 400px; height: 200px; margin: 0 auto; /* margin : 바깥쪽 여백*/ } #header{ background-color: deepskyblue; width: 200px; height: 100px; margin: 20px auto; } </style> </head> <body> <h2>id선택자</h2> <div id="container">div 첫번째 영역</div> <div id="header">div 두번째 영역</div> </body> </html>
id 선택자 예제 결과 4. class 선택자
id 선택자와 마찬가지로 웹 문서 안의 특정 부분을 선택하여 스타일을 적용할 때 사용되며, .기호를 사용하여 class 속성을 가진 요소에 스타일을 적용한다. id 선택자와 가장 큰 차이점은 요소들에 class 선택자를 중복하여 적용할 수 있다.
h2{font-size:20px; } /*요소 선택자 사용, h2요소의 글자크기는 20px로 지정*/ .hello{color:pink; } /*clsass 선택자 사용, class="hello"를 가진 요소의 글자색을 pink로 지정 */ h2.hello{font-weight: bold; } /*요소, class 선택자 사용, h2요소와 class="hello"를 동시에 만족하는 요소의 글자 크기를 bold로 지정*/ <h2 class="hello>안녕하세요</h2> <p class="hello>안녕</p> <h2 class="bye">잘지내</h2>[class 선택자 예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>클래스 선택자</title> <style> .redText {color: red;} .blueText {color: blue;} .skyBox{border: 3px solid deepskyblue} </style> </head> <body> <h2>클래스 선택자</h2> <p><span class="redText">클래스 선택자</span>는 <span class="blueText skyBox">특정 집간의 여러 요소를 한번에 선택</span>할 때 사용합니다.</p> <p><span class="redText">특정 집단의 클래스</span>라고 하며, <span class="blueText">(도트)기호를 사용</span>하여 같은 클래스 이름을 가지는 요소들을 모두 선택합니다.</p> </body> </html>
class 선택자 예제 결과 5. 그룹 선택자
여러 선택자에서 같은 스타을 규칙을 사용하고 싶을 경우 쉼표( , )로 구분해 여러 선택자를 나열한 후 스타을 규칙을 한번에 정의 할 수 있다.
h2, p{text-align: center;} /*h2, p태그의 요소들에 스타일을 한번에 적용*/[그룹 선택자 예제]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>그룹 선택자</title> <style> h2, p{text-align: center;} h2{color: deeppink; font-size: 50px;} </style> </head> <body> <h2>그룹 선택자</h2> <p>여러개의 요소를 나열하고 콤마(,)로 구분해 스타일을 적용</p> </body> </html>
그룹 선택자 예제 결과 728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
선택자(selector) (3) (0) 2022.08.28 선택자(selector) (2) (0) 2022.08.27 CSS 들어가기 (0) 2022.08.25 input 태그 (1) 2022.08.24 form 태그 (0) 2022.08.23