TIL 2. CSS 선택자와 변수

rahula·2021년 5월 4일
0

HTML & CSS

목록 보기
2/7
post-thumbnail

selector(선택자)

선택자는 특정 요소 혹은 요소들을 태그 이름, id(#)나 class(.) 키워드 뒤에 놓음으로써 CSS에서 요소를 인식하고 선택할 수 있게 하는 명령어를 말한다.

cascading 원칙

선택자 개념을 다루는 김에 cascading원칙을 짚고 넘어가겠습니다.

CSS는 cascading style sheet의 약자다. 계단처럼 위에서부터 아래로 읽어내려가는(cascading) 원칙때문에 지어진 이름이라고 한다. 아래에 있을수록 스타일은 더 우선적으로 적용된다.

div {
    background: blue;
}

div {
    background: green;
}

div {
    background: red;
}

위의 예시에서 div의 배경색은 빨강, 초록, 파랑순으로 우선순위가 적용된다.

selector specifity(선택자 우선순위)

selector중에서도 적용의 우선순위가 있다.
id(#)는 100, class(.)은 10, 기본적인 tag는 1. 구체적일수록 우선적으로 적용된다고 보면 된다.

// 1
div {
    background: blue;
}

// 10
.class { 
    background: green;
}

// 100
#id{ 
    background: red;
}

위의 예시에서 선택자들이 가리키는 요소는 같은 것인데도, 선택자 우선순위에 따라서 결국 div는 빨강색이 된다.

재밌는 것은 한 번에 여러가지 선택자를 쓰는 경우이다.
선택자 specifity는 여러 개를 쓰면서 더해지고, 다 더해진 값이 높은 선택자가 적용된다.

combinators

combinators를 이용해서 요소속의 자식들을 세부적으로 고를 수 있다. 뿐만 아니라 '>'로 부모 바로 밑의 자식 요소를, '+'로 같은 부모 아래의 다른 요소를 선택한다. '~'로는 먼 밑의 자식 요소를 선택한다.

header div p span {
}
div > p {
}
div + article {
}
div ~ p {
}

pseudo selector

좀 더 세부적으로 element를 선택해주는 것. this is much much better way than creating id or class.

HTML의 code를 건드리지 않고도, 즉 id나 class를 정해주지 않아도 HTML의 모양새를 바꿀 수 있다.

div:nth-child (2n + 1) {
}
div:last-child {
}
form input::placeholder {
}
p::selection {
}

event selector

hover, focus, visited와 같이, 요소의 상태 혹은 이벤트에 따른 스타일을 결정할 수 있다.

div:active{
}
div:hover{
}
div:focus{
}

attribute selector

element의 attribute을 따로 부름으로써 지정할수 있다.

input[type="password"] {
}
input[placeholder="name"] {
}
  • :not(.class .abc)

대상 element가 ()안의 클래스가 아닐 경우에 execute함.

variables(custom property)

변수 를 지정해서 여러 element의 property-value를 한번에 바꿀 수 있다. css를 일종의 프로그래밍 코드로 만들어주는 기능.

:root {
  --main-color: green;
  --main-opacity: 0.5;
}
div {
  background-color: var(--main-color);
  opacity: var(--main-opacity);
}
profile
백엔드 지망 대학생

0개의 댓글