CSS 선택자 심화 학습

CSS 선택자 심화 학습

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용할 수 있게 합니다. 기본적인 선택자 외에도 더 정교하고 구체적인 선택자를 사용할 수 있습니다. 이번 글에서는 CSS 선택자 심화에 대해 알아보겠습니다.

선택자 붙여쓰기

HTML 요소에 여러 클래스를 적용하고 싶을 때, 클래스 이름을 띄어쓰기로 구분하여 작성할 수 있습니다.

<p class="a b">텍스트</p>

이 경우, a와 b 클래스가 모두 적용됩니다. CSS에서 선택자를 붙여써서 두 클래스를 모두 가진 요소에 스타일을 적용할 수 있습니다.

.a.b {
  font-weight: bold;
}

위 예제에서는 a와 b 클래스를 모두 가진 요소에 font-weight: bold; 스타일이 적용됩니다.

자식 및 자손 선택자

• 자식 결합자 (Child Combinator): 특정 요소의 직계 자식을 선택합니다. > 기호를 사용합니다.

  .parent > .child {
    color: red;
  }

  이 예제에서는 parent 클래스의 직계 자식 중 child 클래스를 가진 요소에 color: red; 스타일이 적용됩니다.

• 자손 결합자 (Descendant Combinator): 특정 요소의 모든 자손을 선택합니다. 스페이스( )를 사용합니다.

  .ancestor .descendant {
    font-style: italic;
  }

  이 예제에서는 ancestor 클래스의 모든 자손 중 descendant 클래스를 가진 요소에 font-style: italic; 스타일이 적용됩니다.

자식 결합자는 직계 자식만 선택하는 반면, 자손 결합자는 직계 여부와 상관없이 모든 자손 요소를 선택합니다. 태그는 자주 위치가 바뀌기 때문에, 자손 결합자를 더 많이 사용하는 경우가 많습니다.

선택자 관련 팁

• 선택자는 최대한 단순하게 사용하는 것이 좋습니다. 복잡한 선택자는 유지보수와 성능 면에서 좋지 않습니다.
• 명확한 클래스 이름을 사용하세요. 의미 있는 클래스 이름은 코드의 가독성을 높입니다.
• 불필요한 중복을 피하세요. 여러 선택자에 동일한 스타일을 적용해야 할 때는 선택자 목록을 사용하여 중복을 줄이세요.

추천하는 선택자 조합

1. 모든 곳에서 border-box를 사용하고 싶을 때:

   * {
     box-sizing: border-box;
   }

   이 설정은 모든 요소에 box-sizing: border-box;를 적용하여, 요소의 크기를 더 쉽게 관리할 수 있게 합니다.

2. 같은 클래스지만 변화를 주고 싶을 때:
   예를 들어, 품절된 상품의 버튼 스타일을 다르게 하고 싶다면, 클래스 조합을 사용합니다.

   .button.sold-out {
     background-color: gray;
     cursor: not-allowed;
   }

3. 클래스를 넣어 줄 태그가 너무 많을 때:
   공통 클래스를 사용하여 여러 요소에 동일한 스타일을 적용합니다.

   .common-style {
     margin: 10px;
     padding: 5px;
   }

4. 가로 마진을 일정하게 하고 싶을 때:
   세로 마진은 마진 상쇄로 인해 일괄 적용해도 일정하게 되지만, 가로 마진은 중간에 중복 적용될 수 있습니다.

   .element {
     margin-right: 10px;
   }
   .element:first-child {
     margin-left: 10px;
   }

   이 방법은 첫 번째 요소에만 왼쪽 마진을 주고 나머지 요소에 오른쪽 마진을 줌으로써 가로 마진을 일정하게 유지합니다.

결론

CSS 선택자를 심화 학습하여 더 정교하고 구체적인 스타일링을 할 수 있는 방법을 배웠습니다. 선택자 붙여쓰기, 자식 및 자손 선택자, 그리고 선택자 사용 팁을 통해 CSS 선택자의 활용도를 높일 수 있습니다. 다양한 선택자를 잘 활용하면, 더욱 효율적이고 깔끔한 스타일링을 구현할 수 있습니다.