[CSS] 선택자(tag, class, id)

2024. 5. 19. 10:44· HTML & CSS
목차
  1. 🌱 정의
  2. 🌱 유형 선택자
  3. 🌱 class 선택자
  4. 🌱 id 선택자

🌱 정의

CSS 선택자를 활용하여 CSS 규칙을 적용할 요소를 정의합니다.

- MDN Web Docs

🌱 유형 선택자

가장 기본적인 선택자로 html 태그를 선택자로 활용하는 방법입니다. 

 

태그_이름 { } 형식으로 작성하면 됩니다.

 

예를 들어, 아래와 같은 코드가 있다면

body {
    font-family: 'Noto Sans KR';
    width: 480px;
}

----------------------------------

<body>
	<h1> ~ </h1>
    <p> ~ </p>
    <p> ~ </p>
</body>

body 태그 안에 존재하는 모든 요소에 해당 스타일이 적용됩니다.

 


🌱 class 선택자

동일한 스타일을 적용하고 싶은 요소에 같은 class명을 지정해줍니다.

 

.class_이름 { } 형식으로 작성하면 됩니다.

 

예를 들어, 아래와 같은 코드가 있다면

.title {
    background-color: #2c2c2c;
    color: #000000;
}

-------------------------------

<h1 class="title"> ~ </h1>	<!-- 홀수번째 단락의 제목을 class로 묶어줌 -->
<p> ~ </p>
<p> ~ </p>
    
<h1> ~ </h1>
<p> ~ </p>
<p> ~ </p>
    
<h1 class="title"> ~ </h1>	<!-- 홀수번째 단락의 제목을 class로 묶어줌 -->
<p> ~ </p>
<p> ~ </p>

title 클래스에 속하는 1, 3번 째 h1 요소에만 해당 스타일이 적용됩니다. 

 

같은 스타일을 적용하고 싶은 요소가 여러 개일 때 사용합니다.

 


🌱 id 선택자

스타일을 적용하고 싶은 요소에 고유한 id를 지정해줍니다.

id는 고유한 이름이므로 원칙적으로 중복이 불가합니다.

 

#id_이름 { } 형식으로 작성하면 됩니다.

 

예를 들어, 아래와 같은 코드가 있다면

#paragraph1 {
    background-color: #f8f8f8;
    color: #555555;
}

--------------------------------

<h1 class="title"> ~ </h1>
<p id="paragraph1"> ~ </p>	<!-- 해당 p태그에 고유한 id를 지정해줌 -->
<p> ~ </p>
<p> ~ </p>

paragraph1 id를 가진 요소에만 스타일이 적용됩니다.

 

특정 요소에만 스타일을 적용하고 싶을 때 사용합니다.

 


위의 선택자들은 가장 기본적인 선택자들로 이 밖에도 다양한 선택자가 존재합니다. 

더 자세한 선택자는 MDN Web Docs에서 확인할 수 있습니다.

 

추가로 선택자 작성을 좀 더 재미있게 연습하며 작성 요령을 배울 수 있는 CSS Diner라는 게임이 있습니다.

CSS Diner 게임 화면

테이블 위에 올려진 요소들 중에서 움직이는 접시나 음식을 알맞은 선택자로 지목하면 됩니다.

오른쪽에 필요한 선택자와 그에 대한 설명 및 예시가 나오니 힌트로 참고할 수 있습니다.

귀여운 게임이니 해보시는 것을 추천드립니다!

 


읽어주셔서 감사합니다:)

 

  1. 🌱 정의
  2. 🌱 유형 선택자
  3. 🌱 class 선택자
  4. 🌱 id 선택자
'HTML & CSS' 카테고리의 다른 글
  • [HTML] 시맨틱 태그(Semantic tag)
  • [CSS] 마진 상쇄(Margin Collapsing)
  • [CSS] 박스 모델(Box model)
  • [CSS] 크기 단위(px, %, em, rem)
emmaOH!
emmaOH!
emmaOH!
개발자구역
emmaOH!
전체
오늘
어제
  • 분류 전체보기 (70)
    • Frontend (10)
    • React (7)
    • Next.js (2)
    • Typescript (2)
    • Javascript (17)
    • HTML & CSS (13)
    • Git (4)
    • 트러블슈팅 (12)
    • etc. (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

태그

  • React
  • Typescript
  • javascript
  • 스프린트프론트엔드8기
  • 자바스크립트
  • 타입스크립트
  • 취업까지달린다
  • git
  • html
  • 티스토리챌린지
  • 라이브러리
  • 코드잇스프린트
  • CSS
  • Frontend
  • 깃
  • 프론트엔드
  • 리액트
  • 주석
  • 오블완
  • Next.js
hELLO · Designed By 정상우.v4.3.0
emmaOH!
[CSS] 선택자(tag, class, id)
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.