CSS의 기본 선택자

1. 타입 선택자 (Type Selectors)

CSS 선택자는 HTML 요소를 선택하고 스타일을 적용할 수 있게 해준다. 기본 선택자를 이해하면 페이지에서 요소들을 효율적이고 정확하게 선택할 수 있어서 CSS를 웹 컨텐츠 스타일링의 강력한 도구로 만들어준다. 이번 기사에선 주요 선택자 종류인 타입 선택자, 클래스 선택자, ID 선택자, 그룹 선택자, 그리고 유니버설 선택자를 다뤄볼거야.

타입 선택자는 특정 태그의 모든 요소를 선택해. 예를 들어, 페이지의 모든 단락에 스타일을 적용하고 싶다면 태그 <p>를 사용하는 타입 선택자를 쓰면 돼.

p {
  color: blue;
  font-size: 16px;
}

<p>이 텍스트는 파란색이고 크기는 16픽셀이야.</p>
<p>같은 스타일이 적용된 두 번째 단락이야.</p>

타입 선택자는 특정 종류의 모든 요소에 스타일을 적용해야 할 때 유용해, 예를 들어 모든 헤딩이나 단락에. 이는 그룹 요소의 외형을 통제하고 사이트 유지 관리를 더 쉽게 만들어줘.

2. 클래스 선택자 (Class Selectors)

클래스 선택자는 특정 class 속성 값을 가진 요소를 선택할 수 있어. 클래스는 이름 앞에 점 (.)을 붙여서 표시돼. 하나의 클래스를 여러 요소에 적용할 수 있어서 같은 스타일을 여러 요소에 적용할 수 있어.

.highlight {
  background-color: yellow;
  color: blue;
  font-weight: bold;
}

<p class="highlight">이 텍스트는 노란 배경에 파란 글씨로 강조돼 있어.</p>
<p>클래스가 없는 일반 텍스트.</p>
<div class="highlight">이 블록도 highlight 클래스 스타일이 적용돼.</div>

클래스 선택자는 다양하고 편리해, 서로 다른 요소에 적용할 스타일을 만들 수 있게 해주니까. 클래스는 연결되지 않은 요소 그룹을 스타일링 해야 할 때 특히 유용해.

3. ID 선택자 (ID Selectors)

ID 선택자는 특정 id 속성 값을 가진 요소를 선택해. ID는 이름 앞에 #을 붙여서 표시돼. 클래스와는 달리, ID는 페이지에서 유일해야 해서 헤더나 내비게이션 바 같은 유일한 요소에 스타일을 적용하기에 적합해.

#main-header {
  font-size: 24px;
  color: green;
  text-align: center;
}

<h1 id="main-header">페이지 헤더</h1>
<p>이 단락은 ID 선택자에 영향을 받지 않아.</p>

ID 선택자는 페이지에서 단 하나의 요소에만 스타일을 적용하기 때문에, 특정 스타일로 유일한 요소를 강조할 때 사용돼.

4. 그룹 선택자 (Group Selectors)

그룹 선택자는 여러 요소에 동일한 스타일을 동시에 적용할 수 있게 해줘. 이건 쉼표를 사용해서 여러 선택자를 하나의 CSS 규칙으로 묶어서 할 수 있어. 그룹 선택자는 여러 종류의 요소에 공통 스타일을 지정해야 할 때, 코드 작성을 간결하게 만들어줘.

h1, h2, h3 {
  color: navy;
  font-family: Arial, sans-serif;
}

<h1>1단계 제목</h1>
<h2>2단계 제목</h2>
<h3>3단계 제목</h3>
<p>이 텍스트는 그룹 선택자의 영향을 받지 않아.</p>

그룹 선택자는 CSS 코드를 줄이고 스타일링을 단순화해, 다양한 요소에 동일한 속성을 적용해야 할 때 특히 효과적이야. 예를 들어, 여러 수준의 헤딩에 동일한 스타일을 적용할 때.

5. 유니버설 선택자 (Universal Selectors)

유니버설 선택자는 별표 (*)로 표시되고 페이지의 모든 요소를 선택해. 이건 모든 요소에 기본 스타일을 설정해야 할 때 유용해. 예를 들어, 공통적인 마진을 설정하거나 기본 폰트를 지정할 때 말야. 유니버설 선택자는 브라우저 기본 여백과 패딩을 제거해 더 정확하게 스타일을 관리할 수 있도록 해주는 reset 스타일링에 특히 유용해.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

<h1>헤더</h1>
<p>마진이나 패딩이 없는 텍스트 단락.</p>
<div>마진이나 패딩이 없는 컨테이너.</div>

여기에서 유니버설 선택자는 모든 요소의 여백과 패딩을 초기화해서 스타일 일관성을 유지하게 도와줘. 이 방법은 CSS 코드 시작 부분에 자주 사용돼, 통일된 스타일링을 구축하기 위해.