HTML문서에 CSS로 스타일을 주기 위해서는 선택자를 통해서 해당 요소를 선택한 뒤 해당 스타일을 줘야 합니다.
CSS 에서, 선택자는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다.
1. type선택자
지정된 태그명을 가지는 요소를 선택합니다.
type선택자를 사용하면 특정 태그로 마크업된 모든 요소(element)를 선택할 수 있습니다.
웹페이지 상의 모든 <p> 요소의 글꼴 색을 파란색으로 스타일하기 위한 CSS 코드는 다음과 같습니다.
p { color: blue; }
2. id 선택자
html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.
html 요소에 id로 이름을 붙일 때는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을 주어서는 안됩니다.
css에서는 id선택자 앞에 '#'을 붙여야 합니다.
다음과 같이 cute 아이디에 대한 스타일을 선언하는 예시는 다음과 같습니다. #cute{ color: blue; }
<h1 id="cute">제목</h1>
3. class 선택자
html 요소에 같은 이름을 부여할 떄에는 class로 이름을 붙입니다. 즉 여러 개의 요소에 같은 class명을 부여할 수 있습니다. css에서는 class선택자 앞에 '.'을 붙여야 합니다.
.atxt { font-weight: bold; } // 클래스 명이 atxt인 p요소의 글자를 굵게 표시
<p class="atxt">안녕</p>
4. 전체 선택자
전체 선택자는 페이지의 모든 요소를 가리키는 선택자로서 '*'로 표시 합니다.
*{ color: red; } 는 페이지 내의 모든 요소들을 빨간색으로 표시하도록 속성을 부여합니다.
5. 하위 선택자
하위 선택자는 요소 내부에 있는 모든 해당 요소를 가리키며, 선택자 사이를 공백으로 분리합니다.
하위 선택자는 스타일을 적용하고자 할 때 부모에게 포함된 모든 요소에 스타일을 적용하는 것입니다.
abox 클래스 내부의 있는 모든 p태그들의 문자를 파란색으로 표시하도록 속성을 부여하고 싶은 경우.abox p {color : blue}; 로 작성할 수 있습니다.
6. 자식 선택자
자식 선택자는 ">" 기호를 사용하여 표시합니다. 예를 들어, "ul > li"는 ul 요소의 직계 자식인 li 요소를 선택합니다. 이것은 ul 요소 내부에 있는 모든 li 요소를 선택하는 것이 아니라, ul 요소의 직계 자식인 li 요소만을 선택합니다.
ul > li { color: red; }
만약 ul 요소의 자손인 모든 li 요소의 글씨 색상을 변경하려면, 자식 선택자 대신 후손 선택자인 "ul li"를 사용해야 합니다.
7.인접 선택자
인접 선택자는 "+" 기호를 사용하여 표시합니다. 예를 들어, "h1 + p"는 h1 요소 다음에 오는 첫 번째 p 요소를 선택합니다. 이것은 h1 요소와 직접적으로 연결된 첫 번째 p 요소만을 선택합니다.
h1 + p { color: blue; }
이 예시에서는 h1 요소 다음에 오는 첫 번째 p 요소의 글씨 색상을 파란색으로 지정합니다. 이와 같이 인접 선택자는 특정 요소의 바로 다음 형제 요소를 선택하는 데 유용합니다.
8. 형제 선택자
형제 선택자는 현재 요소와 같은 계층에 있는 요소만을 선택할 수 있으며 '~'로 구분합니다.
형제 선택자는 "~" 기호를 사용하여 표시합니다. 예를 들어, "p ~ span"은 p 요소와 같은 계층 구조에 있는 모든 span 요소를 선택합니다. 이것은 p 요소 이후에 나오는 모든 span 요소를 선택합니다.
p ~ span { font-weight: bold; }
이 예시에서는 p 요소 이후에 나오는 모든 span 요소의 글씨체를 굵게(bold) 지정합니다. 이와 같이 형제 선택자는 특정 요소와 같은 계층 구조에 있는 다른 요소들 중에서 선택할 때 유용합니다.
9. 그룹 선택자
그룹 선택자는 쉼표(,)를 사용하여 표시합니다. 예를 들어, "h1, h2, h3"은 h1, h2, h3 요소들을 모두 선택합니다.
h1, h2, h3 { font-family: Arial, sans-serif; color: #333; }
이 예시에서는 h1, h2, h3 요소들의 글씨체를 Arial, sans-serif로, 글씨 색상을 #333으로 지정합니다. 이와 같이 그룹 선택자는 여러 개의 요소를 선택하여 동일한 스타일을 적용할 때 유용합니다.
10. 속성 선택자
html 요소의 속성 유무 또는 속성값을 중괄호 [] 안에 넣어 선택자로 사용할 수 있습니다. 예를 들어, "a[target]"는 target 속성을 가진 모든 a 요소를 선택합니다.
속성 선택자는 속성 값을 함께 지정하여 사용할 수도 있습니다. 예를 들어, "a[target='_blank']"는 target 속성 값이 "_blank"인 모든 a 요소를 선택합니다.
a[target] { color: blue; }
a[target='_blank'] { text-decoration: none; }
이 예시에서는 target 속성을 가진 모든 a 요소의 글씨 색상을 파란색으로 지정합니다. 또한, target 속성 값이 "_blank"인 모든 a 요소의 밑줄을 제거합니다. 이와 같이 속성 선택자는 특정 HTML 속성을 가진 요소를 선택하여 스타일을 지정하는 데 유용합니다.
11. 가상 클래스 선택자
가상 클래스 선택자란 링크가 걸린 문자에 스타일을 부여하는 것입니다.
가상 클래스 선택자는 콜론(:)을 사용하여 표시합니다. 예를 들어, "a:hover"은 마우스 커서가 a 요소 위에 있을 때의 상태를 선택합니다.
가상 클래스 선택자 중 일부는 다음과 같습니다.
- a:hover 마우스 커서가 요소 위에 있을 때
- a:active 마우스 클릭 시 요소가 활성화되었을 때
- a:focus 요소가 포커스를 받았을 때
- a:active 링크 걸린 글자가 활성화되었을 경우 속성을 부여하는 선택자
- a:visited 링크를 클릭하여 해당 페이지에 갔다가 돌아온 경우의 속성을 부여하는 선택자
12. 가상요소 선택자
가상요소 선택자는 요소에 id명이나 class명을 부여하지 않고도 위치를 찾아서 선택할 수 있는 선택자입니다.
가상요소 선택자는 콜론(:)을 사용하여 표시합니다. 예를 들어, ":before"은 요소의 시작 부분에 콘텐츠를 추가하고 이를 스타일링할 때 사용됩니다.
가상요소 선택자 중 일부는 다음과 같습니다.
- :before 요소의 시작 부분에 콘텐츠를 추가할 때
- :after 요소의 끝 부분에 콘텐츠를 추가할 때
- :first-letter 요소의 첫 글자에 스타일을 지정할 때
- :first-line 요소의 첫 번째 줄에 스타일을 지정할 때
- :nth-child(n) 같은 요소 중 n번째 요소
- :first-child 같은 요소 중 첫 번째 요소
- :last-child 같은 요소 중 마지막 요소
13. 종속 선택자
종속 선택자는 요소 간의 계층 구조를 활용하여 특정 요소를 선택할 때 사용됩니다.
종속 선택자는 type 선택자와 id선택자, class 선택자가 결합한 형태입니다.
<p id="axtx">선택자의 다양한 표현</p>마크업이 위와 같을 때 #atxt 와 p#atxt 는 같은 선택자입니다. 다만 둘의 우선순위는 p#atxt가 #atxt보다 높은 우선순위를 갖게 됩니다.
14. 선택자의 우선순위
CSS 스타일 시트에서 스타일을 지정하는 선택자들은 우선순위가 존재합니다. 스타일 우선순위는 다음의 규칙에 따라 결정됩니다.
- 인라인 스타일(inline style) : style 속성을 통해 직접 지정한 스타일은 다른 선택자보다 우선순위가 가장 높습니다.
- ID 선택자 : id 선택자를 통해 스타일을 지정한 것이 다른 선택자보다 우선순위가 높습니다.
- 클래스 선택자, 가상 클래스 선택자, 속성 선택자 : 클래스 선택자, 가상 클래스 선택자, 속성 선택자로 스타일을 지정한 것이 다른 선택자보다 우선순위가 높습니다.
- 요소 선택자, 가상 요소 선택자 : 요소 선택자, 가상 요소 선택자로 스타일을 지정한 것이 다른 선택자보다 우선순위가 낮습니다.
- 전체 선택자 : 전체 선택자(*)는 어떤 선택자보다도 우선순위가 가장 낮습니다.
전체 순위는 다음과 같습니다
Type 선택자 < class 선택자, 가상 선택자 < id 선택자 < 인라인 스타일 < !important
또한, 스타일 우선순위가 동일한 경우 나중에 선언된 스타일이 우선순위가 더 높습니다. 이러한 스타일 우선순위 규칙을 이해하면 원하는 스타일이 적용되도록 적절한 선택자를 사용할 수 있습니다.