<!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>CSS3 Selector Basic</title>
<style>
.select {color:pink;}
.item {color: red;}
.header {background-color:blue;}
li.abc {color:aquamarine;}
</style>
</head>
<body>
<ul>
<li class="select">사과</li>
<li>바나나</li>
<li class="select">오렌지</li>
<li>감</li>
</ul>
<h1 class="item header">동해물과 백두산이</h1>
<h2 class="abc">제목글자</h2>
<ul>
<li class="abc">사과</li>
<li>바나나</li>
<li>오렌지</li>
<li>감</li>
</ul>
</body>
</html>
<style>
h1 {background-color: rgb(255, 128, 134);}
h2 {background-color: #81fd81;}
h3 {background-color: pink;}
p {color:red;}
</style>
</head>
<body>
<h1>Type Selector</h1>
<h2>Type Selector</h2>
<h3>Type Selector</h3>
<p>각 요소에 다르게 적용</p>
</body>
<style>
.class1 {
color: blue;
background-color: yellow;
}
.class2 {
color: red;
background-color: green;
}
h3.class1{
color:navy;
background-color: pink;
}
</style>
</head>
<body>
<h1 class="class1">Class 1입니다.</h1>
<p class="class1">Class 1입니다.</p>
<h1 class="class2">Class 2입니다.</h1>
<p class="class2">Class 2입니다.</p>
<h3 class="class1">Element+Class Selector</h3>
</body>Class 1입니다.
Class 1입니다.
Class 2입니다.
Class 2입니다.
Element+Class Selector
▼밑에 적혀있는 속성 이름 중에 위에 적혀있는 겹치는 글자가 있으면 그대로 가져다 쓰는 거임.
.png같은 경우에는 .png가 밑에 있는 경우에(text=img/pic.png) (자세한건 126페이지) // 추가예제 텍스트-3 " 속성 선택자"
<style>
p[text]{color:red;}
p[text="red"]{color:yellow; background-color:purple;}
p[text~="bb"]{color:yellow; background-color:green;}
p[text|="a1"]{color:yellow; background-color:blue;}
p[text^="img"]{color:yellow; background-color:red;}
p[text$=".png"]{color:yellow; background-color:gray;}
p[text*="ong"]{color:yellow; background-color:pink;}
</style>
<body>
<p text="hello">모든 텍스트</p>
<p text="red">텍스트 매칭 속성</p>
<p text="aa bb cc">리스트 매칭 속성</p>
<p text="a1-a2-a3">범위 텍스트 매칭 속성</p>
<p text="img/pic.jpg">텍스트 시작 매칭 속성</p>
<p text="img/pic.png">텍스트 끝 매칭 속성</p>
<p text="Seongyoung Hong">텍스트 패턴 매칭 속성</p>
</body>
| 종류 | 형태 | 사용 예 | |
| 속성 선택자 | 선택자[속성=값] | 텍스트 매칭 | input [type = text] |
| 선택자[속성~=값] | 리스트 매칭 | div [date-role ~= row] | |
| 선택자[속성|=값] | 범위 텍스트 매칭 | div [date-role |= row] | |
| 선택자[속성^=값] | 텍스트 시작 매칭 | div [date-role ^= row] | |
| 선택자[속성$=값] | 텍스트 끝 매칭 | div [date-role $= row] | |
| 선택자[속성*=값] | 텍스트 패턴 매칭 | div [date-role *= row] |
**후손선택자와 자손 선택자
<style>
#header > h1 {color:red;}
#section > h1 {color:orange;}
</style>
</head>
<body>
<div id="header">
<h1 class="title">Lorem ipsum</h1>
<div id="nav">
<h1>Navigation</h1>
</div>
</div>
<div id="section">
<h1 class="title">Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
스타일 주석 /*
바디주석 <!--
'HTML' 카테고리의 다른 글
| 0414 HTML CSS 실습 (0) | 2023.04.20 |
|---|---|
| 0413 HTML CSS 실습 (0) | 2023.04.14 |
| CSS 수업 내용 (0) | 2023.04.09 |
| Iframe 공간 분할 & 시맨틱 (0) | 2023.04.06 |
| 시간/날짜/나이/범위안에서 지점 선택 (0) | 2023.04.06 |
