728x90
반응형
✔ 그룹 선택자
1. 그룹 선택자
여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용
h2, p {text-align: center;}
<html>
<head> <body>
제목<title> <h2> <p>
HTML 구조 안녕하세요 <span>
<b>를 알아볼게요
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>그룹선택자</title>
<style>
h2,p,h3,ul {text-align: center;}
h2 {color: deepskyblue;font-size: 50px;}
li {display: inline-block; margin-right: 30px; font-weight: bold; color: deeppink;}
</style>
</head>
<body>
<h2>그룹선택자</h2>
<p>여러개의 요소를 나열하고 (,)로 구분하여 스타일을 적용</p>
<h3>선택자의 종류</h3>
<ul>
<li>전체</li>
<li>요소</li>
<li>아이디</li>
<li>클래스</li>
<li>그룹</li>
</ul>
</body>
</html>
✔ 그룹 선택자 결과
✔ 자손 선택자
2. 자손 선택자
조상요소 하위의 모든 요소의 스타일을 적용, 자손은 자식을 포함
body p{color: deeppink}
3. 자식 선택자
부모의 요소 하위의 자식요소의 스타일을 적용
body > p{color: deeppink}✔ 자손 선택자 코드
<!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>자손선택자</title>
<style>
ul a {color: deeppink;text-decoration: none;}
ul > a {font-size: 25px;}
</style>
</head>
<body>
<h2>자손/자식 선택자</h2>
<ul>
<li>다음</li>
</ul>
</body>
</html>
✔ 자손 선택자 결과
✔ 일반 형제 선택자
4. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2 ~ p {color: deepskyblue;}✔ 일반 형제 선택자 코드
<!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>형제선택자</title>
<style>
h3 ~ p {color: white; background-color: deeppink;font-size: 20px;}
p +span {color: gold;background-color: deepskyblue;font-size: 20px;}
</style>
</head>
<body>
<h2>일반형제선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷쩨</h4>
<p>다섯째</p>
<span>여섯째</span>
<p>일곱째</p>
</div>
</body>
</html>
✔ 일반 형제 선택자 결과
✔ 인접 형제 선택자
5. 인접 형제 선택자
동일한 부모의 요소를 갖는 자식 요소들의 관계, 연속된 동생 요소의 스타일을 적용
h2 + p {color: deepskyblue;}✔ 속성 선택자
6. 속성 선택자
HTML 요소에서 src, gref, style, id, class..등 속성을 선택자로 지정해서 스타일을 적용
<img src = "apple.png" alt="사과이미지">
[src] {border: 3px solid red;}
[src="apple.png"] {border: 3px solid red;}✔ 속성 선택자 코드
<!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>속성 선택자</title>
<style>
[href] {text-decoration:none; color: deeppink;}
.attr { background-color: gold;}
[class='attr'] { font-size: 30px;}
[title] {text-align: center;font-size: 50px;}
</style>
</head>
<body>
<h2 title="h2 요소의 타이틀 속성">속성 선택자</h2>
<p><a href="https://www,naver.com" target="_blank">네이버</a></p>
<p class="attr">속성명과 속성값이 모두 일치하는 요소를 선택자로 지정</p>
</body>
</html>
✔ 속성 선택자 결과
✔ 가상 선택자
7. 가상 선택자
클래스를 추가할 필요없이 요소 중에서 순서에 따라 원하는 요소를 선택
<ul>
<li>김사과</li>
<li>반하나</li>
<li id ="orange" class ="orange">오렌지</li>
<li>이메론</li>
#orange {color: deepskyblue; }
.orange {color: deepskyblue; }
li:first-child
li 요소 중에서 첫번째 해당하는 요소의 스타일을 적용
li:last-child
li 요소 중에서 마지막에 해당하는 요소의 스타일을 적용
li:nth-child(n)
li 요소 중에서 n번째 요소의 스타일을 적용(예 : li:ntn-child(2n+1) : )
- n 은 0부터 시작한다
li:nth-child(odd)
li 요소 중에서 홀수번째 요소의 스타일을 적용
li:nth-child(even)
li 요소 중에서 짝수번째 요소의 스타일을 적용
:link
하이퍼링크가 연결됐을 때 선택자
visited
특정 하이퍼링크를 방문한적이 있을 때 선택
:hover
특정 요소에 마우스를 올렸을 때 선택
:active
특정 요소에 마우스 버튼을 클릭하고 있을 때 선택
::before
특정 요소 앞에 텍스트, 이미지등을 삽입
::after
특정 요소 뒤에 텍스트, 이미지등을 삽입✔ 가상 선택자 코드
<!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>가상 선택자</title>
<style>
.list > li:first-child {color: deeppink;}
.list > li:nth-child(2) {color: gold;}
.list >li:nth-child(odd) { background-color: greenyellow;}
.list > li:last-child{color: deepskyblue;}
a:link { text-decoration: none;}
a:visited {text-decoration: none; color: deepskyblue;}
/*하이퍼링크를 방문하면 변경되는 기능이다.*/
a:hover{text-decoration: underline;color: deeppink;}
/*마우스를 올리면 변경.*/
a:active {text-decoration: underline;color: gold;}
a::before {content: '🍓';}/*효과 전 후 처리하기 위한 목적으로 사용*/
a::after{content: '🍓';} /*내용 앞뒤에 백그라운데 효과를 넣어주는 효과*/
</style>
/*.(class) >(자식)*/
</head>
<body>
<h2>가상 선택자</h2>
<ul class="list">
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
<li>네번째</li>
</ul>
</body>
</html>
✔ 가상 선택자 결과
반응형
'Frontend > CSS' 카테고리의 다른 글
| CSS 위치지정(상대, 절대, 고정, float, clear, z-index) (0) | 2022.10.31 |
|---|---|
| CSS 배경 종류 (0) | 2022.10.31 |
| CSS 텍스트 종류 (0) | 2022.10.27 |
| CSS (상속, 전체/ id /class 선택자) (0) | 2022.10.26 |
| CSS (기본, 인라인/내부/외부 스타일) (0) | 2022.10.26 |