CSS Reference

CSS 기초 문법

CSS란?

CSS(Cascading Style Sheets)는 표준으로 제정된 HTML에서 지원할 수 없는 다양한 문자 크기나 글씨체, 줄 간격의 지정이 가능할 뿐 아니라 기존의 HTML 태그 기능을 확장하여 배경 색상 등도 자유롭게 선택할 수 있습니다.

쉽게 말해, HTML요소들이 각종 미디어에서 어떻게 보이는가를 정의하는데 사용되는 스타일 시트 언어입니다.

CSS 주석표시

주석이란, 개발자가 작성한 해당 코드에 대한 이해를 돕는 설명이나 디버깅을 위해 작성한 구문을 의미합니다. 이러한 주석은 다른 CSS 코드와는 달리 웹 브라우저에 의해 해석되지 않습니다. CSS에서 주석을 표현하는 방법은 아래와 같습니다.

/* CSS 주석 */

CSS 선언 방법

CSS를 작성하고 HTML 문서에 포함시키는 방식은 크게 3가지 방식으로 이루어져 있습니다.

내부 스타일

내부 스타일이란 HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS스타일을 적용합니다.

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

외부 스타일

외부 스타일 방식은 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. 외부 스타일 시트 방식을 이용하면 웹 사이트 전체의 스타일을 하나의 파일로 변경할 수 있습니다. 외부에서 작성된 스타일 시트 파일은 .css 확장자를 사용하여 저장됩니다. 스타일을 적용할 웹 페이지의 <head>태그에 <link>태그를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.

<head>
    <link rel="stylesheet" href="/example/media/expland_style.css">
</head>

인라인 스타일

인라인 스타일이란 HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다.

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