CSS | Selector (HTML 태그 선택 하는 방법)

Ryan·2020년 10월 21일
0

CSS

목록 보기
11/13
post-thumbnail

CSS에서 HTML태그를 선택하는 방법으로 태그와 태그 사이의 관계를 이용하여 선택하는 방법은 아주 다양하다.
클래스, ID를 남발하지 말고 깔끔하게 선택하는 방법을 연구해보자.

1. 부모 자식 관계

:

부모태그 자식태그 {}
부모태그 자식태그.클래스이름 {}
부모태그 > Direct자식태그 {}
부모태그 * {}
부모태그 자식
부모태그 :only-child {} 
자식태그:only-child {}
  • 띄어쓰기 로 자식태그를 선택하는 경우 가장 먼저 발견한 자식 태그를 선택한다.
  • > 로 자식태그를 선택하는 경우 바로 아래 자식 이어야 한다.
  • * 로 부모 속 다양한 태그를 모두 선택할 수도 있다.
  • only-child 는 띄어쓰기 유무가 중요

2. 다중 셀렉터

: 두가지 이상의 element 및 class, ID를 선택할 수 있는 selector

첫번째, 두번째 {}
시작태그 ~ 마지막태그 {}
  • , 쉼표를 이용하여 여러개의 태그를 동시에 선택할 수 있다.
  • ~ 를 이용하면 시작점과 끝점에 있는 모든 태그를 선택할 수 있다.

3. 태그 속 클래스명

: 동일한 태그속의 동일한 클래스명만 고를 수 있다.

태그이름.클래스명 {}

4. 다음 태그 선택

: 선택하고자 하는 이전 태그와 + 관계로 묶어 찾을 수 있다.

이전태그 + 선택할 태그 {}

5. 동일한 태그의 첫번째, 마지막을 선택

: 동일하게 반복되는 태그 중 첫번째 위치에 있는 태그를 선택하는 방법이다.

선택할태그:first-child {}
선택할태그:last-child {}
선택할태그의부모태그 :first-child {}
선택할태그의부모태그 :last-child {}
  • 띄어쓰기 유무에 따라 선택할 태그인지 그 부모 태그인지가 결정된다.

6. 동일한 태그의 '몇'번째를 선택

: 동일하게 반복되는 태그 중 순서를 찾아 선택하는 방법이다.

선택할태그:nth-child(순서)
선택할태그:nth-last-child(순서)
  • last는 끝에서부터 순서를 체크한다(1번부터 시작)
profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글