본문 바로가기
Web Development/HTML / CSS

[CSS] 사용법 과 문법에 대해서

Celestia 2009. 6. 5. 11:37

HTML문서에 CSS를 사용하는 3가지 방법

HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다.

  • 외부 스타일 시트(External Style Sheet)
  • 내부 스타일 시트(Internal Style Sheet)
  • HTML태그내에 스타일 지정(Inline Styles)

외부 스타일 시트(External Style Sheet)

css라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법입니다.

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

이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서
변경시에도 일괄적으로 변경되므로 홈페이지 제작의 효율성을 극대화 할 수 있습니다.

반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다.
그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.

그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.

내부 스타일 시트(Internal Style Sheet)

HTML문서내에서 <head>와 </head>사이에 스타일을 정의하는 방법입니다.

<head>
 <style type="text/css">
 <!--
  body {font-size:9pt;}
 //-->
 </style>
</head>

HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.

HTML태그내에 스타일 지정(Inline Styles)

위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.

<p style="color:gray;">이 문단의 색상은 회색으로 지정됩니다.</p>

이 문단의 색상은 회색으로 지정됩니다.

내용과 스타일의 분리 그리고 이로 인한 스타일 일괄변경의 효율성 측면으로 볼때는 바람직하지 않는 방법입니다.

그러나 위의 소스에서도 보듯이 직관적으로 사용이 가능하다는 장점이 있기에
강좌를 진행할때는 주로 이 방법을 사용하겠습니다.

CSS 문법

CSS 구문을 이해하기 위해서는
선택자(selector), 속성(property) 그리고 속성값(value) 이 3가지를 이해하여야 합니다.

CSS 구문은 아래의 그림처럼 선택자(selector)와 선언으로 구성되며,
선언은 속성(property)과 값(value)으로 구성됩니다.

우리말로 선택자라고 하면 어감이 좀 이상한데
보통의 경우 선택자는 HTML 태그 중 하나 입니다.
위의 그림에서는 <p>태그가 선택자로 사용되었습니다.

CSS 고급단계에서는 속성의 상속(inherit)과 겹침(cascade)을 제대로 이해해야 하기에
이 선택자(selector)의 개념이 아주 중요해집니다.

위에서 제시한 예제의 의미는  문단(p)의 색상(color)을 red로 지정하라는 말입니다.

속성과 속성값은 계속적으로 추가가 가능합니다. 이때 ; 기호를 사용하여 추가합니다.

p {color:red ; width:200}

선택자 역시도 추가할 수 있습니다. 이때 , 기호를 사용하여 추가합니다.

p, td {color:red ; width:200}

문단(p)뿐 아니라 테이블의 셀(td)의 스타일도 {}안의 내용처럼 지정하라는 의미입니다.

클래스(class)와 아이디(id)

클래스(class) 선택자

위의 예에서 p {color:red}로 지정하면 모든 문단의 색깔이 붉은색으로 지정됩니다.
그럼 특정 문단의 색깔만 붉은색으로 지정할려면 어떻게 할까요?

클래스(class)를 이용하면 됩니다.

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

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

<p class="red">red라는 이름의 클래스가 지정된 문단입니다.</p>

위의 예에서 red라는 클래스는 문단에 적용시켰습니다.
특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 됩니다.

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

<h3 class="red">소제목에도 red 클래스를 지정합니다.</h3>

<p class="red">red라는 이름의 클래스가 지정된 문단입니다.</p>

이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더 많이 사용됩니다.

아이디(id) 선택자

클래스는 .을 이용하여 정의하고 아이디는 #을 이용하여 정의합니다.

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

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

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

클래스와 아이디의 차이점은 클래스는 여러개를 사용할 수 있지만 아이디는 고유성을 가지므로
한 문서에 한번만 사용할 수 있습니다.

홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 클래스(class)의 사용이 필수적입니다.
실무에서도 클래스(class)의 사용은 빈번하게 이루어지고 있습니다.

문서의 내용중에 중요한 내용은 "붉은색으로 표현한다"는 방침을 정했다면
위의 예제와 같이 red라는 클래스를 지정한 다음(보통 외부 CSS 파일로 지정합니다.)
중요한 내용 부분에 <span class="red">내용</span> 이와 같이 지정해 줍니다.

이렇게 클래스로 지정하면 만일 "붉은색이 너무 강하므로 중요한 내용을 표시할때는 녹색으로 하고 밑줄을 그어주자"라는
방침이 정해지더라도 red 라는 클래스의 스타일만 바꾸면 홈페이지의 모든 페이지의 스타일이 변경됩니다.

곧 개별적으로 스타일을 지정하는 것보다는
클래스(class)와 외부 CSS 파일을 이용하는 것이
문서 전체의 일관성은 물론 스타일 변경시에도 작업의 효율성을 높여줍니다.

CSS 주석

css 파일의 내용이 많아지면 이를 관리하기 위해서 주석을 활용하면 좋습니다.

주석은 소스상에서만 표시될뿐 실제적으로는 아무 영향을 미치지 않는 코드입니다.

css의 주석은 /*로 시작하여 */로 끝납니다.

<style type="text/css">
<!--
/*강조하고 싶은 문단에 red 클래스를 적용한다.*/
.red {color:red}
//-->
</style>

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

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

CSS 구문이 간단할때는 주석이 크게 필요하지 않지만
홈페이지의 모든 문서에 연결된 외부 CSS파일의 경우 CSS 구문이 아주 복잡합니다.

이때 주석을 적절하게 사용한다면 CSS 문서의 관리가 편해집니다.
저작자표시 비영리 동일조건

'Web Development > HTML / CSS' 카테고리의 다른 글

[CSS] 배경(background)에 대해서  (0) 2009.06.05
[CSS] 텍스트 에 대해 알아보자.  (0) 2009.06.05
[Html 完] 배경음악,필드셋(Fieldset),마퀴(Marquee),HTML과 XHTML,오브젝트(Object) 에 대해서  (0) 2009.06.05
[Html] 입력양식(form)에 대해서  (0) 2009.06.05
[Html] 메타(Meta) ,이미지맵(image map),아이프레임(iframe) 에 대해서  (0) 2009.06.05

'Web Development/HTML / CSS' Related Articles

티스토리툴바