CSS 작성

요약

 

 

 

 

CSS 스타일 정의

character set 설정

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

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

 

@charset "utf-8";

 

 

클래스(class)

문서 내에서 특정 엘리먼트에 스타일을 적용하려면 클래스(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 속성으로 지정할 수 있습니다. 즉, id는 문서에서 한 번만 나올 수 있습니다. 반면 class는 문서에서 여러번 나타날 수 있습니다.

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

 

<style type="text/css">
<!--
#red {color:red}
//-->
</style>

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

 

 

 

참고자료

http://tong.nate.com/boxitem/post.do?action=read&_boxID=1811567&_tongID=917524&_boxItemID=35739280&_reloadTag=y

 

 

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