[CSS] | 선택자 (1)

강지현·2024년 1월 14일

목록 보기

2/15

1. CSS 선택자

선택자(Selector)은 HTML 요소를 선택하는 방법입니다.

✍ 코드

<head>
  <title>Selector Basic</title>
  <style>
  /* h1 : 선택자 */
  h1 {
    color: blue;
  }
  </style>
</head>
<body>
  <h1>CSS</h1>
</body>

👉 결과

2. 기본 선택자

기본 선택자에는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자, 속성 선택자가 있습니다.

전체 선택자 (Universal selector)

모든 문법을 선택합니다.

용도 : 브라우저 기본 스타일을 초기화하려고 할 때 자주 사용합니다.
문법 : *

✍ 코드

<head>
  <title>Universal selector</title>
  <style>
  /* 모든 요소를 선택함. */
  * {
    margin: 0;
	padding: 0;
  }
  </style>
</head>
<body>
  <h2>CSS</h2>
  <p>이것은 기본 선택자입니다.</p>
  <p>기본 선택자 중 전체 선택자 입니다.</p>
</body>

👉 결과

타입 선택자 (Type selector)

특정 태그 이름을 가진 모든 요소를 선택합니다.

문법 : tagname

✍ 코드

<head>
  <title>Type selector</title>
  <style>
  /* 태그명이 h2인 요소를 모두 선택함. */
  h2 {
    color: green;
  }
  </style>
</head>
<body>
  <h2>기본 선택자</h2>
  <p>이것은 기본 선택자입니다.</p>
  <p>기본 선택자 중 타입 선택자 입니다.</p>
</body>

👉 결과

클래스 선택자 (Class selector)

주어진 class명을 가진 모든 요소를 선택합니다.

중복이 가능합니다.

문법 : .classname

✍ 코드

<head>
  <title>Class selector</title>
  <style>
  /* class에 red--text를 갖고 있는 모든 요소를 선택함. */
  .red--text {
    color: red;
  }
  /* class에 blue--text를 갖고 있는 모든 요소를 선택함. */
  .blue--text {
    color: blue;
  }
  </style>
</head>
<body>
  <h2>CSS</h2>
  <p>이것은 <span class="red--text">기본</span> <span class="red--text">선택자</span>입니다.</p>
  <p><span class="red--text">기본</span> 선택자 중 <span class="blue--text">클래스</span> <span class="red--text">선택자</span> 입니다.</p>
</body>

👉 결과

ID 선택자 (ID selector)

id 속성에 맞는 요소를 선택합니다. id 선택자는 웹 문서에서 고유한 하나의 태그에만 사용해야 합니다.

문법 : #idname

✍ 코드

<head>
  <title>ID selector</title>
  <style>
  /* id속성이 title인 요소를 선택함. */
  #title {
    font-size: 40px;
    color: darkslategray;
    background-color: yellow;
  }
  </style>
</head>
<body>
  <h2 id="title">CSS</h2>
  <p>이것은 기본 선택자입니다.</p>
  <p>기본 선택자 중 ID 선택자 입니다.</p>
</body>

👉 결과

속성 선택자 (Attribute selector)

주어진 속성을 가진 모든 요소를 검색합니다.

HTML에 있는 속성을 활용해서 특정 HTML 요소를 선택합니다.

선택자를 제거하고 대괄호의 속성명만 사용해도 적용 가능합니다.

문법
[attr] , [attr=value] , [attr*=value] ,
[attr^=value] , [attr$=value] , [attr~=value]

✍ 코드

<head>
  <title>Attribute selector</title>
  <style>
    /* 속성이 존재하는 요소 */
    h2[class] {
      font-size:30px;
    }
    [target] {
      color: green;
    }

    /* 속성 값과 일치하는 요소 */
    h2[class="naver-title"] {
      color: green;
    }

    /* 속성 값을 포함하는 요소 */
    a[href*="www"] {
      text-decoration: none;
    }

    /* 속성 값으로 시작하는 요소 */
    h2[class^="google"] {
      color: blue;
    }

    /* 속성 값으로 끝나는 요소 */
    a[href$="facebook.com"] {
      color: red;
    }

    /* 속성에 단어가 포함하는 요소 (연결되는 것이 아님)\*/
    h2[class~="title"] {
      color: blue;
      font-weight: 300;
    }
  </style>
</head>
<body>
  <h2 class="naver-title">네이버</h2>
  <a href="http://www.naver.com">네이버</a>
  <h2 class="google-title">구글</h2>
  <a href="http://www.google.com" target="_blank">구글</a>
  <h2 class="facebook-title">페이스북</h2>
  <a href="http://www.facebook.com">페이스북</a>
  <h2>CSS</h2>
  <h2 class="text title gymcoding">감사합니다.</h2>
</body>

👉 결과

3. 그룹 선택자

선택자를 쉼표(,)로 구분하여 여러 선택자를 나열할 수 있습니다.

같은 스타일을 여러 선택자에 한꺼번에 정의할 수 있습니다.

문법 : 선택자1, 선택자2 { 스타일 규칙 }

✍ 코드

<head>
  <title>Group selector</title>
  <style>
  /* 그룹 선택자 */
  h1, h2 {
    text-align: center;
  }
  </style>
</head>
<body>
  <h1>웹 사이트 제작</h1>
  <h2>CSS</h2>
  <p>이것은 그룹 선택자입니다.</p>
</body>