-
선택자 (selector)프론트엔드/CSS 2020. 8. 23. 20:56
1. 선택자란?
기존 HTML 스타일링은 HTML 문서 내에서 이뤄졌고 태그 내에 일일히 스타일링을 적용해야했다.
하지만 CSS가 등장하면서 태그에 대한 접근법이 달라졌다.
CSS 문서를 외부에 만들거나 <style> 태그 내에 따로 적용하면 당연히 HTMl과 CSS는 분리될 수 밖에 없다.
그리고 HTML 문서에서 원하는 부분에 스타일을 적용하기 위한 것이 바로 선택자다.
선택자는 CSS를 통해 HTML 문서 내에서 스타일을 적용하려는 부분을 지정하는 것을 말한다.
2. 다양한 선택자
태그선택자
선택자로 태그(tag)로 지정하면 <body> 태그 내의 해당 태그를 가진 모든 태그에 스타일이 적용된다.
아래와 같은 경우 <div> 뿐 아니라 <div>의 자손으로 있는 <p>까지 스타일이 적용된다.
<body> <style> div{ font-size: 50px; } </style> <div> div 태그입니다. </div> <div> <p> div 태그입니다 - 1 </p> <p> div 태그입니다 - 2 </p> <p> div 태그입니다 - 3 </p> <div> </body>클래스 선택자
스타일 적용하려는 태그에 class 값을 준 뒤 해당 클래스 값을 선택자로 지정할 수 있다.
해당 클래스 값을 선택자로 지정할 땐 앞에 점 ( . )을 찍어줘야 한다.
클래스는 동일한 값을 여러 태그에 적용할 수 있다.
그래서 성격 등이 비슷한 태그는 하나의 클래스로 묶어서 스타일 적용이 가능하다.
.class 명 { 속성 : 속성값 }
<body> <style> .hi p{ font-size: 50px; } </style> <p class="hi"> 안녕하세요! </p> </body>id 선택자
스타일을 적용하려는 태그에 id값을 준 뒤 해당 id 값을 선택자로 지정할 수 있다.
해당 id 값을 선택자로 지정할 땐 앞에 샵 ( # )을 붙여주면 된다.
id값은 단 한개만 지정할 수 있어서 id값을 여러개태그에 적용하려면 매번 id 값을 새로 적어야 한다.
#아이디 명 { 속성 : 속성값 }
<body> <style> #hello { font-size: 50px; } </style> <p id="hello"> 안녕하세요! </p> </body>그룹 선택자
쉼표 ( , )를 쓰면 여러 개 태그를 동시에 선택자로 지정할 수 있다.
태그명, 태그명.... { 속성 : 속성값 }
<body> <style> div, p { font-size: 50px; } </style> <div> div 태그입니다. </div> <p> p 태그입니다. </p> <div> <p> div 태그입니다 - 1 </p> <p> div 태그입니다 - 2 </p> <p> div 태그입니다 - 3 </p> </div> </body>속성 선택자 1
지정된 어트리뷰트(속성)을 갖는 모든 요소를 선택한다.
요소[속성]{ 속성: 속성값 }
<body> <style> a[href]{ color: red;} </style> <a href="#"> 첫번째 링크 </a><br> // 글자 빨간색으로 변경 <a href="#"> 두번째 링크 </a><br> // 글자 빨간색으로 변경 <a href="#"> 세번째 링크 </a><br> // 글자 빨간색으로 변경 </body>속성 선택자 2
지정된 어트리뷰트(속성)과 속성이 가진 속성값이 일치하는 요소를 선택한다.
요소[속성="속성값"]{ 속성: 속성값 }
<body> <style> a[href="naver.com"]{ color: red;} </style> <a href="naver.com"> 첫번째 링크 </a><br> // 빨간색으로 글자색 변경 <a href="google.com"> 두번째 링크 </a><br> <a href="daum.net"> 세번째 링크 </a><br> </body>후손 셀렉터
후손 셀렉터는 스타일을 적용하려는 요소의 자손 즉 한단계 두단계 이하의 자손들까지 다 적용되는 것을 이야기한다.
예시로 보면 더욱 알기 쉽다.
아래와 같은 예시는 요소 A아래 요소 B를 선택하는 것이다.
그리고 이때는 A요소 아래 모든 요소 B(바로 한단계 아래 자식 요소 뿐 아니라 모든 후손 요소)를 선택하는 것이다.
요소A 요소B { 속성: 속성값 }
<body> <style> div p{color: red;} </style> <div> <p> 첫번째 </p> // 붉은 색으로 글씨 색상 변경 <p> 두번째 </p> // 붉은 색으로 글씨 색상 변경 <p> 세번째 </p> // 붉은 색으로 글씨 색상 변경 <span><p>네번째</p></span> // 붉은 색으로 글씨 색상 변경 <span> <span> <p>다섯번째</p> // 붉은 색으로 글씨 색상 변경 </span> </span> </div> </body>자식 셀렉터
후속 셀렉터는 편해보이지만 본인이 원하지 않은 요소까지 선택될 수 있다.
이때는 자식 셀렉터를 쓰면 선택된 요소 바로 한단계 아래 요소만 선택이 가능하다.
요소A > 요소B { 속성: 속성값 }
<body> <style> div > p{color: red;} </style> <div> dd <p> 첫번째 </p> // 글씨 색상 빨간색으로 변경 <p> 두번째 </p> // 글씨 색상 빨간색으로 변경 <p> 세번째 </p> // 글씨 색상 빨간색으로 변경 <span><p>네번째</p></span> <span> <span> <p>다섯번째</p> </span> </span> </div> </body>'프론트엔드 > CSS' 카테고리의 다른 글
CSS - 목록 스타일 (0) 2020.08.23 CSS - 텍스트 관련 (0) 2020.08.23 CSS의 적용 우선 순위 (0) 2020.08.23 <style> 태그의 적용 (0) 2020.08.23 CSS란? (0) 2020.08.21