CSS Selectors - 선택자 알아보기 1

 

 

 

CSS Selectors

 

---

 

• CSS는 브라우저가 해석한 HTML DOM 트리구조를 기준으로 HTML tag를 스타일링 합니다.
• 이때에 어떠한 태그를 선택하여 스타일링 할지 선택해야하는데요, 이것을 우리는 셀렉터(선택자)라고 부릅니다.
• CSS는 참 많은 셀렉터와 방식이 있는데요, 한번 알아봅시다~!

 

저는 자주쓰이는 것 위주로만 정리를 해놓을거라, 전체적으로 Selector를 보시려면 w3schools.com 에 잘 정리되어있는 CSS Selector 표를 링크 걸어둘게요~
https://www.w3schools.com/cssref/css_selectors.php

 

Welcome to CODING HELL

CSS  Syntax 

CSS 기본 선언 방법

 

 

A. 태그 선택자

- 태그선택자는 말 그대로 태그명을 직접적어서 선택하는 것입니다.

- 아래처럼 문서의 모든 <h1>태그의 글자색을 'red', 문서의 모든 <h2> 태그의 글자크기를 20px로 스타일링 합니다.

h1 { color : red }
h2 { font-size: 20px }

 

B. 클래스 선택자

- 태그에 선언된 class 속성값으로 선택하는 것입니다.

- 클래스명은 여러태그에 중복되어도 괜찮습니다.

- 해당태그가 2개의 클래스를 가지고 있고, 그것을 모두 적고싶으면 띄어쓰기 없이 연달아 적어주면 됩니다.

- 클래스는 숫자로 시작하면 안됩니다.

- 대,소문자를 구분합니다.

- '.'으로 시작하여 셀렉터로 사용합니다.

.title { color: red }
.title.box { font-size: 20px }

 

C. 아이디 선택자

- 태그에 선언된 id 속성값으로 선택하는 것입니다.

- 아이디는 한문서에 중복되면 안됩니다.

- css로 선언하기 위한 id명은 숫자로 시작하면 안됩니다.

- id는 css뿐만 아니라 javascript에서 접근하기 위해서도 사용됩니다.

- 대,소문자를 구분합니다.

- '#'으로 시작하여 셀렉터로 사용합니다.

#container { width:300px }

 

D. 하위요소 선택자

- 선택자와 선택자 사이에 띄어쓰기를 하면, DOM 트리구조상 하위요소중에서 탐색하라는 의미가 됩니다.

- 몇개를 적어도 상관없습니다.

// html 코드

<nav class="gnb">
    <ul>
        <li>
          <a href="#">HTML</a>
        </li>
        <li>
          <a href="#">CSS</a>
        </li>
    </ul>
    <a href="#">HELLO CSS</a>
</nav>

// css 코드
.gnb a { color:tomato } // .gnb의 하위요소중 모든 a 태그 선택
.gnb li a { font-size:12px } // .gnb의 하위요소중 모든 li 태그의 하위요소중 모든 a 태그 선택

 

결과 : 위의 모든 a 태그는 글자색이 tomato가 되고, li 태그 안의 a 태그만 글자크기가 12px이 됩니다.

 

 

---

CSS Selectors 

자주 사용하는 Selector List

Selector	사용 예	사용기호	Description
태그요소 선택자	h1 { color: tomato }	없음	모든 h1 태그를 선택
클래스 선택자	.title { color: tomato }	마침표('.')	모든 .title 클래스를 가진 태그를 선택
아이디 선택자	#container { color : tomato; }	샵('#')	#container 아이디를 가진 태그를 선택
하위요소 선택자	h1 strong { color:tomato; }	공백(' ')	h1의 하위요소중 모든 strong태그 선택
자식요소 선택자	.gnb > a { color:tomato; }	괄호('>')	.gnb의 자식요소중 모든 a 태그 선택
형제요소 선택자	.gnb + div { color:tomato;}	더하기('+')	.gnb 의 바로 뒤에있는 div 형제요소 선택

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.