Post

CSS 핵심 개념

Posted
By Jewoo Sin 12 min read

웹 개발에서 프론트 계열과 백엔드 계열을 막론하고 필수적으로 다뤄져야하는 기본이 있다면 그건 HTML, CSS 그리고 자바스크립트입니다. 이 포스팅은 웹 표준에 대한 내용 중 깜빡하기 쉽고 놓쳐버릴 수 있지만 다시 살펴보면 좋을 요소들을 정리해 챙길 수 있도록 하는 목표를 갖고 있습니다.

CSS 스타일의 형식

CSS 스타일의 형식은 다음과 같습니다.

1

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

맨앞의 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호({ }) 사이에 들어가는 속성과 그 속성값들은 스타일 정보입니다. 위의 스타일 형식처럼 속성과 속성값이 하나의 쌍을 이루는 것을 스타일 규칙이라고 하며, 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있습니다.

스타일 시트란?

스타일 시트는, 웹 문서 안에서 사용되는 다양한 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것을 말합니다.

스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사이트 제작자가 만드는 사용자 스타일로 나눌 수 있습니다. 그리고 사용자 스타일은 인라인 스타일과 내부 스타일 시트, 외부 스타일 시트로 나뉩니다.

  • 스타일 시트
    • 브라우저 기본 스타일
    • 사용자 스타일
      • 인라인 스타일
      • 내부 스타일 시트
      • 외부 스타일 시트

CSS 기본 선택자란?

선택자는 웹 문서 어느 곳에나 적용될 수 있는 스타일 규칙을 어느 부분에 적용할지 알려주는 역할을 합니다. 이러한 선택자 중에 자주 사용되는 것들을 살펴보겠습니다.

전체 선택자

전체 선택자는 문서의 모든 요소에 스타일을 적용하려고 할 때 사용됩니다. 다음과 같이 *를 붙여 사용합니다.

1

* { 속성: 값; .... }

또한 전체 선택자는 웹 브라우저의 기본 스타일을 초기화하려고 할 때 자주 사용됩니다. 기본 스타일의 예로 마진과 패딩 이 있는데 이 두 가지는 문서 내용과 브라우저 테두리 사이에 두는 여백입니다.

타입 선택자

타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용합니다.

클래스 선택자

클래스 선택자는, 타입 선택자로 적용된 특정 태그 중 일부에 다른 스타일을 적용하고 싶을 때 사용됩니다.

클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 마침표(.)를 반드시 붙여야 합니다.

1

.클래스명 { 스타일 규칙 }

그리고 이렇게 클래스 선택자로 만든 스타일을 클래스 스타일이라 하고, 이미 만들어 둔 클래스 스타일을 적용할 땐 태그 안에 class="클래스명"처럼 class속성을 사용해서 지정합니다. 또한, 클래스 스타일은 요소 하나에 2개 이상 적용하는 것이 가능합니다. 2개 이상 적용할 때는 공백으로 구분해서 스타일 이름을 적으면 됩니다. 만약 accent와 bg라는 클래스 스타일을 만들어 두 가지 모두 적용하고 싶다면, ~ class="accent bg"> 처럼 적으면 됩니다.

id 선택자

id 선택자도 클래스 선택자처럼 특정 부분에 스타일을 지정할 때 사용합니다. 사용하려고 할땐, 클래스 이름 앞에 샵(#)기호를 붙여주세요.

1

#아이디명 { 스타일 규칙 }

id 스타일을 웹 요소에 적용할 때는 id="아이디명" 을 태그 안에 기입하면 됩니다.

클래스 선택자와의 가장 큰 차이는 id 선택자는 문서에서 한 번만 적용될 수 있다는 것입니다. 이런 특징때문에 id 선택자는 주로 문서의 레이아웃과 관련된 스타일을 지정하거나 웹 요소에 자바스크립트 프로그램을 사용하면서 요소를 구별할 때 사용합니다.

그룹 선택자

그룹 선택자는 같은 스타일을 사용하는 선택자들끼리 묶어 선언하는 것을 말합니다.

1

선택자1, 선택자2 { 스타일 규칙 }

캐스케이딩 스타일 시트

캐스케이딩 스타일 시트는 스타일 시트라는 용어 앞에 ‘캐스케이딩(cascading)’이란 용어가 붙은 CSS의 풀네임입니다. 이 캐스케이딩이라는 용어는 CSS에서, 스타일 시트에서 우선순위가 위에서 아래로, 다시 말해 계단식으로 적용된다는 의미로 쓰입니다. CSS처럼 스타일 시트가 이름붙여지고 설계된 것은 스타일끼리 서로 충돌하지 않도록 막아주기 위함입니다.

CSS는 다음과 같은 방법으로 스타일 충돌을 막습니다.

  • 스타일 우선순위: 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정되고, 그 우선순위에 따라 위에서 아래로 스타일을 적용합니다.
  • 스타일 상속: 태그의 포함관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달합니다.

스타일 우선순위

캐스케이딩에서 가장 중요한 것으로 다음 3가지 개념에 따라 지정됩니다. 위에서 아래로 내려갈수록 낮은 우선순위를 갖습니다.

  • 사용자 스타일
  • 제작자 스타일
  • 브라우저 기본 스타일

이 세 가지는 CSS 소스의 스타일과 함께 적용됩니다.

적용 범위가 좁을수록 높은 우선순위

중요도가 같은 스타일이라면 스타일 적용 범위에 따라 우선순위를 정할 수 있습니다. 적용 범위가 좁을수록, 더 정확히는 필요한 요소에만 적용한 스타일일수록 우선순위가 높아집니다.

단, 여기에서 스타일 규칙에 !important를 붙이면 그 스타일은 다른 스타일보다 우선순위가 높아집니다.

이를 포함한 우선순위는 아래와 같습니다.

  1. !important: 어떤 스타일보다 우선적으로 적용시킵니다.
  2. 인라인 스타일: 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용합니다.
  3. id 스타일: 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용할 수 있습니다. (선택자 이름 앞에 #)
  4. 클래스 스타일: id 스타일과 다르게 여러 번 적용할 수 있습니다. (선택자 이름 앞에 .)
  5. 타입 스타일: 웹 문서에 사용한 특정 태그에 스타일을 똑같이 적용합니다.

스타일 상속

웹 문서에서 사용되는 태그들은 서로 포함 관계가 있습니다. 여기서 포함하는 태그를 부모 요소, 포함되는 태그를 자식요소라고 합니다. 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소의 스타일 속성들이 자식 요소로 전달되는데, 이를 스타일 상속이라고 합니다.

예를 들어 문서 구조에서 <body>태그는 웹 문서에 사용한 모든 태그의 부모 요소입니다. 그래서 이 태그에 스타일을 지정하면 웹 문서 전체에 적용할 수 있습니다. 이를 이용해서 스타일 시트를 효과적으로 만들 수 있습니다.

참고 자료

  • Do it! HTML+CSS+자바스크립트 웹 표준의 정석
Web, Standard
CSS
This post is licensed under CC BY 4.0 by the author.