CSS 태그,직접,아이디,클래스,하위,자식,형제,인접 선택자를 알아보자
HTML로 뼈대를 만들고, CSS로 살을 붙여줍니다. 이때 살을 붙여줄 뼈를 지정하는 것을 선택자 라고 합니다. 따라서 선택자가 정말 중요합니다. 예를 들어서 어떤 div 요소가 있고, 그 안에는 무수히 많은 p태그, 또 무수히 많은 헤드태그, 또 ul과 li 태그들도 있다고 가정해 봅시다. 어떻게 선택하는것이 가장 정확할지를 판단해서 코딩을 진행해나가야 합니다.
선택자를 어떻게 선택하든지에 대해서는 그건 프로그래머의 마음입니다. 자신이 가장 좋아하고, 차후에 한 눈에 파악할 수 있으며, 손에 익은 선택자로 진행하시면 됩니다. 먼저 아래의 예제를 참고하시기를 바랍니다. 이것을 바탕으로 간략히 설명을 드리겠습니다.
See the Pen CSS3 선택자 by rgy0409 (@rgy0409) on CodePen.
선택자는 대략 8개 정도로 나뉩니다. 위의 예제에서 CSS 탭을 눌러보시면 주석으로 처리된 부분입니다. 아래쪽에 한번 더 서술해 놓도록 하겠습니다.
1. 전체선택자 : *
2. 태그(직접)선택자 : 태그명
3. 하위 선택자
4. 아이디선택자 : #
5. 클래스선택자 : .
6. 자식선택자 : >
7. 형제선택자 : ~
8. 인접선택자 : +
1. 전체선택자
모든 태그 요소들을 선택합니다. 보통 홈페이지에서 위치를 초기화 할 때 사용되어지며 선택자는 * 로 사용을 합니다.
2. 태그선택자 또는 직접선택자
태그명을 직접 작성합니다. 만약 특정 태그가 전체에서 하나밖에 없거나, 몇개 없을 경우, 해당 요소에만 스타일을 줄 때 사용됩니다. 예를 들면 지금 위의 예시에서는 div 태그가 하나밖에 사용되지 않았기 때문에 div 태그 선택자를 이용해서 테두리를 적용한 경우입니다.
3. 하위 선택자
예시에서는 div h3 이라고 마크업 했는데, 이 뜻은 div 태그내에 존재하는 모든 h3 태그 요소에 스타일을 지정하겠다는 의미 입니다. 개수에 상관 없이 div 내에 존재하는 모든 h3에는 모두 일괄 적용됩니다.
4. 아이디선택자
태그에 id 를 붙여서 사용되어집니다. 보통 div에 많이 사용되는데, id명은 한개밖에 생성할 수 없습니다. 때문에 id는 보통 head, 상단menu, 본문 contents, 하단의 footer 등에 책갈피 용도로 부여되는게 보통입니다.
5. 클래스선택자
선택자를 지정하는 가장 많이 사용되는 방법 중 하나입니다. 아이디명과는 다르게 같은 페이지내에서 여러번 사용이 가능합니다. 공통된 스타일을 특정한 태그 요소에 일괄 적용시킬 때 사용됩니다. 일종의 스타일 꾸러미같은 역할을 하는 샘 입니다.
6. 자식선택자
부모요소를 기준으로 바로 다음 단계의 태그들을 선택할 때 사용됩니다. 예시에서는 ul > li 라고 나와있는데 이 뜻은 ul 태그의 바로 다음 요소인 li 태그들을 모두 선택한다는 뜻 입니다. 참고로 예시에 나와있듯, li의 모든 하위 요소들도 여기에 포함됩니다.
7. 형제선택자
바로 한단계 위의 부모요소가 같을 때, 자신을 제외하고 지정된 태그를 선택될 때 사용됩니다. 예시에서 확인하신 것처럼 ul ~ h2로 마크업을 했기 때문에, ul과 형제 관계인 요소 중, h2에만 초록색으로 글씨색이 변경된것을 확인하실 수 있습니다.
8. 인접선택자
지정된 태그를 기준으로 바로 다음의 형제 태그 요소를 선택합니다. 예시에서는 h2 + p 라고 되어 있습니다. 여기 마크업된 둘의 관계는 형제요소 입니다. 바로 윗단계의 부모가 같습니다. 결국 h2를 제외한 바로 다음 형제요소가 p태그인 요소를 선택할 때 사용됩니다. 참고로 h2 바로 이전의 p태그는 선택되지 않습니다. 무조건 이후에 바로 오는 p태그가 대상이 됩니다. 또한 자신을 제외한 모든 형제요소를 선택하고 싶으면 같은 요소를 두 번 사용하면 됩니다. 이 예제가 h6 + h6 입니다. h6 태그들로 뭉쳐진 아래쪽 부분을 살펴보시면 첫번째 h6를 제외한 나머지 h6가 모두 영향을 받고 있습니다.
이렇게 여러가지 선택자에 대해 알아봤습니다. 위에서 인접, 직접, 형제, 자식요소 선택자들을 살펴봤는데요, 여기에 id와 class 선택자까지 더해서 진행하면 더욱 정확하게 선택을 할 수 있어서 스타일을 지정하는데 편리합니다. 한번 직접 테스트해 보시면서 차이점을 알아보시기 바랍니다. 끝.
"친절한효자손 취미생활" 을 검색!
