dev_or_alive

[CSS][선택자] 개요 및 기본 문법 본문

Web Programming/CSS

[CSS][선택자] 개요 및 기본 문법

개발로 먹고살자 2025. 5. 3. 23:31

이번 포스팅에서는 CSS를 작성하기 위해 필요한 선택자에 대해서 알아보겠습니다.

✅ 선택자란 무엇인가?

CSS 선택자는 HTML 문서 안에서 스타일을 적용할 “대상”을 찾아내는 규칙입니다.

“어떤 요소에 이 스타일을 씌울 것인가”를 지정하는 식별자 역할을 합니다.

선택자가 정확해야 의도한 요소에만 스타일을 붙일 수 있고, 유지보수가 용이합니다.

✅ 기본 선택자

🔥 전체 선택 : *

DOM트리 안의 모든 요소를 한꺼번에 선택하는 CSS 선택자입니다.

보통 “전체 스타일 초기화”, “공통 프로퍼티 부여”처럼 전역적인 스타일이 필요할 때 사용됩니다.

/* 모든 요소에 margin 100px이 적용된다. */
* {
  margin: 100px;
}

🔥 태그 선택자 : p, div, header, footer 등.

태그 선택자는 요소의 태그 이름만으로 대상을 지정하는 가장 기본적인 CSS 선택자입니다.

예를 들어서 p {...} 라고 쓰면 문서 안의 모든 <p> 요소에 스타일이 적용됩니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <h1>리스트입니다.</h1>
    <ul>
      <li class="item">리스트 아이템 1</li>
      <li class="item">리스트 아이템 2</li>
    </ul>
  </body>
</html>


/* 단일 태그 */
h1 {
  font-size: 2rem;
}
/* 복합 계층 : ul의 자손 태그중 li 태그에 적용*/
ul li {
  list-style: none;
}
  • 단일 태그 : p, button, svg 등
  • 복합 계층 : ul li, nav a 처럼 공백으로 연결하면 자손 관계를 표현합니다.
  • 태그 선택자는 우선순위가 낮기 때문에 “기본 스타일”이나 “리셋”에 적합합니다.
  • 동일 요소에 클래스/아이디 규칙이 있으면 클래스/아이디가 우선합니다.

🔥 클래스 선택자 : .

클래스 선택자는 **“HTML 요소의 class 속성 값을 기준”**으로 스타일을 적용합니다.

여러 요소에 동일 클래스를 부여할 수 있기 때문에 재사용성과 모듈화에 유리합니다.

<body>
  <button class="button">버튼</button>
  <!-- 이곳에 ".card.highlight" css가 적용된다. -->
  <div class="card highlight">하이라이트</div>
  <div class="card">
    <div class="highlight2">하이라이트2</div>
  </div>
  <div class="highlight">이곳은 하이라이트가 적용되지 않습니다.</div>
</body>

.button {
  background-color: #0077ff;
  color: #fff;
}
/* card와 highlight를 클래스로 갖고 있는 요소 */
.card.highlight {
  background-color: gold;
}
/* card 클래스 하위에서 .highlight2를 클래스로 갖고 있는 요소 */
.card .highlight2 {
  background-color: yellow;
}
  • . 뒤에 클래스 이름을 적습니다.
  • 공백 없이 두 클래스를 이어 쓰면 “동시에 두 클래스가 있는 요소”를 선택합니다.(.card.highlight)
  • 공백을 두면 계층 결합으로 자손 범위를 좁힐 수 있습니다.

🔥 아이디 선택자 : #

아이디 선택자는 문서내에서 유일해야 하는 “id” 속성을 기반으로 스타일을 적용합니다.

주로 단일 요소(헤더, 푸터, 모달 등..)에서 사용합니다.

<body>
  <header id="header"><h1>타이틀</h1></header>
</body>

#header {
  position: sticky;
  top: 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
#header h1 {
  margin: 0;
  padding: 20px;
  font-size: 24px;
  color: #333;
}
  • “#” 뒤에 아이디 값을 씁니다.
  • 중복된 아이디 사용은 금지합니다.
  • CSS에서 가장 강력한 일반 선택자이므로, 남용하면 이후 재정의가 어렵습니다.

✅ 마무리

CSS 문서를 작성할 때 가장 기본적인 선택자에 대한 내용을 학습했습니다.

실제 사용시에는 어떠한 선택자 타입을 사용할지,

적용범위는 어느정도인지에 대하여 미리 설계하신 후 작성하시는게 유지보수에 좋습니다.

반응형

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

[CSS][길이 단위] %, vw, vh  (0) 2025.05.19
[CSS][길이단위] px, em, rem  (0) 2025.05.08
[CSS][color] color, background-color  (0) 2025.05.04
[CSS] CSS 개요 및 기초 이해하기  (0) 2025.05.01
SVG(Scalable Vector Graphics)에 대해 알아보자  (2) 2024.04.07
'Web Programming/CSS' Related Articles more