CSS 선택자(CSS Selector)
CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다.
선택자 {
선언;
선언;
선언;
}
선택자 목록
콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습니다.
선택자1,
선택자2 {
...
}
선택자 붙여 쓰기
여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 볼게요.
<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2>
예시 1. 아이디 + 클래스
#mongolia.title
예시 2. 클래스 + 클래스
.large.title
예시 3. 태그 + 아이디 + 클래스
h2#mongolia.large.title
자식 결합자 (Child Combinator)
오른쪽 꺾쇠로 선택자를 이어 줍니다. 예를 들어서 아래 코드에서 tesla-y-2025.png를 보여 주는 이미지 태그를 선택하려면 .article > img로 선택할 수 있습니다.
<div class="article">
<img src="tesla-y-2025.png">
...
</div>
.article > img {
width: 100%;
}
자손 결합자 (Descendant Combinator)
스페이스(띄어쓰기)로 선택자를 이어 줍니다. 예를 들어서 아래 코드에서 tesla-w-2025.png를 보여주는 이미지 태그를 선택하려면 .article img로 선택할 수 있습니다.
<div class="article">
<p> 이번에 리뷰해 볼 차량은 테슬라 모델 W 입니다.
<img src="tesla-w-2025.png">
</p>
...
</div>
.article img {
width: 100%;
}
가상 클래스 (Pseudo-class)
가상 클래스는 의사 클래스, 가짜 클래스라고도 부릅니다. 요소의 상태 같은 걸 선택할 때 사용하는 클래스입니다. 정해진 이름 앞에 콜론(:)을 붙여서 사용합니다. 대표적으로 :hover(마우스를 올렸을 때), :active(클릭한 상태), :visited(방문한 적이 있는 링크), :focus(포커싱 됐을 때)등이 있습니다. 예를 들어서 밑줄이 없는 링크에 마우스를 올렸을 때 밑줄이 생기도록 하려면 :hover를 활용하면 됩니다.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
'program > web(html,css)' 카테고리의 다른 글
[html] video tag (0) | 2024.02.03 |
---|---|
[html] 테이블 (0) | 2024.02.03 |
[css]캐스케이드(Cascade) (0) | 2024.02.03 |
[CSS] 선택자 (전체, 자식) (0) | 2024.01.29 |
쿠키 SameSite (1) | 2024.01.27 |