가치투자자

[CSS] 선택자 본문

Programming/HTML, CSS

[CSS] 선택자

미주민 2023. 4. 19. 22:49
728x90
반응형

 선택자 (Selector) 

우리가 원하는 UI를 만들기 위해 HTML에 스타일(디자인, 레이아웃 등)을 적용해줘야 한다. 이때 HTML 문서에서 우리가 원하는 요소에만 CSS를 적용하기 위해  선택자(selector) 가 필요하다.

 

 

먼저, 선택자에 CSS를 적용하는 방법부터 살펴보겠다.

예를 들어, h1 태그에 12px 크기의 빨간색 글씨로 CSS를 적용하고 싶을 때, 아래처럼 선택자 뒤에 {}를 써주고, 그 안에 우리가 원하는 스타일을 객체 형태(프로퍼티와 값)로 적어주면 된다.

 

 

728x90

 

 1. 기본 선택자 

 1-1. 전체 선택자 (Universal Selector) 

HTML 문서 내의 모든 요소를 선택하는 선택자다.  별표(*) 로 모든 HTML를 선택할 수 있다.

아래 예시처럼 head 태그를 포함해 모든 요소에 CSS가 적용된다. 전체 선택자는 마진이나 패딩, 폰트 등 초기화하거나 기본 세팅을 위해 자주 사용된다.

예시>

* {
  color: skyblue;
}

CSS 선택자

  1. 기본 선택자
  2. 가상 클래스 선택자
  3. 가상 요소 선택자

 

실제 적용 사례>

* {
  margin: 0;
  padding: 0;
}

 

 

 1-2. 태그 선택자 (Type Selector) 

태그 선택자는 특정 태그를 모두 선택하는 선택자다.  특정 태그명 를 적고 그 뒤에 스타일을 적어주면 된다.

아래 예시에서 ol 태그만 CSS를 적용하고 싶을때 가능하다.

예시>

<body>
  <h3>CSS 선택자</h3>
  <ol>
    <li>기본 선택자</li>
    <li>가상 클래스 선택자</li>
    <li>가상 요소 선택자</li>
  </ol>
</body>
ol { color: skyblue; }

CSS 선택자

  1. 기본 선택자
  2. 가상 클래스 선택자
  3. 가상 요소 선택자

 

 

 1-3. 클래스 선택자 (Class Selector) 

클래스 선택자는 특정 클래스를 가진 모든 요소를 선택하는 선택자다. CSS에서  콤마(.) 클래스명  형식으로 스타일을 적어주면 된다.

또한, 공백을 기준으로 여러 클래스명을 가질 수 있다. 아래처럼 특정 클래스에 대해 CSS를 정의해두면, 다른 태그에  재사용 할 수 있다.

아래 예시에서도 text-center에 대한 CSS를 정의해두었기에 여러번 반복해서 재사용할 수 있는 것이다.

예시>

<body>
  <h3 class="text-center">CSS 선택자</h3>
  <ol>
    <li class="text-center">클래스 선택자</li>
    <li class="text-center text-green">ID 선택자</li>
  </ol>
</body>
.text-center { text-align: center; }
.text-green { color: green; }

CSS 선택자

  1. 클래스 선택자
  2. ID 선택자

 

 

 1-4. ID 선택자 (ID Selector) 

