https://coding-diary100.tistory.com/45
CSS_ 기본 개념과 문법
CSS(Cascading Style Sheet) 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 CSS 문법 HTML 문서 사이에 요소를 사용하여 적용하는 방법 각각 페이지 마다
coding-diary100.tistory.com
기본 상속 구조
HTML 코드
<html>
<head>
<title>테스트</title>
</head>
<body>
<h2>HTML의 구조</h2>
<p>HTML의<b>구조</b>입니다.</p>
</body>
</html>
상속 구조를 위에서 부터 살펴보자
부모: html
자식 : head , body
head 자식: tilte
body 자식 :h2, p
p 의 자식 :b
1.자식 선택자
- 부모의 요소 하위의 자식요소의 스타일을 적용
body>p {color:deepskyblue}
2. 자손 선택자
- 조상요소 하위의 모든 요소의 스타일을 적용
- 자손은 자식을 포함
body p{color:deepskyblue}
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>
ul>a{font-size: 30px;}
ul a{color: deeppink;}
</style>
</head>
<body>
<h2>자식,자손 선택자</h2>
<ul>
<a href="http://www.naver.com">네이버</a>
<li><a href="http://www.google.com">구글</a></li>
<li>다음</li>
<li><a href="http://www.nate.com">네이트</a></li>
</ul>
</body>
</html>
3.인접 형제 선택자
- 동일한 부모의 요소를 갖는 자식 요소들의 관계
- 연속된 동생 요소의 스타일을 적용
h2+p{color:deepskyblue;} 바로 옆에 있어야함
4.일반 형제 선택자
-형제 관계를 갖는 요소 중에서 요소 다음에 나오는 모든 동생 요소의 스타일을 적용
h2~p{color:deepskyblue;}
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>
p + span {
color: gold; background-color: deepskyblue; font-size: 20px;
}
h3 + p {background-color: deeppink;}
h3~ p {color: red;}
</style>
</head>
<body>
<h2>형제 선택자</h2>
<div>
<h3>첫째</h3>
<p>둘째</p>
<a href="#">셋째</a>
<h4>넷째</h4>
<p>다섯째</p>
<span>여섯쨰</span>
</div>
</body>
</html>
'코딩공부 > HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS_가상 선택자 (0) | 2023.03.30 |
|---|---|
| CSS_속성 선택자 (2) | 2023.03.28 |
| CSS_class 선택자 (0) | 2023.03.28 |
| CSS_id선택자 (0) | 2023.03.28 |
| CSS_상속 (0) | 2023.03.28 |
