1. CSS 시작

1. 키워드

CSS(Cascading Style Sheets)

2. CSS 기초

1) CSS란?

CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다.
HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌다.
오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있다.

2) CSS를 사용하는 이유

HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 한다.
이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어진다.
이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS이다.

CSS는 웹 페이지의 스타일을 별도의 파일로 저장할 수 있게 해주므로 사이트의 전체 스타일을 손쉽게 제어할 수 있다.
또한, 웹 사이트의 스타일을 일관성 있게 유지할 수 있게 해주며, 그에 따른 유지 보수 또한 쉬워진다.
이러한 외부 스타일 시트는 보통 확장자를 .css 파일로 저장한다.

3. CSS 문법

CSS의 문법은 선택자(Selector)와 선언부(Declaratives)로 구성된다.
선택자는 CSS를 적용하고자 하는 HTML 요소(Element)를 가리킨다.
선언부는 하나 이상의 선언들을 ;(세미콜론)으로 구분하여 포함할 수 있으며, {}(중괄호)를 사용하여 전체를 둘러싼다.
각 선언은 CSS 속성명(Property)과 속성값(Value)을 가지며, 그 둘은 :(콜론)으로 연결된다.
이러한 CSS 선언(Declaration)은 언제나 마지막에 ;으로 끝마친다.

1) CSS 선택자

스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자는 다음과 같다.

1] HTML 요소 선택자

2] 아이디 선택자

3] 클래스 선택자

4] 그룹 선택자

(1) HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.

<style>
  h2 {
    color: teal;
    text-decoration: underline;
  }
</style>

...

<h2>이 부분에 스타일을 적용합니다.</h2>

(2) 아이디 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다.
이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.

<style>
  #heading {
    color: teal;
    text-decoration: line-through;
  }
</style>

...

<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.
하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다.
따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.

(3) 클래스 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
이러한 특정 집단을 클래스(Class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 준다.

<style>
  .headings {
    color: lime;
    text-decoration: overline;
  }
</style>

...

<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>

<p>
  class 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수
  있습니다.
</p>

<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

(4) 그룹 선택자

그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용한다.
그룹 선택자는 여러 선택자를 ,(쉼표)로 구분하여 연결한다.
이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 준다.

<style>
  h1 {
    color: navy;
  }

  h1,
  h2 {
    text-align: center;
  }

  h1,
  h2,
  p {
    background-color: lightgray;
  }
</style>

2) CSS 주석(Comments)

주석이란 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미한다.
이러한 주석은 다른 CSS 코드와는 달리 웹 브라우저에 의해 해석되지 않는다.

CSS에서 주석을 표현하는 방법은 다음과 같다.

/* 주석내용 */

<style>
  p {
    color: teal; /*이것은 한 줄짜리 주석입니다.*/
    font-size: 30px;
  }

  /* 
 이것은 두 줄짜리 주석입니다.
 몇 줄이라도 가능합니다. 
 */
</style>

다음 예제는 첫 번째 주석 안에 한 줄짜리 두 번째 주석을 삽입한 예제이다.
이때 첫 번째 주석의 두 번째 라인은 두 번째 주석의 */ 기호로 인해 정상적인 주석으로 인식되지 못한다.

/* 첫 번째 주석의 첫 번째 라인입니다. /* 두 번째 주석입니다. */ 첫 번째 주석의
두 번째 라인입니다. */

4. CSS 적용

1) CSS를 적용하는 방법

HTML 문서에 CSS 스타일을 적용할 때에는 다음과 같이 세 가지 방법을 사용할 수 있다.

1] 인라인 스타일(Inline Style)

2] 내부 스타일 시트(Internal Style Sheet)

3] 외부 스타일 시트(External Style Sheet)

(1) 인라인 스타일

인라인 스타일이란 HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법이다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.

<body>
  <h2 style="color: green; text-decoration: underline">
    인라인 스타일을 이용하여 스타일을 적용하였습니다.
  </h2>
</body>

Note

이 방식은 한 번 설정된 스타일을 변경하기가 매우 어려우며, 스타일 시트를 사용하는 많은 이점을 잃게 된다.
따라서 이 방식은 될 수 있으면 꼭 필요한 경우에만 사용해야 한다.

(2) 내부 스타일 시트

내부 스타일 시트를 이용하는 방법은 HTML 문서 내의 <head> 태그에 <style> 태그를 사용하여 CSS 스타일을 적용한다.
이러한 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있다.

<head>
  <style>
    body {
      background-color: lightyellow;
    }

    h2 {
      color: red;
      text-decoration: underline;
    }
  </style>
</head>

(3) 외부 스타일 시트

외부 스타일 시트를 이용하는 방법은 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해준다.
외부에 작성된 이러한 스타일 시트 파일은 .css 확장자를 사용하여 저장된다.
스타일을 적용할 웹 페이지의 <head> 태그에 <link> 태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용된다.

<head>
  <link rel="stylesheet" href="/examples/media/expand_style.css" />
</head>

위의 예제에서 사용된 CSS 파일의 내용은 다음과 같다.

body {
  background-color: lightyellow;
}

p {
  color: red;
  text-decoration: underline;
}

2) 스타일 적용의 우선순위

위에서 설명한 스타일 적용 방법들이 혼합되어 사용될 경우, 최종적으로 적용되는 스타일은 다음 순서에 따라 결정된다.

1] 인라인 스타일 (HTML 요소 내부에 위치함)

2] 내부 / 외부 스타일 시트 (HTML 문서의 head 요소 내부에 위치함)

3] 웹 브라우저 기본 스타일

예를 들어 인라인 스타일이 적용된 태그는 내부나 외부 스타일 시트와는 상관없이 무조건 인라인 스타일이 적용된다.
또한, 내부 스타일 시트와 외부 스타일 시트는 가장 마지막에 적용된 스타일 시트가 적용된다.

<link rel="stylesheet" href="/examples/media/expand_style.css" />

...

<h2>이 부분은 외부 스타일 시트만이 적용됩니다.</h2>

<h2 style="color: maroon; text-decoration: line-through">
  이 부분은 인라인 스타일과 외부 스타일 시트가 둘 다 적용됩니다.
</h2>

따라서 웹 사이트의 스타일 적용은 외부 스타일 시트를 사용하는 것이 유지 보수도 편하며, 가장 안정적이다.