자습서/CSS

CSS 선택자 총정리 - 웹페이지의 모든 부분을 선택하여 디자인!

2023. 5. 27. 12:53
목차
  1. [2. 기본 요소 선택자]
  2. [3. 클래스 선택자]
  3. [4. 아이디 선택자]
  4. [5. 속성 선택자]
  5. [6. 의사 클래스 선택자]
  6. [7. 의사 요소 선택자]
  7. [8. 결합자를 활용한 선택자 조합]
  8. 위 내용을 모두 정리하여

CSS는 웹 페이지의 디자인과 스타일을 정의하는 스타일 시트 언어입니다. 선택자는 CSS에서 특정한 HTML 요소를 선택하여 스타일을 적용하는 방법인데요. 예를들어<1h> 태그의 텍스트 색상을 빨간색으로 바꾸고 싶을 때 요소 선택자를 사용할 수 있습니다.

아직 CSS 기초 개념이나 문법 작성 방법에 대해 모르신다면 아래 게시글을 훑어봐주세요.

 

CSS 기초 - CSS란 무엇이고 왜 사용하나요?

제가 코드 작성을 위한 강사 역할을 맡도록 하겠습니다. 아래는 CSS의 기본 개념, 사용 이유, 그리고 주의해야 할 점에 대한 설명입니다. CSS란? CSS는 Cascading Style Sheets의 약자로, HTML이나 XML과 같은

meta-board.net

 

CSS 문법 및 규칙

CSS 스타일 규칙은 선택자와 중괄호로 둘러싸인 속성-값 쌍으로 구성됩니다. 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하고, 중괄호 내에서는 해당 요소에 적용할 스타일 속성과 값을

meta-board.net

[2. 기본 요소 선택자]

요소 선택자는 특정 HTML 요소를 선택하는 가장 간단한 방법입니다. 예를 들어, h1이라고 쓰면 <h1> 태그를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

h1 {
    color: red;
  }
  

위의 코드는 <h1> 태그를 선택하여 텍스트의 색상을 빨간색으로 변경하는 예제입니다.

[3. 클래스 선택자]

클래스 선택자는 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용됩니다. 클래스 선택자는 요소의 class 속성과 함께 사용됩니다. 예를 들어, <p >라고 쓰면 highlight라는 클래스 선택자를 사용한 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

.highlight {
    background-color: yellow;
  }
  

위의 코드는 highlight라는 클래스 선택자를 가진 요소를 선택하여 배경색을 노란색으로 변경하는 예제입니다. HTML 요소는 다음과 같이 클래스를 추가할 수 있습니다: <p >

[4. 아이디 선택자]

아이디 선택자는 특정 요소를 유일하게 식별하고자 할 때 사용됩니다. 아이디 선택자는 요소의 id 속성과 함께 사용됩니다. 예를 들어, <div >라고 쓰면 header라는 아이디 선택자를 사용한 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

#header {
    font-size: 24px;
  }
  

위의 코드는 header라는 아이디 선택자를 가진 요소를 선택하여 글꼴 크기를 24픽셀로 변경하는 예제입니다. HTML 요소는 다음과 같이 아이디를 추가할 수 있습니다: <div >

[5. 속성 선택자]

속성 선택자는 특정 속성을 가진 요소를 선택하는 방법입니다. 예를 들어, [type="button"]이라고 쓰면 type 속성이 "button"인 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

[type="button"] {
    border: 1px solid blue;
  }
  

위의 코드는 type 속성이 "button"인 요소를 선택하여 테두리를 파란색으로 변경하는 예제입니다. 이 예제는 <input type="button">과 같은 요소를 선택합니다.

[6. 의사 클래스 선택자]

의사 클래스 선택자는 특정 상태나 동작에 따라 요소를 선택하는 방법입니다. 예를 들어, :hover라고 쓰면 마우스를 올렸을 때의 상태에서 요소를 선택할 수 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다.

a:hover {
    color: purple;
  }
  

위의 코드는 링크(<a>)를 마우스로 가리켰을 때의 상태에서 글자 색상을 보라색으로 변경하는 예제입니다.

[7. 의사 요소 선택자]

의사 요소 선택자는 요소의 특정 부분을 선택하는 방법입니다. 예를 들어, ::first-line이라고 쓰면 요소의 첫 줄을 선택할 수 있습니다. 이렇게 선택된 부분에 원하는 스타일을 적용

p::first-line {
    font-weight: bold;
  }
  

위의 코드는 <p> 요소의 첫 줄을 선택하여 글꼴을 굵게 변경하는 예제입니다.

[8. 결합자를 활용한 선택자 조합]

결합자를 사용하여 여러 선택자를 조합하여 특정 요소를 선택할 수도 있습니다. 자식 선택자(>), 후손 선택자( ), 형제 선택자(+나 ~) 등이 있습니다. 이렇게 선택된 요소에 원하는 스타일을 적용할 수 있습니다

div.container > p {
    background-color: lightgray;
  }
  

위의 코드는 container라는 클래스를 가진 <div> 요소의 직계 자식인 <p> 요소를 선택하여 배경색을 밝은 회색으로 변경하는 예제입니다.

 

위 내용을 모두 정리하여

  • 요소 선택자는 특정한 HTML 요소를 선택하여 스타일을 적용하는 방법입니다.
  • 클래스 선택자는 여러 요소에 동일한 스타일을 적용하고 싶을 때 사용합니다.
  • 아이디 선택자는 특정 요소를 유일하게 식별하고자 할 때 사용합니다.
  • 속성 선택자는 특정 속성을 가진 요소를 선택합니다.
  • 의사 클래스 선택자는 특정 상태나 동작에 따라 요소를 선택합니다.
  • 의사 요소 선택자는 요소의 특정 부분을 선택합니다.
  • 결합자를 활용하여 여러 선택자를 조합하여 특정 요소를 선택할 수 있습니다.

이렇게 다양한 선택자를 활용하여 웹 페이지를 더욱 다채롭게 스타일링 할 수 있습니다. 

  1. [2. 기본 요소 선택자]
  2. [3. 클래스 선택자]
  3. [4. 아이디 선택자]
  4. [5. 속성 선택자]
  5. [6. 의사 클래스 선택자]
  6. [7. 의사 요소 선택자]
  7. [8. 결합자를 활용한 선택자 조합]
  8. 위 내용을 모두 정리하여
'자습서/CSS' 카테고리의 다른 글
  • CSS 배경과 그래디언트 속성 마스터
  • CSS 글꼴과 텍스트 속성 마스터하기
  • CSS 스타일시트를 HTML에 적용하는 방법
  • CSS 문법 및 규칙
메타보드
메타보드
메타보드는 다양한 학습을 위한 자습서 및 예제를 제공합니다. 궁금한 점이나 요청사항은 댓글 게시판 및 방명록을 통해 언제든지 공유해주세요.

블로그 메뉴

  • 홈
  • 방명록
  • 분류 전체보기
    • 자습서
      • HTML
      • CSS
      • JavaScript
    • 웹 애플리케이션

태그

인기 글

메타보드
CSS 선택자 총정리 - 웹페이지의 모든 부분을 선택하여 디자인!
상단으로

티스토리툴바

개인정보

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

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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