tech.junha.kr

노트/CSS

Selector

작성

  • CSS는 1) 선택자와 2) 선언문으로 구성되어 있다.
    • 선택자: 규칙을 적용할 요소를 나타낸다.
    • 선언문: 적용될 기능을 key:value로 나타낸다.
selector {
    property : value;
}

1. 선택자의 종류

1) Type Selector: tagName

  • ,를 활용하여 동시에 여러개 지정이 가능하다.
h1, h2 {
    property : value;
}

2) Class Selector: .

.className {
    property : value;
}
예시1) box-0, box-1, box-2의 클래스를 가진 div 태그 생성
  • 클래스를 다중으로 선언하고 싶은 경우, 띄어쓰기로 구분한다.
<div class='box-0 box-1 box-2'></div>
예시2) 띄어쓰기 없이 붙여서 선언
  • .box-0.box-1{}: box-0, box-1 클래스 네임 모두 갖고 있는 엘리먼트를 선택
  • .box-0.box-2{}: box-0, box-2 클래스 네임 모두 갖고 있는 엘리먼트를 선택
  • .box-1.box-2{}: box-1, box-2 클래스 네임 모두 갖고 있는 엘리먼트를 선택
  • .box-0.box.-1.box-2{}: : box-0, box-1, box-2 클래스 네임 모두 갖고 있는 엘리먼트를 선택

3) ID Selector: #

예시) 특정 type, class, id를 모두 가진 요소를 선택할 경우
<div class="box active" id="junha"></div>
div.box.active#junha {
    property : value;
}

4) CSS Combinators: >, , +, ~

  • CSS combinators are explaining the relationship between two selectors.
(1) Child selector (자식 선택자): >
parent > child {
  property:value;
}
(2) Descendant Combinators(자손 선택자): (공백)
  • 아래 level에 있는 모든 엘리먼트 요소 선택을 한다.
parent descendant {
  property:value;
}
(3) Sibling Combinators(형제 선택자): +, ~
i) Adjecant Sibling selector: +
  • 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소 한개만 선택한다.
brother + sibling{
  property:value;
}
ii) General Sibling selector: ~
  • brother ~ sbling : brother과 동일 level에 있는 모든 형제요소를 선택한다.
div ~ p {
  propery:value;
}
<p>not be selected</p>
<div>not be selected too</p>
<p>be selected</p>
<p>be selected</p>

5) Pseudo-class(가상 클래스): :

  • 선택자 뒤에 :를 붙여 정의한다.
  • HTML에 class 네임을 거듭 추가하지 않고 선택자를 삼을 수 있다는 장점이 있다.
(1) Structural Pseudo-classes
  • element:first-child: element인데 첫번째 요소인 경우 선택
  • element:last-child: element인데 마지막 요소인 경우 선택
  • element:nth-child(n): element인데 n번째 요소인 경우 선택
    • n could be 2n(짝수), 2n-1(홀수)
li:nth-child(3){
    property : value;
}
(2) User Action Pseudo-classes
  • element:hover: 마우스를 올렸을 때 선택
  • element:active: 마우스를 눌렀을 때 선택
  • element:focus: 엘리먼트를 포커스했을 때 선택
.btn:hover{
    property : value;
}

6) Pseudo-element(가상 요소): ::

  • ::after, ::before
  • 내용의 앞과 뒤에 콘텐츠를 추가할 때 사용한다.
  • content=""는 가상요소가 만들어지므로 필수 속성이다.

7) 범용 선택자

  • 문서에 있는 모든 요소에 대해 스타일을 적용한다.
 * {
     property : value;
  }

2. 선택자 우선순위

1) 항상 높은 우선순위의 선택자가 우선으로 적용된다.

  • 3순위: type 선택자
  • 2순위: class, pesudo-class 선택자
  • 1순위: id 선택자

2) Rule Breakers

  • 1순위인 id 선택자보다 우선순위가 앞서지만, 왠만하면 사용하지 않는 것을 권장한다.
(1) Inline Style
  • <p style=""></p>
(2) !important
  • {color: red !important}
  • 우선순위가 가장 높기 때문에, 다른 곳에서 값을 바꿔도 오버라이딩하여 해당 속성이 변경되지 않도록 한다.

3) 중첩

  • 순서에 의한 케스케이딩: 나중에 선언할 수록 우선순위가 높다.
  • 디테일에 의한 케스케이딩: 더 구체적으로 작성된 선택자의 우선순위가 높다.