CSS 선택자
1. 선택자
| 선택자 | 기호 | 가중치 |
| 전체 선택자 | * | 0 |
| 태그 선택자 | 태그이름 | 1 |
| 클래스 선택자 | .클래스이름 | 10 |
| 아이디 선택자 | #아이디이름 | 100 |
| 계층 선택자 | 기호 |
| 자손 선택자 | 기준 선택 |
| 자식 선택자 | 기준>선택 |
| 후행 선택자 | 기준~선택 |
| 근접 후행 선택자 | 기준+선택 |
① 전체 선택자 (*) : 모든 요소를 선택
② 태그 선택자 (태그이름)
③ 클래스 선택자 (.클래스이름) : 중복 가능, 재사용성이 뛰어남
④ 아이디 선택자 (#아이디이름) : 중복 불가능, 한 문서당 그 아이디는 1번만 사용 가능
(로고, 검색창, 상단메뉴바 등 고유 디자인에 사용)
※ 한 문서에서 1번 이상 사용할 경우 자체에서는 오류가 없으나 웹 표준 테스트에서 오류 발생
<!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>
<style>
/* (1) 전체선택자 : 기호 */
*{
color : salmon
}
/* (2) 태그 선택자 : 태그 이름 */
li{
color: blue;
}
/* (3) 클래스 선택자 => .클래스이름 */
.dinner{
color: navy;
}
/* (4) 아이디 선택자 => #아이디이름 */
#pick{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS</h1>
<p>웹페이지를 꾸며주는 스타일 시트 언어</p>
<ul>
<li>CSS구조</li>
<li>CSS선택자</li>
<li>CSS스타일</li>
</ul>
<h1 class="dinner">오늘은 뭐먹지?</h1>
<ul class="dinner">
<li class="dinner" id="pick">알배추전</li>
<li class="dinner">국수</li>
<li class="dinner">돈까스</li>
</ul>
</body>
</html>
2. 계층 선택자
| 계층 선택자 | 기호 |
| 자손 선택자 | 기준 선택 |
| 자식 선택자 | 기준>선택 |
| 후행 선택자 | 기준~선택 |
| 근접 후행 선택자 | 기준+선택 |
<!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>
<style>
/* (1) 자손 선택자 - 기호 : 띄어쓰기 */
/* (1-1) div를 기준으로 자손인 span의 색 tomato */
/* (1-2) div를 기준으로 자손인 li 의 색 blue */
div span{
color : tomato;
}
div li{
color : blue;
}
/* (2) 자식 선택자 - 기호 : > */
ol>span{
color : hotpink;
}
/* ol을 기준으로 자식인 span의 색 hotpink */
/* (3) 근접 후행선택자 - 기호 : + */
/* 첫 번째 li를 기준으로 근접해서 붙어있는 li의 색 green */
li+li{
color: green;
}
/* (4) 후행선택자 - 기호 : ~ */
/* 첫 번째 li를 기준으로 형제관계인 li의 색 lime */
li~li{
color: lime;
}
</style>
</head>
<body>
<div>
<strong class="rule">우리 반 규칙!</strong>
<ol>
<li>지각하지 않기!</li>
<li class="rule">결석하지 않기!</li>
<span>불가피할 땐 수민쌤한테 꼭 연락하기!</span>
<li>복습하기!</li>
</ol>
</div>
</body>
</html>
※ first-child, nth-child() 등을 이용하여 같은 위치에 있는 선택자들의 기준 변경
<!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>
<style>
/* 계층선택자 이해하기 */
/* (1) 자손 선택자 - 기호 : 띄어쓰기 */
/* (1-1) div를 기준으로 자손인 span의 색 tomato */
/* (1-2) div를 기준으로 자손인 li 의 색 blue */
div span{
color : tomato;
}
div li{
color : blue;
}
/* (2) 자식 선택자 - 기호 : > */
ol>span{
color : hotpink;
}
/* ol을 기준으로 자식인 span의 색 hotpink */
/* (3) 근접 후행선택자 - 기호 : + */
/* 첫 번째 li를 기준으로 근접해서 붙어있는 li의 색 green */
li+li{
color: green;
}
/* (4) 후행선택자 - 기호 : ~ */
/* 첫 번째 li를 기준으로 형제관계인 li의 색 lime */
li~li{
color: lime;
}
/* +) 만약 두 번째 li를 기준으로 하고 싶다면?
nth-child(숫자)
*/
li:nth-child(2) ~ li {
color: orange;
}
li:first-child ~ li {
color: pink;
}
/* rule이라는 클래스 중에 strong 태그에 해당하는 것만 설정 */
strong.rule{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<strong class="rule">우리 반 규칙!</strong>
<ol>
<li>지각하지 않기!</li>
<li class="rule">결석하지 않기!</li>
<span>불가피할 땐 수민쌤한테 꼭 연락하기!</span>
<li>복습하기!</li>
</ol>
</div>
</body>
</html>
3. 반응 선택자
| 반응 선택자 | 적용 |
| 선택자:hover | 대상에 마우스를 올렸을 때 |
| 선택자:active | 대상을 클릭했을 때 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
/* 반응 선택자
(1) 대상:hover 대상에 마우스를 올렸을 때 */
h1:hover {
color: blue;
}
/* (2) 대상:active 대상을 클릭했을 때 */
h1:active{
color: red;
}
</style>
</head>
<body>
<h1>오늘은 즐거운 금요일!</h1>
</body>
</html>오늘은 즐거운 금요일!
4. 그룹 선택자
여러가지 요소를 선택하고 싶을 때, 콤마(,)를 이용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
/* 그룹 선택자 */
/* 여러가지 요소를 선택하고 싶을 때, 콤마(,)를 이용한다 */
h1,p{
color: pink;
}
</style>
</head>
<body>
<p class="subtitle">주말이다!</p>
</body>
</html>
'HTML CSS JS' 카테고리의 다른 글
| CSS margin, padding, box-sizing, border (0) | 2023.01.08 |
|---|---|
| CSS display (0) | 2023.01.08 |
| CSS 기본, 폰트(font) (0) | 2023.01.05 |
| HTML 폼 태그 (form tag) (0) | 2023.01.05 |
| HTML 리스트, 이미지, 앵커, 테이블 태그 (0) | 2023.01.04 |
댓글