HTML에 CSS 적용하기

HTML에 CSS 적용과 연결하는 방법, 각각의 특징에 대해 알아보겠습니다.

HTML에 직접 CSS를 적용하는 두 가지 방법
HTML에 외부 CSS 파일을 연결하여 적용하는 두 가지 방법

  1. 내부 스타일시트로 적용하기 - <style> 태그 이용
  2. 인라인 스타일로 적용하기 - style 속성 이용

내부 스타일시트(Internal stylesheet)란 외부 CSS 파일이 없는 대신,
HTML의 <style> 태그 내부에 CSS 언어로 작성된 스타일 코드를 작성해서 HTML에 직접 CSS를 적용하는 방법입니다.

<style> 태그는
HTML 문서에서 CSS 스타일을 작성할 수 있는 영역을 나타내는 태그입니다.
이 영역에는 CSS 언어로 작성된 스타일 코드와 주석만을 포함할 수 있습니다. 화면에서는 표시되지 않습니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>style 태그</title>
        <style> /* CSS 스타일을 작성할 수 있는 영역을 나타내는 태그 */
            h1 {
                color: white;
                background-color: black;
            }
            p {
                color: gray;
            }
        </style>
    </head>
    <body>
        <h1>style 태그</h1>
        <p>
            style 태그는 HTML 문서에서 CSS 스타일을 작성할 수 있는
            영역을 나타내는 태그입니다.
        </p>
    </body>
</html>
브라우저에서 실제 표시된 모습

<style> 태그의 작성 위치

<style> 태그는 HTML 문서에서 원하는 요소의 스타일을 지정할 CSS 영역을 만들기 위해 작성합니다.
몇몇 경우를 제외하고 <style> 태그의 작성 위치는 별 제한이 없지만, HTML 문서는 위에서 아래로 랜더링되기 때문에 스타일링할 요소보다는 먼저 작성되어야 합니다. 그렇지 않으면 스타일링할 요소가 먼저 랜더링된 후 CSS가 적용되어 사용자가 보기에 해당하는 요소의 스타일이 갑자기 변경되는 모습을 볼 수 있습니다. 마치 화면이 깜빡이듯이...

그런데, HTML 문서는 구조적인 마크업을 하는 것이 매우 중요합니다.
화면에 보여지는 요소들은 <body> 태그 내에 작성합니다. 이것이 HTML의 기본 구조입니다.

작성자는 스타일할 요소도 <body> 태그 내에 작성하기 때문에
HTML의 구조적인 마크업을 고려하고 스타일을 적용할 요소보다는 먼저 위치해야 하는 점도 고려해서
<style> 태그는 <head> 태그 내에 위치하는 것을 권장합니다.

<style> 태그가 <head> 태그 내에 위치하면 HTML 문서의 구조가 복잡해지지 않아서 구조를 파악하는데 도움이 되고 , <style> 태그의 위치를 쉽게 인지할 수 있기 때문에 요소의 스타일을 지정과 HTML 문서를 다룰 때 여러모로 더 편리합니다.

다수의 <style> 태그 작성

HTML 문서에는 다수의 <style> 태그를 작성할 수 있습니다.
스타일링을 할 때 편의성, 가독성, 스타일할 대상이나 특성 등을 고려하여 다수의 <style> 태그로 나누어 스타일링할 수 있습니다.

HTML 가독성 향상을 목적으로
데스크탑과 모바일의 스타일을 <style> 태그로 분리해서 작성한 예 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>다수의 style 태그 작성</title>
        <style>
            /* 데스크탑 */
            h1 {
                color: white;
                background-color: black;
            }
            p {
                color: gray;
            }
        </style>
        <style>
            /* 모바일 */
            @media (max-width: 500px) {
                h1 {
                    font-size: 1.8em;
                }
                p {
                    font-size: 0.9em;
                }
            }
        </style>
    </head>
    <body>
        <h1>다수의 style 태그 작성</h1>
        <p>
            HTML 문서에는 다수의 style 태그를 작성할 수 있습니다. 
        </p>
    </body>
</html>

인라인 스타일은 CSS로 스타일을 적용할 요소 내에 style 속성을 이용해서 해당 요소에만 스타일을 적용하는 것을 말합니다.

HTML 
<h2 style="color: white; background-color: black;">
    style 속성
</h2>
<p style="color: gray;">
    CSS로 스타일을 적용할 요소 내에 style 속성을 이용해서
    해당 요소에만 스타일을 적용하는 것을 말합니다.
</p>
브라우저에서 실제 표시된 모습

요소 내에 직접 스타일을 적용하는 인라인 스타일은 가급적 사용하지 않는 것이 좋습니다.

유지 관리가 좋지 않으며, 문서에 동일한 스타일을 여러 번 사용해야 할 수도 있습니다. 그리고, HTML 문서의 요소 내에 CSS를 직접 작성하기 때문에 CSS 정보와 HTML 구조 정보가 혼합되어 있어서 코드를 읽고 이해하는데 어려움이 많습니다.

