반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css 기초2 - 족보관계를 이용한 선택자 - 관계선택자</title>
<style>/*스타일 앞에 꼭 태그명이 오지는 않고 다양한 선택자가 올 수 있다.*/
h1{color:red;}
div h1{color:blue;}/* div는 복수의 개념으로 "모든 div 태그의 안에 있는(=자손 중에서)" "모든 h1태그"에 스타일을 입혀준다. 띄어쓰기=자손 */
div p{color:pink;}/* div는 복수의 개념으로 "모든 div 태그의 안에 있는(=자손 중에서)" "모든 p태그"에 스타일을 입혀준다. */
li>p{color:green}/*모든 li(리스트) 태그(=자손이 아닌 자식 : 즉, 부모관계) 중 모든 p태그에 스타일이 적용된다. 꺽쇠=자식 */
.a h1 {color:black}/* .a 띄어쓰기는, a라는 클래스를 가지고 있는 모든 h1(자손 포함)에 스타일이 적용된다.*/
h2.b{color:lime}/*띄어쓰기 안하고 붙여 쓰면은, h2태그라는 자신 중 b라는 클래스를 가지고 있는 h2태그들을 선택하여 스타일을 적용된다.*/
h2#c{color:skyblue}/*모든 h2 태그이면서 c라는 id를 선택하여 스타일 적용 = 단수*/
</style>
</head>
<body>
<h1 class="b">TITLE</h1>
<h2 class="b">TITLE</h2>
<h2 id="c">TITLE</h2>
<div>
<h1>TITLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<ul>
<!-- list 태그 안에 있는 p태그라도 div 안에 들어가 있는 p태그라면 바로 부모관계가 아니더라도 div 영역에 들어간 모든 p태그는 공통된 스타일이 적용된다. -->
<li>
<p>PINK</p>
</li>
<li>
<p>Yellow</p>
</li>
</ul>
</div>
<div class="a">
<h1>TITLE</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>반응형
'IT > HTML&CSS' 카테고리의 다른 글
| [HTML] CSS 기초 - 블록라벨/인라인구조, 스타일 상속, CSS 파일 분리방법(2021-09-23) (0) | 2021.11.17 |
|---|---|
| [HTML] CSS 기초 - 관계선택자_족보관계를 이용(2021-09-23) (0) | 2021.11.17 |
| [HTML] CSS 기초 - 선택자(2021-09-16) (0) | 2021.11.09 |
| [HTML] 예제풀기(2021-09-14) (0) | 2021.11.09 |
| [HTML] div 영역 나누기_예제만들기(2021-09-10) (0) | 2021.11.09 |