웹마스터 팁

  2. Support
  3. 웹마스터 팁

[스타일시트] 스타일 시트의 개념

2002.02.26 11:53

태엽감는새

CSS 의 개요



Cascading Style Sheet (CSS), 즉 우리가 일반적으로 스타일시트라고 부르는 CSS는 HTML, 자바스크립트와 함께 사용되어 다이나믹 HTML (DHTML)을 구현하는 중요한 요소입니다.

기존의 HTML 은 문서의 구조나 레이아웃 보다는 단순한 정보의 전달에만 치중하였기 때문에 웹 문서를 워드와 같은 구조적 문서로 꾸미기에는 한계가 있었습니다.

최근의 대부분의 웹 문서에서는 좀더 효율적이고 구조적인 웹 문서를 만들기 위해 개발된 스타일 시트를 사용합니다.

이막스(EMACA)브라우저, 아레나(ARENA)등의 W3C 표준 브라우저에서만 볼 수 있었던 스타일 시트가 본격적으로 일반 사용자들에게 알려지게 된 것은 96년 중반 마이크로소프트사의 웹브라우저 "인터넷 익스플로러3.0"이 출시되면서부터입니다. 그 이후 계속해서 안정적인 규격을 만들어내면서 넷스케이프사도 넷스케이프 게뮤니케이터 4.0(이하 커뮤니케이터)에서 스타일 시트를 지원하기에 이르렀습니다.

기존의 브라우저는 사용자 환경에 많은 영향을 받았습니다. 하나의 텍스트 문서라도 사용자 브라우저의 기본 폰트 종류와 폰트 크기에 따라서 여러 가지 형태로 나타날 수 밖에 없었지만 사용자 환경에 영향을 받지 않고 HTML 파일을 화면에 보여줄 수 있는 '스타일 시트'를 이용하면 프로그래밍을 몰라도 간단한 HTML차원에서 응용할 수 있게 됩니다.

