CSS 적용하는 방법

작성한 CSS를 적용을 하기 위해서는 html 문서에 삽입을 하여야 합니다. css를 적용하는 방법은 다양하게 존재합니다.

스타일 정보는 웹 문서를 브라우저 화면에 표시하기 전에 결정되어야 합니다.

CSS를 적용하는 방식은 크게 3종류 입니다.

인라인 스타일

인라인 스타일은 html 테그에 style 속성값을 통하여 스타일을 적용하는 것입니다.

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

내부 스타일

내부 스타일은 HTML 작성 영역과 CSS 선언 영역이 분리되어 있기 때문에, 이를 적용할 테그를 선택해 주어야 하는 선택자를 필요로 합니다. 선택자는 다양한 방법으로 지정을 할 수 있습니다.

body 영역에 HTML 코드를 작성하고, 스타일은 head테그 안에 style 테그를 통하여 스타일을 지정합니다. 선택자를 이용하여 요소를 선택하는 경우에는, 모두 동일한 스타일이 적용 됩니다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            h1 {
                color:red;
            }
        </style>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

외부 스타일

문서내에 있는 스타일을 별도의 외부 파일로 분리하여 연결하는 방법입니다.

외부 스타일시트는 문서 안에 있는 스타일 정보를 별도의 파일로 저장합니다.

외부 스타일은 .css확장자로 지정합니다.

외부 스타일은 <link> 테그를 이용하여 지정합니다.

<head>
    <link href="스타일시트-파일" rel="stylesheet" type="text/css">
</head>

rel="stylesheet" 연결하는 파일이 스타일시트 파일 지정
type="text/css" 텍스트로 작성된 파일

외부 스타일시트를 파일 안에서 작성할 때에는 <style> 태그 없이 스타일 내용만 작성합니다.

외부 스타일시트 파일은 style등의 html 테그가 필요없습니다.

문서 밖에 선언된 스타일시트는 link테그를 이용하여 연결을 해주어야 합니다.

HTML 문서의 head 영역에 다음과 같이 사용합니다.

<link rel="stylesheet" href="style.css">

외부 스타일시트를 연결할때는 파일의 경로를 잘 찾아 지정해 주어야 합니다. 절대경로 및 상대경로에 파일이 있는지 확인을 합니다.

외부 스타일의 장점

스타일시트를 만들어 놓으면 여러 HTML 에서 공용적으로 사용이 가능합니다.

제작 스타일

개발자가 스타일을 변경할 수 있는 방법은 크게 4가지가 있습니다.

인라인 스타일(inline Style)

html 요소에 직접 CSS를 지정하는 것을 말합니다.

<p style="color:red">안녕하세요</p>

임베디드 스타일(Embedded Style)

html 문서의 head 영역에 삽입을 하는 스타일 적용 방식을 말합니다. <style> 테그를 삽입하여 스타일을 지정합니다.

<html>
    <head>
        <style>
            p {
                color:red;
            }
        </style>
    </head>
    <body>
        <p>안녕하세요</p>
    </body>
</html>

임베디스 스타일은 현재의 작업중인 문서에만 적용이 됩니다.

임베디스 스타일은 여러개의 웹문서를 제작할때 일괄적인 수정이 어렵다는 단점이 있습니다. 유지보수, 운영에 어렵습니다. 페이지의 디자인을 테스트 할때 많이 사용을 합니다.

링크드 스타일(Linked Style)

별도의 스타일시트 파일(*.css)을 생성하여 링크를 영결하는 것입니다.

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

실무에서 가장 많이 사용하는 스타일 적용방식입니다. 외부 파일로 정의되어 있기 대문에 다수의 페이지에 일괄 수정하기 용이합니다.

삽입 스타일(Import style)

css 선언안에 추가 css를 적용할때 유용합니다.

<style>
    @import url('default.css');
</style>