ID 선택자는 특정 ID를 가진 요소를 선택하는 선택자다. CSS에서  샵(#) ID명  형식으로 스타일을 적어주면 된다.

ID는 클래스와 달리 중복될 수 없는 유일한 값이기에 특정한 요소에만 어떤 스타일을 적용하고 싶을때 주로 사용된다.

 

아래 예시에서 공통적인 스타일은 클래스로 주고, textBold 아이디를 가진 요소에만 특정 스타일을 부여했다.

예시>

<body>
  <h3 class="text-center">CSS 선택자</h3>
  <div>
    <p class="text-center">기본 선택자</p>
    <p class="text-center">가상 클래스 선택자</p>
    <p class="text-center" id="textBold">가상 요소 선택자</p>
  </div>
</body>
.text-center { text-align: center; }
#textBold { font-weight: bold; }

CSS 선택자

기본 선택자

가상 클래스 선택자

가상 요소 선택자

 

 

 1-5. 어트리뷰트 선택자 (Attribute Selector) 

어트리뷰트 선택자는 특정 attribute(속성)을 가진 모든 요소를 선택하는 선택자다.  선택자[어트리뷰트]  형식으로 요소를 선택할 수 있다.

 

아래 유형1을 살펴보면, div태그 내의 title라는 attribute에 스타일을 부여했다.

유형1>

<body>
  <h4 id="textBold">가치엔진 개발자 블로그</h4>
  <div title="subtitle first">1. JavaScript</div>
  <div title="subtitle-first">2. TypeSript</div>
  <div>3. React</div>
</body>
div[title] { color: blueviolet; }

가치엔진 개발자 블로그

1. JavaScript
2. TypeSript
3. React

 

 

유형2>

 선택자[어트리뷰트="값"]  형식으로 특정 attribute 중 특정 value를 가지는 요소를 선택할 수 있다.

아래 예시에서 subtitle 값을 가진 요소를 선택해 스타일을 부여했다.

<body>
  <h4 id="textBold">가치엔진 개발자 블로그</h4>
  <div title="subtitle-first">1. JavaScript</div>
  <div title="subtitle-second">2. TypeSript</div>
  <div title="subtitle-third">3. React</div>
</body>
div[title="subtitle-first"] { color: brown; }

가치엔진 개발자 블로그

1. JavaScript
2. TypeSript
3. React

 

 

유형3>

 선택자[어트리뷰트~="값"]  형식으로 특정 attribute 중 특정 value를 가지는 요소만 선택할 수 있으며, 이 value에 다른 단어가 붙어있으면 적용이 되지 않는다.

<body>
  <h4 id="textBold">가치엔진 개발자 블로그</h4>
  <div title="subtitle first">1. JavaScript</div>
  <div title="subtitle-first">2. TypeSript</div>
  <div title="subtitle-second">3. React</div>
</body>
div[title~="subtitle"] { color: darkblue; }

가치엔진 개발자 블로그

1. JavaScript
2. TypeSript
3. React

 

 

유형4>

 선택자[어트리뷰트|="값"]  형식으로 특정 attribute 중 특정 value를 가지는 요소만 선택할 수 있으며, 이 value로 시작하거나 "-" 문자가 곧바로 뒤에 붙어 있어도 선택할 수 있다.

아래의 예시를 보면, 값이 subtitle로 시작하는 모든 요소에 스타일이 적용되고 있다.

<body>
  <h4 id="textBold">가치엔진 개발자 블로그</h4>
  <div title="subtitle first">1. JavaScript</div>
  <div title="subtitle-first">2. TypeSript</div>
  <div title="subtitle-second">3. React</div>
</body>
div[title|="subtitle"] { color: chocolate; }

가치엔진 개발자 블로그

1. JavaScript
2. TypeSript
3. React

 

 

유형5>

 선택자[어트리뷰트^="값"]  형식으로 특정 attribute 중 특정 value로 시작하는 요소를 선택할 수 있다.

아래의 예시를 보면, a태그의 href의 값 중 https://로 시작하는 요소에만 스타일을 적용하고 있다.

 

<body>
  <h4>블로그 리스트</h4>
  <a href="https://www.test.com">https://www.test.com</a><br>
  <a href="http://www.test.com">http://www.test.com</a>
</body>
a[href^="https://"] { color: coral; }

블로그 리스트

https://www.test.com
http://www.test.com

 

 

유형6>

 선택자[어트리뷰트$="값"]  형식으로 특정 attribute 중 특정 value로 끝나는 요소를 선택할 수 있다.

아래의 예시를 보면, a태그의 href의 값 중 .html로 끝나는 요소에만 스타일을 적용하고 있다.

<body>
  <h4>파일 리스트</h4>
  <a href="test.html">html 파일</a><br>
  <a href="test.js">js 파일</a>
</body>
a[href$=".html"] { color: crimson; }

파일 리스트

html 파일
js 파일

 

 

유형7>

 선택자[어트리뷰트*="값"]  형식으로 특정 attribute 중 특정 value을 포함하는 요소를 선택할 수 있다.

아래의 예시를 보면, div태그의 class 중에서 값으로 subtitle을 가지고 있는 요소에만 스타일을 적용하고 있다.

<body>
  <h4>가치엔진 개발자 블로그</h4>
  <div class="title">1. Front-end</div>
  <div class="subtitle">1) JavaScript</div>
  <div class="subtitle">2) CSS</div></br>
  <div class="title">2. CS</div>
  <div class="subtitle">1) 자료구조</div>
  <div class="subtitle">2) 알고리즘</div>
</body>
div[class*="subtitle"] { color: darkorchid; }

가치엔진 개발자 블로그

1. Front-end
1) JavaScript
2) CSS

2. CS
1) 자료구조
2) 알고리즘

 

반응형

 

 2. 복합 선택자 (Combinator) 

복합 선택자에 들어가기에 앞서, 부모, 형제, 자식, 자손이 어떤 개념인지 알고 갈 필요가 있다.