CSS에 대한 자세한 사항은 웹표준을 주관하고 있는 W3C (http://www.w3.org) 홈페이지를 참고 하세요


CSS 의 기본적 적용형태



스타일 시트의 선언은 의외로 간단합니다. 우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이죠. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하겠습니다. 우선 스타일 선언은 아래와 같이 합니다 ① <STYLE type="text/css">② <!--SELECTOR {PROPERTY:VALUE}② -->① </STYLE>


① <STYLE type="text/css"></STYLE> : 스타일의 형식을 css 로 한다는 뜻입니다. 최근의 브라우저들에서는 그냥 <STYLE>~</STYLE> 처럼 표기할 수도 있습니다② <!-- --> : 스타일 시트를 지원하지 않는 브라우저에서는 스타일을 불러오지 않습니다. 이것 역시 생략 해도 무방합니다

자스코의 스타일 시트

속성과 값은 (:) 으로 구분 해 주며, 여러가지 다양한 속성을 지정하고 싶을때는 (;)으로 구별하여 속성을 나열해 주면 간단하게 해결됩니다.

적용예
H1 {font -family:Arial;Color:red}


참고로 여기에서 줄수 있는 속성들로써는 font, text, image, color 등등이 있습니다.

넷스케이프와 익스플로러는 스타일 시트에 있어서 서로 다른 표준을 따르고 있기 때문에 같은 스타일 시트라 해도 화면에서의 Look & Feel이 조금씩 다릅니다.

스타일 시트를 선언하는 방법에는 3가지가 있습니다. Linking 스타일 시트 방법과 Embedding 스타일 시트법, Inline스타일 시트법이 그것입니다. 그 중 Linking 스타일 시트법에 대해서 먼저 알아 보겠습니다.

Linking 스타일 시트

이 방법은 스타일 선언을 한후 확장자가 css인 화일로 저장한 후 HTML화일에서 불러오는 방법입니다.우선 스타일 시트 화일을 작성한후 samp.css로 저장을 해보도록 하죠.

스타일시트 파일 (samp.css)

H1{font-family:Arial;font-size:40pt;Color:red}
P{font-size:12pt;line-height:20pt}



HTML 파일 (test.html)

<HEAD>
<LINK REL="stylesheet" TYPE="text/css" HREF="samp.css">
</HEAD>
<BODY>
<H1>스타일 시트 연습</H1>
<P>
P 태그에서 글자의 모양이 어떻게 나올까요? Linking 스타일시트를 사용하면 웹사이트 내 지정된 모든 문서와 태그에서 동일한 효과를 적용할 수 있어서 좋습니다
</P>
</BOBY></HTML>


예제보기

예제를 보면 굳이 별도로 글자크기나 색깔지정없이 H1태그 하나로 모든게 해결되는 모습을 보게 됩니다. 즉, 이 문서내에서 사용되는 모든 <H1> 태그와 <P> 태그에서는 동일한 효과를 볼 수 있습니다.

Embedding 스타일 시트

스타일 시트를 선언하는 방법 중 두번째 Embedding 스타일 시트법에 대해서 알아보겠습니다

이 방법은 Head 태그 안에서 style 선언을 해주어서 사용하는 방법입니다. 선언하는 방법은 아래와 같습니다

HTML 파일 (test_2.html)

사용방법
<HEAD>
<STYLE TYPE="text/css">
TAG1{PROPERTY:VALUE}
TAG2{PROPERTY:VALUE}
......
TAGn{PROPERTY:VALUE}
</STYLE>
</HEAD>

<HTML>
<HEAD>
<STYLE TYPE="text/css">
H1{font-family:Arial;font-size:40pt;
Color:red}
P{font-size:12pt;line-height:20pt}
</STYLE>
</HEAD>
<BODY>
<H1>스타일 시트 연습</H1>
<P>
P 태그에서 글자의 모양이 어떻게 나올까요? Linking 스타일시트를 사용하면 하나의 문서안에서 지정된 모든 태그에서 동일한 효과를 적용할 수 있어서 좋습니다
</P>
</BOBY></HTML>


예제보기


Inline 스타일 시트

마지막 방법으로 Inline 스타일 시트 방법입니다. 이 방법은 실제 홈페이지를 만드는 와중에 속성을 지정하고 싶을때 사용하는 방법이지만 권하고 싶지는 않습니다

사용법
<TAG STYLE="PROPERTY:VALUE">

HTML 파일 (test_3.html)

<HTML>
<BODY>
<H1 STYLE="font-family:Arial;font-size:40pt;Color:red">
오늘은 날씨가 좋습니다</H1>
<P STYLE= "font-size:12pt;line-height:20pt">
Inline 스타일 시트는 한 문서내에서 특정 태그의 한군데에만 원하는 효과를 보여주고자 할 때 사용합니다</P>
</BODY></HTML>


예제보기

한가지 주의할 점은, Inline은 <BLOCKQUOTE>또는 기타 몇몇 태그 외에는 상당히 작은 부분에만 영향을 미치기 때문에 지나치게 많이 사용하는 것은 좋지 않습니다. 나중에 변경해야 할 때 수작업을 많이 해야하기 때문입니다.
적당히 조금만 사용하되, 자주 사용해야 할 때는 스타일 시트를 링크하거나 스타일 시트 파일 자체를 HTML 파일 내에 삽입하는 방법을 사용하도록 하는 것이 좋습니다.

※ 스타일시트가 중복되는 경우에서의 우선순위

가장 나중에 불러들인 스타일 시트가 우선적용됩니다
Inline 스타일 > ID 스타일 > class 스타일 > HEAD에서 지정된 스타일
지금까지의 내용을 정리하면 다음과 같습니다

[방법 1]
Linking Style Sheet

<LINK REL=StyleSheet HREF="samp.css" TYPE="text/css">

또한 아래와 같은 방법으로 불러올 수도 있습니다

<STYLE TYPE="text/css"><!-- @import url(http://www.user.com/samp.css);--></STYLE>
전체 웹사이트내에서 모든 문서에 동일한 레이아웃을 지정하려면 이와 같이 링크 스타일 시트를 사용합니다



[방법 2]
Embeding Style Sheet


<style>H1 {font-size:24pt; color:blue}</style>
HTML 문서의 HEAD 부분에 넣는 방법.

현재 문서에서 H1 태그가 사용된 모든 텍스트의 글자 크기를 24pt, 색상을 파란색으로 지정합니다

이렇게 하면 현재 스타일이 정의된 문서내에서 <H1></H1> 태그를 사용한 모든 문자의 크기와 색상이 스타일시트에서 정의한 대로 지정 됩니다

이 경우 여러문서에서 동일한 스타일을 적용시키기 위해서는 스타일시트를 style.css 파일 형태(이름은 마음대로 정하면 되지만 확장명은 반드시 css 로 지정해야 합니다)로 저장하여 두었다가 외부에서 불러오는 방법(Linking Style Sheet)을 많이 사용합니다.



[방법 3]
Inline Style Sheet

<H1 style="font-size:24pt;color:blue">안녕하세요</H1>
본문의 특정 텍스트에만 스타일을 적용 합니다

스타일을 적용하지 않은 다른 <H1>태그에는 색상과 크기가 지정되지 않습니다


이 게시물을
수정 삭제
좋아요
목록
태그 쓰기