CSS 선택자 마스터하기: 개발자로 성장하는 첫 걸음

1. 주요 선택자

• 태그 선택자: 특정 HTML 태그를 선택한다.

  p {
    color: blue;
  }

  위 예시는 모든 <p> 태그의 텍스트 색상을 파란색으로 설정한다.

• 클래스 선택자: 특정 클래스가 적용된 요소를 선택한다. 클래스 이름 앞에 점(.)을 사용한다.

  .highlight {
    background-color: yellow;
  }

  위 예시는 class="highlight"인 모든 요소에 노란색 배경을 적용한다.

• ID 선택자: 특정 ID를 가진 요소를 선택합니다. ID 이름 앞에 샵(#)을 사용한다.

  #header {
    font-size: 24px;
  }

  위 예시는 id="header"인 요소의 글꼴 크기를 24px로 설정한다.

2. 속성 선택자

속성 선택자는 특정 속성을 가진 요소를 선택한다.

• 특정 속성을 가진 요소 선택

  [type="text"] {
    border: 1px solid black;
  }

  위 예시는 type 속성이 "text"인 모든 입력 요소에 검은색 테두리를 적용한다.

• 속성 값이 포함된 요소 선택

  [title~="flower"] {
    color: red;
  }

  위 예시는 title 속성 값에 "flower" 단어가 포함된 요소의 텍스트 색상을 빨간색으로 설정한다.

3. 가상 클래스 선택자

특정 상태의 요소를 선택합니다.

• :hover: 마우스 커서를 요소 위에 올릴 때 선택한다.

  a:hover {
    color: green;
  }

  위 예시는 링크에 마우스를 올릴 때 텍스트 색상을 녹색으로 변경한다.

• :focus: 요소가 포커스를 받을 때 선택한다.

  input:focus {
    border-color: blue;
  }

  위 예시는 입력 요소가 포커스를 받을 때 테두리 색상을 파란색으로 변경한다.

4. 가상 요소 선택자

요소의 특정 부분을 스타일링한다.

• ::before: 요소의 내용 앞에 가상 요소를 생성한다.

  p::before {
    content: "Note: ";
    font-weight: bold;
  }

  위 예시는 모든 <p> 태그 앞에 "Note: "를 추가하고 굵게 표시한다.

• ::after: 요소의 내용 뒤에 가상 요소를 생성한다.

  p::after {
    content: " End.";
  }

  위 예시는 모든 <p> 태그 뒤에 " End."를 추가한다.

5. 선택자 결합

여러 선택자를 결합하여 특정 조건을 만족하는 요소를 선택한다.

• 후손 선택자: 특정 요소의 모든 자손을 선택한다.

  div p {
    color: red;
  }

  위 예시는 모든 <div> 요소 내의 <p> 태그를 빨간색으로 설정한다.

• 자식 선택자: 특정 요소의 직계 자식을 선택한다.

  ul > li {
    list-style-type: none;
  }

  위 예시는 모든 <ul> 요소의 직계 자식인 <li> 요소의 기본 리스트 스타일을 제거한다.

6. 형제 선택자

형제 요소를 선택한다.

• 인접 형제 선택자: 특정 요소의 바로 다음 형제 요소를 선택한다.

  h1 + p {
    margin-top: 0;
  }

  위 예시는 <h1> 요소 바로 다음에 오는 <p> 요소의 상단 여백을 제거한다.

• 일반 형제 선택자: 특정 요소 뒤의 모든 형제 요소를 선택한다.

  h1 ~ p {
    color: blue;
  }

  위 예시는 <h1> 요소 뒤에 나오는 모든 <p> 요소의 텍스트 색상을 파란색으로 설정한다.

7. 범용 선택자

모든 요소를 선택한다.

* {
  box-sizing: border-box;
}

위 예시는 모든 요소에 box-sizing: border-box; 스타일을 적용한다.

8. 상속 제어하기

CSS는 기본적으로 부모 요소의 일부 스타일을 자식 요소에 상속합니다. 상속을 제어하는 방법은 다음과 같다.

• inherit: 부모 요소의 스타일을 상속받는다.

  p {
    color: inherit;
  }

• initial: 요소의 기본값을 사용한다.

  p {
    color: initial;
  }

• unset: 상속 가능한 속성에는 inherit, 그렇지 않은 속성에는 initial을 적용한다.

  p {
    color: unset;
  }

이러한 다양한 CSS 선택자를 사용하면 HTML 문서의 요소를 정교하게 선택하고 스타일을 적용할 수 있다.

인사이트

1. CSS 선택자의 힘

• CSS 선택자를 잘 이해하면 HTML 구조에서 특정 요소들을 아주 정교하게 스타일링할 수 있었다. 예를 들어, 특정 태그나 클래스를 가지고 있는 요소뿐만 아니라 속성 값이나 상태에 따라 스타일을 바꿀 수 있다는 점이 굉장히 유용했다. 로그인 폼에서 type="password"인 입력 필드만 스타일링 할 때 속성 선택자를 쓰면 깔끔하게 해결할 수 있었다.

2. 상속과 우선순위

• 상속과 우선순위는 꽤 중요한 개념이었다. 부모 요소의 스타일이 자식 요소로 상속되기도 하고, 어떤 스타일이 적용될지 결정하는 우선순위가 있었다. !important를 쓰지 않고도 선택자의 우선순위를 잘 이해하면 문제를 더 깔끔하게 해결할 수 있었다. 상속 덕분에 공통 스타일을 한 번에 적용할 수 있어서 코드도 훨씬 깔끔해졌다.

3. 실무 적용

• 실무에서 CSS 선택자를 잘 쓰는 게 정말 중요하다고 느꼈다. 디자인 시스템을 구축해서 공통 스타일과 컴포넌트를 정의하면 일관된 스타일을 유지하면서 개발 속도를 높일 수 있을 것 같았다. 팀원들과 CSS 코드를 공유하고 협업할 때도 선택자와 스타일의 명명 규칙을 잘 이해하고 준수하면 협업이 원활해질 것 같았다. 선택자의 우선순위와 상속을 이해하면 스타일링 문제를 빠르게 디버깅하고, 불필요한 스타일을 제거해서 성능을 최적화할 수 있을 것 같았다.

4. 추가 학습과 실무 준비

• CSS 선택자를 잘 이해하고 활용하는 것도 중요하지만, 계속 변화하는 웹 기술을 따라잡기 위해 추가 학습이 필요함을 깨달았다. Sass나 Less 같은 전처리기를 사용하면 CSS 코드를 더 효율적으로 작성할 수 있을 것 같았다. Bootstrap이나 Tailwind CSS 같은 프레임워크를 학습하면 빠르게 프로토타입을 만들고, 표준화된 스타일을 적용할 수 있을 것 같았다. JavaScript와 CSS를 결합해서 동적 스타일링을 구현하는 방법을 익히면 더 인터랙티브한 웹 페이지를 만들 수 있을 것 같았다.

결론

• CSS 선택자에 대한 깊은 이해와 실무 적용 능력은 웹 개발자로서 필수적인 자질임을 깨달았다. 효율적이고 유지보수 가능한 스타일을 작성하는 능력을 키우고, 추가 학습을 통해 최신 기술을 습득하는 것이 중요하다고 느꼈다. 이를 통해 실무에서의 문제 해결 능력을 향상시키고, 팀 내에서의 협업 능력을 강화할 수 있을 것 같다.