아래 사진을 보면, div 태그를 기준으로 한 단계 상위에 있는 section 태그가 부모 요소이며, 한 단계 하위에 있는 p 태그가 자식 요소라 한다. 그리고 n단계 아래에 있는 요소들이 자손 요소다. 자식 요소도 자손 요소에 포함된다. 형제 요소는 div 태그와 같은 선상에 있는 h1 태그, img 태그들이 이에 해당한다.

 

 2-1. 자식 선택자 (Child Combinator) 

자식 선택자는 선택자 A의 자식 요소 중 모든 선택자 B를 선택한다.  선택자A > 선택자B  형식으로 스타일을 부여할 수 있다.

아래 예시를 보면, div 태그 내에서 한 단계 아래 있는 모든 p 태그에 스타일이 적용된다. 다만, div 태그의 자손 요소인 div > span > p 태그는 자식 요소가 아니니 적용되지 않는다.

<body>
  <h3>가치엔진 개발자 블로그</h3>
  <div>
    <p>1. JavaScript</p>
    <p>2. TypeScript</p>
    <span><p>3. React</p></span>
  </div>
  <p>4. Redux</p>
</body>
div > p { color: red; }

가치엔진 개발자 블로그

1. JavaScript

2. TypeScript

3. React

4. Redux

 

 

 2-2. 자손 선택자 (후손 선택자, Descendant Combinator) 

자손(후손) 선택자는 선택자 A의 자손 요소 중 모든 선택자 B를 선택한다.  선택자A 선택자B  형식으로 중간에  공백 을 기준으로 선택자 B에 스타일을 부여할 수 있다. 아래 예시를 보면, div 태그 내에서 있는 모든 p 태그에 스타일이 적용된다.

<body>
  <h3>가치엔진 개발자 블로그</h3>
  <div>
    <p>1. JavaScript</p>
    <p>2. TypeScript</p>
    <span><p>3. React</p></span>
  </div>
  <p>4. Redux</p>
</body>
div p { color: red; }

가치엔진 개발자 블로그

1. JavaScript

2. TypeScript

3. React

4. Redux

 

 

 2-3. 형제 선택자 (동위, Sibling Combinator) 

유형1> 일반 형제 선택자 (General Sibling Combinator)

일반 형제 선택자는 선택자 A 뒤에 있는 형제 요소 중 모든 선택자 B를 선택한다.  선택자A ~ 선택자B  형식으로 스타일을 부여할 수 있다.

아래 예시를 보면, p 태그 뒤에 있는 형제 요소 중 모든 ol 태그에 스타일이 적용된다.

 

<body>
  <h3 id="text-bold">가치엔진 개발자 블로그</h3>
  <div>Tech Stack</div>
  <ol>
    <li>1. JavaScript</li>
    <li>2. TypeScript</li>
    <li>3. React</li>
    <li>4. Redux</li>
  </ol>
  <p>Tool</p>
  <ol>
    <li>1. Figma</li>
    <li>2. Git</li>
  </ol>
</body>
p ~ ol { color: blue; }

가치엔진 개발자 블로그

Tech Stack
  1. 1. JavaScript
  2. 2. TypeScript
  3. 3. React
  4. 4. Redux

Tool

  1. 1. Figma
  2. 2. Git

 

 

유형2> 인접 형제 선택자 (Adjacent Sibling Combinator)

인접 형제 선택자는 선택자 A 바로 뒤에 있는 형제 요소 선택자 B를 선택한다.  선택자A + 선택자B  형식으로 스타일을 부여할 수 있다.

아래 예시를 보면, div 태그 바로 뒤에 있는 형제 요소 ol 태그에만 스타일이 적용된다.

 

<body>
  <h3 id="text-bold">가치엔진 개발자 블로그</h3>
  <div>Tech Stack</div>
  <ol>
    <li>1. JavaScript</li>
    <li>2. TypeScript</li>
    <li>3. React</li>
    <li>4. Redux</li>
  </ol>
  <p>Tool</p>
  <ol>
    <li>1. Figma</li>
    <li>2. Git</li>
  </ol>
</body>
div ~ ol { color: red; }

가치엔진 개발자 블로그

Tech Stack
  1. 1. JavaScript
  2. 2. TypeScript
  3. 3. React
  4. 4. Redux

Tool

  1. 1. Figma
  2. 2. Git

 

 

References

 

 

728x90
반응형

'Programming > HTML, CSS' 카테고리의 다른 글

[HTML] 시멘틱 태그(semantic tag)란?  (2) 2023.06.17
[CSS] position  (0) 2023.06.04
[CSS] display  (0) 2023.06.03
[CSS] 선택자 : 가상 클래스 & 가상 요소  (0) 2023.04.21
[CSS] Flexbox 레이아웃  (0) 2023.04.17
'Programming/HTML, CSS' Related Articles more