[CSS] 선택자(tag, class, 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라는 게임이 있습니다.
테이블 위에 올려진 요소들 중에서 움직이는 접시나 음식을 알맞은 선택자로 지목하면 됩니다.
오른쪽에 필요한 선택자와 그에 대한 설명 및 예시가 나오니 힌트로 참고할 수 있습니다.
귀여운 게임이니 해보시는 것을 추천드립니다!
읽어주셔서 감사합니다:)