반응형
1. 속성 선택자
| 기본속성 | 선택자[속성=값] | input[type=text] | |
| 문자열속성 | 선택자[속성~=값] | 공백 | div[data-role~=row] |
| 선택자[속성|=값] | 하이픈 | div[data-role!=row] | |
| 선택자[속성^=값] | 시작 | div[data-role^=row] | |
| 선택자[속성$=값] | 끝 | div[data-role$=row] | |
| 선택자[속성*=값] | 포함 | div[data-role*=row] |
2. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>4일차</title>
<link href="css/ex02.css" rel="stylesheet">
</head>
<body>
<h1>CSS 2일차</h1>
<p class="newspaper">newspaper</p>
<p class="news paper">newspaper</p>
<p class="news-paper">newspaper</p>
<p class="newpaper">newspaper</p>
<p class="newspapers">newspaper</p>
</body>
</html>
3. CSS Code
@charset "utf-8";
/* CSS Document */
/* p 태그에 클래스 속성이 newspaper에 background 적용 */
p[class=newspaper]{
background:tomato;
}
/* p 태그에 클래스 속성이 news를 포함 */
p[class*=news]{
background:chocolate;
}
/* p 태그에 클래스 속성이 news를 포함하며 공백이 있는 것 */
p[class~=news]{
background:lime;
}
/* p 태그에 클래스 속성이 news를 포함하며 하이픈이 잇는 것 */
p[class|=news]{
background:purple;
}
/* p 태그에 클래스 속성이 newp로 시작하는 것 */
p[class^=newp]{
background:lavender;
}
/* p 태그에 클래스 속성이 ers로 끝나는 것 */
p[class$=ers]{
background:orange;
}
4. HTML / CSS 파일
ex02.html
0.00MB
ex02.css
0.00MB
5. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190609 Basic Study 26(:taget 활용하기) (0) | 2019.06.09 |
|---|---|
| HTML5 - 190609 Basic Study 25(상태,링크,반응 선택) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 23(CSS 상속) (0) | 2019.06.09 |
| HTML5 - 190608 Basic Study 22(Note) (0) | 2019.06.08 |
| HTML5 - 190608 Basic Study 21(CSS 반응 선택자) (0) | 2019.06.08 |
