icon안동민 개발노트

CSS 기본 문법과 선택자

 CSS(Cascading Style Sheets)는 웹 페이지의 레이아웃과 디자인을 정의하는 스타일 시트 언어입니다.

 이 절에서는 CSS의 기본 구조, 문법, 그리고 다양한 선택자에 대해 알아보겠습니다.

CSS 기본 구조와 문법

 CSS 규칙은 선택자(selector)와 선언 블록(declaration block)으로 구성됩니다.

선택자 {
    속성: 값;
    속성: 값;
}

 예시

h1 {
    color: blue;
    font-size: 20px;
}

 이 예시에서 h1은 선택자, color와 font-size는 속성, blue와 20px은 각 속성의 값입니다.

 주석 사용법

 CSS에서 주석은 /* */로 표시합니다.

/* 이것은 CSS 주석입니다 */
p {
    color: red; /* 이렇게 인라인 주석도 가능합니다 */
}

선택자 유형

  1. 요소 선택자 : HTML 태그를 직접 선택합니다.
p { color: black; }
  1. 클래스 선택자 : 특정 클래스를 가진 요소를 선택합니다.
.highlight { background-color: yellow; }
  1. ID 선택자 : 특정 ID를 가진 요소를 선택합니다.
#header { font-size: 24px; }
  1. 속성 선택자 : 특정 속성이나 속성 값을 가진 요소를 선택합니다.
input[type="text"] { border: 1px solid gray; }
  1. 의사 클래스(Pseudo-class) 선택자 : 요소의 특정 상태를 선택합니다.
a:hover { text-decoration: underline; }
  1. 의사 요소(Pseudo-element) 선택자 : 요소의 특정 부분을 선택합니다.
p::first-line { font-weight: bold; }

복합 선택자와 선택자 결합

  1. 자손 선택자
div p { margin-left: 20px; }
  1. 자식 선택자
ul > li { list-style-type: square; }
  1. 인접 형제 선택자
h1 + p { font-weight: bold; }
  1. 일반 형제 선택자
h1 ~ p { color: gray; }

우선순위 규칙 (Specificity)

 CSS에서 충돌하는 스타일이 있을 때, 브라우저는 우선순위 규칙에 따라 어떤 스타일을 적용할지 결정합니다.

 우선순위 순서 (높음 → 낮음)

  1. !important
  2. 인라인 스타일
  3. ID 선택자
  4. 클래스 선택자, 속성 선택자, 의사 클래스
  5. 요소 선택자, 의사 요소

 예시

#header { color: black; }              /* 우선순위: 100 */
.navigation { color: blue; }           /* 우선순위: 10 */
nav ul li a { color: green; }          /* 우선순위: 4 */

 이 경우, #header가 가장 높은 우선순위를 가집니다.

효율적인 선택자 작성 방법

  1. 과도하게 구체적인 선택자 피하기
/* 좋지 않은 예 */
body div#container ul.navigation li a { color: blue; }
 
/* 개선된 예 */
.navigation a { color: blue; }
  1. 클래스 사용하기 : ID보다는 클래스를 사용하여 재사용성을 높입니다.
  2. 상속 활용하기 : 불필요하게 같은 스타일을 반복하지 않습니다.
  3. 간결한 선택자 사용하기 : 꼭 필요한 경우가 아니라면 단순한 선택자를 사용합니다.

CSS를 HTML에 적용하는 방법

  1. 인라인 스타일 : HTML 요소의 style 속성을 사용합니다.
<p style="color: red; font-size: 16px;">이것은 빨간색 텍스트입니다.</p>
  • 장점 : 특정 요소에 직접 스타일을 적용할 수 있음
  • 단점 : 유지보수가 어렵고, 재사용성이 떨어짐
  1. 내부 스타일시트 : HTML 문서의 <head> 섹션 내에 <style> 태그를 사용합니다.
<head>
   <style>
      p { color: blue; font-size: 14px; }
   </style>
</head>
  • 장점 : 별도의 CSS 파일이 필요 없음
  • 단점 : 여러 페이지에서 재사용하기 어려움
  1. 외부 스타일시트 : 별도의 CSS 파일을 생성하고 HTML 문서에 링크합니다.
<head>
   <link rel="stylesheet" href="styles.css">
</head>
  • 장점 : 여러 HTML 페이지에서 재사용 가능, 유지보수가 용이
  • 단점 : 추가적인 HTTP 요청이 필요할 수 있음

 일반적으로 외부 스타일시트 방식이 가장 권장됩니다. 이 방식은 관심사의 분리(separation of concerns) 원칙을 따르며, 코드의 재사용성과 유지보수성을 높여줍니다.

결론

 CSS의 기본 문법과 선택자를 이해하는 것은 효과적인 웹 디자인의 기초입니다. 다양한 선택자를 적절히 활용하면 HTML 구조를 변경하지 않고도 웹 페이지의 스타일을 유연하게 제어할 수 있습니다. 우선순위 규칙을 잘 이해하고, 효율적인 선택자 작성 방법을 실천하면 더 유지보수하기 쉽고 성능이 좋은 CSS를 작성할 수 있습니다.

 CSS를 HTML에 적용하는 방법 중에서는 대부분의 경우 외부 스타일시트 방식이 권장됩니다. 하지만 상황에 따라 인라인 스타일이나 내부 스타일시트가 더 적합할 수 있으므로, 각 방식의 장단점을 이해하고 적절히 선택하는 것이 중요합니다.

 CSS는 지속적으로 발전하고 있으며, 새로운 선택자와 속성들이 계속 추가되고 있습니다. 따라서 웹 개발자는 CSS의 기본을 철저히 이해하는 것뿐만 아니라, 최신 트렌드와 기술을 계속 학습하는 자세가 필요합니다.

이전으로다음으로