또한, CSS 선택자를 사용하지 않고 직접 속성과 값을 열거하기 때문에 예를 들어, :hover, :focus 등의 가상 클래스나, ::before, ::after 등의 가상 요소 등 CSS가 지원하는 선택자를 사용할 수 없는 치명적인 단점이 있습니다.

하지만 인라인 스타일을 반드시 적용해야 하는 하는 경우도 있습니다.
이메일 발송을 HTML 탬플릿으로 할 경우에는 해당하는 HTML 탬플릿에 오직 인라인 스타일만을 적용할 수 있습니다. 이것은 이메일에서 매우 중요한 보안 정책의 이유로 그 밖의 CSS 적용 방법을 지원하지 않기 때문입니다.

  1. 외부 스타일시트로 적용하기 - <link> 태그 이용
  2. 외부 스타일시트로 적용하기 - <style> 태그 내에 @import 규칙 이용

HTML에 외부 CSS 파일을 연결하는 것은 가장 일반적이고 유용한 방법입니다.
하나의 CSS 파일만을 연결할 수도 있고 여러 개의 CSS 파일을 연결할 수 도 있습니다.

외부 CSS 파일은 확장자가 .css인 별도의 파일로 작성되어 있어야 하며, HTML의 <link> 태그를 이용합니다.

<link> 태그는 rel 속성으로 외부 리소스와의 링크 관계를 지정하고 href 속성으로 연결할 외부 리소스의 위치(URL)를 지정하는 기본 구조를 가집니다. rel="stylesheet"는 HTML 문서에 CSS 스타일시트를 연결하는 데 사용됩니다. CSS 스타일시트는 HTML 문서에 스타일을 적용하는 데 사용됩니다.

HTML 
<head>
    <link rel="stylesheet" href="styles.css">
</head>

이것은 styles.css라는 파일을 현재 문서에 CSS 스타일시트로 연결합니다.

문서에 사용할 스타일시트이므로, HTML 문서의 내용(contents)을 나타내는 <body> 이전의 <head> 태그 내에 삽입하는 것을 권장합니다.

스타일링을 할 때 편의성, 가독성, 스타일할 대상이나 특성 등을 고려하여 다수의 CSS 파일을 연결할 수 도 있습니다.

HTML 
<head>
    <link rel="stylesheet" href="styles1.css">
    <link rel="stylesheet" href="styles2.css">
    <link rel="stylesheet" href="styles3.css">
</head>

HTML에 직접 CSS를 적용하는 두 가지 방법 중에서 <style> 태그를 이용해서 내부 스타일시트로 적용하기를 위 글에서 이미 알아보았습니다.

HTML에 외부 CSS 파일을 연결하여 적용하는 두 가지 방법 중 또 다른 방법은 HTML의 <style> 태그 내부에 @import 규칙으로 외부 스타일시트를 불러오는 것입니다.
@import 규칙을 사용하면 스타일시트에서 다른 스타일시트로 가져올 수 있습니다.

☝ '@import 규칙'이라는 용어를 사용했습니다.
CSS에서 @기호로 시작하는 여러 식별자(identifier)가 뒤따르는 구문이 있는데, 이러한 규칙이 있는 구문을 "@식별자 규칙(흔히 @-rule)"이라는 용어로 말합니다.
예를 들어, @import의 경우 @ 다음의 import가 식별자이며 '@import 규칙'이라고 합니다. 그래서, @import를 '다른 스타일시트에서 스타일 규칙을 가져올 때 쓰는 규칙'이라고 설명하는 것입니다.

@import의 구문은 다음과 같습니다.

구문

옵션으로 url("외부 CSS 파일의 URL") 뒤에 쉼표로 구분된 미디어 쿼리(list-of-media-queries)를 지정할 수 있습니다.

HTML 
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <title>style 태그</title>
        <style> /* CSS 스타일을 작성할 수 있는 영역을 나타내는 태그 */
            @import url("sheet.css");
        </style>
    </head>
    <body>
        ....
    </body>
</html>

<link> 태그처럼 @import을 사용해서 다수의 외부스타일시트를 연결시킬 수 있다.

HTML 
<style>
    @import url("sheet1.css");
    @import url("sheet2.css");
    @import url(sheet3.css);
</style>

한 가지 주의할 점은 @import을 사용할 때에는 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다는 것입니다.

HTML 
<style>
	@import url("sheet2.css"); /* @import가 맨 앞에 위치해야 한다. */
	h1 {color: red;}
	p {color: blue; background-color: yelow;}
	table td,
	table th {border: 1px solid #000000;} 
</style>

다음과 같은 사용은 잘못된 것입니다.

HTML 
<style>
	h1 {color: red;}
	p {color: blue; background-color: yelow;}
	table td,
	table th {border: 1px solid #000000;}
	@import url("sheet2.css"); /* @import가 맨 앞에 위치해야 한다. */
</style>

참고문헌

같이 보기