웹프로그래밍 - 3-1 CSS 기초 - 선택자
다양한 선택자
1. 연결 선택자
1) 연결 선택자
- 요소 간의 관계성을 이용해 특정 요소를 선택
- 특정 요소의 아래에 있는 요소를 선택하는 방법
2) 하위 선택자: 특정 요소 아래에 있는 모든 요소(후손) -> 가장 많이 사용
- 부모 요소에 포함된 모든 하위 요소에 스타일 적용
- 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용(후손)
- 하위 선택자를 정의할 때는 상위 요소와 하위 요소를 나란히 씀.
ex) section p { color: blue; }
3) 자식 선택자: 자식 요소에 스타일을 적용하는 선택자
두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분
ex) section > p { color:blue;}
4) 인접 형제 선택자: 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용
ex) h1 + p { text-decoration: underline; }
h1 요소 다음에 오는 p태그 요소들 중 첫번째 요소에만 밑줄 적용
5) 형제 선택자 : 형제 요소들에 스타일 적용
인접 형제 선택자와 다른 점 : 모든 형제 요소에 다 적용됨.
ex) h1 ~ p { text-decoration: underline; }
h1 요소 다음에 오는 모든 형제 p 요소에 밑줄 적용
2. 속성 선택자
: 지정한 속성을 가진 요소를 찾아 스타일 적용
css 코드
a[href]
{
background: yellow;
}
html 코드
<!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>Document</title>
<link rel="stylesheet" href="css/css_base.css" type="text/css">
</head>
<body>
<h1>내부 스타일 시트</h1>
<ul>
<li><a>메인 메뉴:</a></li>
<li><a href="#" target="_blank">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
</ul>
</body>
</html>
- [속성 = 값] 선택자
주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용
a[target="_blank"]
{
background-color: yellow;
}
다음은 가상 클래스와 가상 요소에 대해 알아보겠습니다.
2023.03.26 - [수업] - 웹프로그래밍 - 3.1 가상클래스와 가상 요소
웹프로그래밍 - 3.1 가상클래스와 가상 요소
가상클래스와 가상 요소 가상(pseudo): html 문서에 코드로 명시되어 있지 않지만, 사용자 동작에 반응하는 가상 클래스 표기 설명 :link 방문하지 않은 링크에 스타일 적용 :visited 방문한 링크에 스
codingtoday.tistory.com