CSS 적용 방식

CSS 적용 방법

이 문서에서는 HTML 페이지에 CSS를 적용하는 방법에 대해서 살펴본다.

종류

적용 방식은 크게 세 가지로 나뉜다.

인라인 스타일
style 태그 사용
css 파일 사용

인라인 스타일

인라인 스타일은 다음과 같은 형태를 말한다.

<h1 style="color:red;">Hello CSS</h1>

위의 코드는 다음과 같이 출력된다.

태그에 style 속성을 적고 그 내부에 CSS 코드를 적는데 다음과 같은 형태로 작성한다.

<태그 style="항목:값; 항목:값; 항목:값; ...;"> ... </태그>

태그에 직접 작성하기 때문에 다른 설정보다 최우선 적용되지만 디자인의 재사용이 불가하고, 가독성이 심각하게 떨어지는 문제점이 있기 때문에 사용할 경우 주의가 필요하다.

style 태그

style 태그를 사용하여 인라인 스타일보다 효율적인 스타일 적용을 할 수 있다.

<style>
    h1 {
        color : red;
    }
</style>
<h1>Hello CSS</h1>

위의 코드는 다음과 같은 형태로 출력된다.

style 태그 내부에 작성하는 디자인 코드는 다음의 형식을 따른다.

/* 주석 */
선택자 {
    항목 : 값;
    항목 : 값;
    ...
}

즉 앞에서 작성한 디자인은 h1이라는 선택자(selector)를 이용하여 글자색(color)을 빨강(red)로 부여하는 구문이다. 선택자의 종류는 매우 다양하다.

태그 선택자
클래스 선택자
아이디 선택자
상태 선택자
연계 선택자

일반적으로 style 태그는 직접적으로 화면에 나오는 내용이 아니기 때문에 head 영역에 포함시킨다.

css 파일 연결

style 태그 역시 페이지가 바뀌면 재작성해야하는 문제가 있기 때문에 css 파일 형태로 만들어 보관하고 불러오는 것이 바람직하다.

프로젝트 폴더
- test01.html
- test01.css

test01.css

@charset "UTF-8";

h1 {
    color : red;
}

@charset은 글꼴 설정이며 가장 상단에 작성한다.

test01.html

<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS 파일 불러오기</title>
        <link rel="stylesheet" type="text/css" href="./test01.css">
    </head>
    <body>
        <h1>Hello CSS</h1>
    </body>
</html>

실행하여 디자인이 적용되는 것을 확인한다.

위의 html 코드에서 css 파일을 불러오는 코드는 다음과 같다.

<link rel="stylesheet" type="text/css" href="./test01.css">

rel : 불러오는 파일이 수행해야 할 역할을 정의한다.
type : 불러오는 파일의 유형(MIME-TYPE)을 정의한다.
href : 불러오는 파일의 위치를 정의한다.

PreviousCSS Next크기(size)

Last updated 2 years ago