[CSS] 셀렉터(selectors)
2022. 9. 30. 16:45ㆍFront-end
반응형
종류
Universal → *
type → Tag (div)
ID → #id
Class → .class
State → :
Attribute → []
사용법
selector {
property: value;
}예제
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol>
<li id="special">fist</li>
<li>second</li>
</ol>
<h1 id="special">hello</h1>
<button>button 1</button>
<button>button 2</button>
<div class="red"></div>
<div class="blue"></div>
<a href="naver.com">naver</a>
<a href="google.com">google</a>
<a>empty</a>
</body>
</html><css>
* { /* Universal */
color: green;
}
li { /* type */
color: pink;
}
#special { /* ID */
color: blue;
}
<!-- 구체적일 수록 우선순위가 높아져서 덮어쓴다.
(* < li < #special 순으로 구체적일 수록 우선순위가 높아진다) -->
.red { /* Class */
width: 100px;
height: 100px;
padding: 20px 0px 20px 0px; /* 시계 방향으로 줄여서 사용가능 */
background: gold;
margin: 20px;
border: 2px dashed red; /* 이런식으로 3가지를 한번에 작성가능 */
/* (크기는 2px, dashed라는 점선 모양이고, color는 red이다) */
}
button:hover { /* State : 버튼위에 마우스 올리면 색 변함*/
color: red;
background: beige;
}
a[href] { /* Attribute : a태그 중 href의 속성이 있는 것만 색 변함 */
color: red;
}
-응용: 속성값에 따라서도 스타일링이 가능하다-
a[href="naver.com"] : href 속성의 값이 naver.com 인 것만
a[href^="naver"] : href 속성의 값이 naver로 시작하는 것만
a[href$=".com"] : href 속성의 값이 .com으로 끝나는 것만
li#special : li에 있는 special만
반응형
'Front-end' 카테고리의 다른 글
| [HTML] 웹에서 바로 실습 할 수 있는 곳 : JS Bin 웹사이트 (0) | 2022.09.29 |
|---|---|
| [HTML] 유효한 태그를 썼는지 안 썼는지 확인하는 곳 : validator 웹사이트 (0) | 2022.09.28 |
| [HTML] 태그들의 정보 보는곳 : mdn 웹사이트 (0) | 2022.09.27 |
| [HTML] 빠르게 마크업하기(준비물 4가지 사이트) (0) | 2022.09.26 |
| [HTML] 아이콘 무료사이트 (0) | 2022.09.23 |