요약

CSS 스타일 정의

CSS 파일 최상단에 @charset으로 character set을 지정할 수 있습니다.

일반적으로 utf-8을 사용합니다.

@charset "utf-8";

문서 내에서 특정 엘리먼트에 스타일을 적용하려면 클래스(class)를 사용하여 스타일을 적용할 수 있습니다.

CSS에서 클래스에 속성을 정하려면 점(.)을 찍고 클래스의 이름을 지정하고 {}안에 속성을 지정하면 됩니다.

예제: red 클래스를 지정하여 h3와 p태그에 클래스 red 스타일을 적용한 예제

<style type="text/css">

<!--

.red {color:red}

//-->

</style>

<h3 class="red">H3에 red가 적용됩니다.</h3>

<p class="red">red가 적용된 문단입니다.</p>

태그이름.클래스이름 으로 지정하면 해당 태그에서 클래스로 지정한 부분만 스타일을 적용시킬 수 있습니다.

예제: red 클래스를 p 엘리먼트에만 적용하는 예제

<style type="text/css">

<!--

p.red {color:red}

//-->

</style>

<p>일반적인 문단입니다.</p>

<p class="red">red가 적용된 문단입니다
.</p>

문서 내에서 고유한 엘리먼트는 id 속성으로 지정할 수 있습니다. 즉, id는 문서에서 한 번만 나올 수 있습니다. 반면 class는 문서에서 여러번 나타날 수 있습니다.

CSS에서 id에 스타일을 지정하려면 아이디 이름앞에 #을 이용하여 정의할 수 있습니다.

<style type="text/css">

<!--

#red {color:red}

//-->

</style>

<p id="red">이 문단의 id는 red 입니다.</p>

<p>일반적인 문단입니다.</p>

이 글은 스프링노트에서 작성되었습니다.