CSS에서 Type Selector는 HTML 문서의 특정 요소를 선택하여 스타일을 적용하는 가장 기본적인 방법입니다. Type Selector는 요소의 태그 이름을 사용하여 모든 해당 요소를 선택합니다. 여러 요소를 동시에 선택하려면 쉼표(,)로 구분된 목록을 사용할 수 있습니다.

 

CSS Type 선택자 사용방법

CSS Type 선택자 사용방법

 

1. HTML 코드 예제

2.  코드 설명

3. Type 선택자 (Selector)의 특징

 

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

HTML 코드 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Type Selector 예제</title>
  <style>
    /* Type Selector: 모든 <h1> 요소 선택 */
    h1 {
      color: #3498db;
      font-size: 2.5em;
    }

    /* Type Selector: 모든 <p> 요소 선택 */
    p {
      color: #2ecc71;
      font-size: 1.2em;
    }

    /* 여러 Type Selector: <h2>와 <h3> 요소 선택 */
    h2, h3 {
      color: #e74c3c;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>이것은 제목입니다 (h1)</h1>
  <p>이것은 문단입니다 (p).</p>
  <h2>이것은 부제목입니다 (h2)</h2>
  <h3>이것은 소제목입니다 (h3)</h3>
  <p>이것은 또 다른 문단입니다 (p).</p>
</body>
</html>

 

코드 설명

1) Type 선택자(Selector) : h1

h1 {
  color: #3498db;
  font-size: 2.5em;
}
  • 모든 <h1> 요소를 선택합니다.
  • 텍스트 색상을 파란색(#3498db)으로, 폰트 크기를 2.5em으로 설정합니다.

 

2) Type 선택자(Selector) : p

p {
  color: #2ecc71;
  font-size: 1.2em;
}
  • 모든 <p> 요소를 선택합니다.
  • 텍스트 색상을 녹색(#2ecc71)으로, 폰트 크기를 1.2em으로 설정합니다.

 

3) 여러 Type 선택자(Selector) : h2, h3

h2, h3 {
  color: #e74c3c;
  font-family: Arial, sans-serif;
}
  • 모든 <h2>와 <h3> 요소를 선택합니다.
  • 텍스트 색상을 빨간색(#e74c3c)으로, 폰트를 Arial 또는 sans-serif로 설정합니다.

 

Type 선택자 (Selector)의 특징

  1. 단순성: 요소의 태그 이름만으로 모든 해당 요소를 선택할 수 있습니다.
  2. 범용성: 문서 내의 모든 해당 요소에 동일한 스타일을 적용합니다.
  3. 다중 선택: 쉼표(,)로 구분하여 여러 요소를 동시에 선택할 수 있습니다.

 

반응형
저작자표시 비영리 변경금지

'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글

CSS - 선택자(Selector) 결합하여 사용하는 방법  (0) 2025.03.18
CSS - Class 선택자 사용  (0) 2025.03.18
HTML5 - 테이블(Table) 목록 표현 방법  (0) 2025.03.18
JS - 바닐라js로 DOM 요소 복사하기  (0) 2025.03.17
JS - 바닐라js로 eq() 선택자 사용 방법  (0) 2025.03.17

+ Recent posts

티스토리툴바