티스토리 뷰

IT 이야기/프로그래밍

[CSS] 스타일시트 1편 - 스타일 시트(Style Sheet)란?

하늘과 나b 2010. 8. 23. 21:40
 

HTML/CSS 이야기

스타일 시트(Style Sheet)란?


   스타일시트(Style Sheet)란? 

 

기존 HTML의 경우를 보면 폰트, 색상, 크기등을 일일히 적어 주어야 하는 불편함이 있었는데

일일히 입력을 하다보니 시간과 노력이 엄청나게 들어갔었습니다.

이 단점을 극복하기 위해서 만든 것이 바로 스타일시트(Style Sheet)라는 것입니다.

스타일시트를 사용하면 다음과 같은 장점이 있어요



   스타일시트의 장점


     1. 웹페이지 관리가 쉬워져요

     2. 웹페이지를 전보다 멋지게 꾸밀 수 있어요

     3. 로딩 시간이 줄어들어요 




   스타일시트의 기본 형태

이어서 스타일시트의 기본 형태를 보겠습니다. 스타일 시트의 기본적인 서식은 크게 셀렉터(

selector)

와 선언(declaration), 속성(attribute), 값(value)으로 이루어 집니다. 

그러면 스타일시트의 각 요소에 맞는 설명을 드리도록 하겠습니다.



- 스타일시트(style sheet)의 선언


셀렉터(selector) { 속성(attribute) : 값(value) }
사용예)   h1 { color : blue }

스타일시트의 기본 형태는 위와 같습니다.
그러면 세부 요소에 대한 설명을 표로 보도록 하겠습니다.

셀렉터(selector) 스타일을 적용할 대상 
선언(declaration) 설정할 스타일
속성(attribute)  설정할 스타일의 성질(색, 크기 등) 
값(value)   속성마다 정해져 있는 값 


그러면 예제를 보도록 하겠습니다.

 
<style type="text/css">

  h1 { color : red ; font-size : 10px ; font-family : 돋움체 ; }

</style>


위와 같은 형태로 스타일 시트를 작성하면 되죠


한줄씩 살펴 보도록 하겠씁니다.

<style type="text/css"></style>

 스타일 시트는 <style type="text/css">와 </style>사이에 코드를 입력합니다
<style type="text/css">를 시작 </style>을 끝이라고 보면 되겠죠.

 그리고

  h1 { color : red ; font-size : 10px ; font-family : 돋움체 ; }

이 줄은 <h1>과 </h1> 사이에 있는 문자열에 대해서 글자색은 빨강색(color:red) 글자크기는
10픽셀, 글자체는 돋움체로 바꿔서 화면에 보여줘라 라는 말입니다.



   주석 처리에 대해서

 어느 언어와 마찬가지로 스타일시트(Style Sheet)에서도 주석이 존재합니다. 여기서는 스타일시트(Style Sheet)에서 주석을 어떻게 사용하는지 알아보도록 하겠습니다.


 
Style Sheet의 주석 사용 : /* 주석 내용 */


스타일시트에서의 주석은 위와 같이 /* */ 안에 주석 내용을 넣어서 사용합니다. /*과 */로 둘러싸인 부분은 실제 화면에 표시되지 않으므로 메모나 주의사항 등을 표시하는데 사용할 수 있습니다.



   스타일시트의 기본적인 설정

웹페이지에서 스타일시트를 사용하기 위해 설정할 수 있는 방법은 아래와 같이 크게 3가지로 나눌 수 있습니다. 이 3가지 방법은 스타일시트를 사용하는 상황에 따라 골라서 사용할 수 있습니다.



     1. 외부 스타일시트 파일을 불러와 사용합니다.

     2. HTML 문서 안에 삽입하여 사용합니다.

     3. HTML 태그에 직접 스타일을 지정합니다.
 

1. 외부 스타일시트 파일을 불러와 사용하는 방법

  
<link rel="stylesheet" href="CSS 파일의 URL" type="type/css"/>

첫번째 방법은, HTML 문서와는 별도로 스타일을 설정한 파일을 <link>태그를 사용하여 해당 파일을 불러오는 방법입니다. <head>와 </head>내에 사용하며 href 속성에서 파일의 확장자가 *.css인 외부 파일의 URL을 지정합니다. 

이 방법은 하나의 스타일시트 파일을 문서 전체에 적용시켜, 페이지 전체 분위기를 통일하고 싶은 경우에 사용합니다. 만약, 여러 개의 스타일시트 파일을 사용하려 하는 경우는 <link>태그를 여러 개 사용하여 css파일을 불러올 수 있습니다.


2. HTML 문서 안에 설정하여 사용하는 방법

 
<style type="text/css"> 적용할 스타일시트 내용 </style>


3. 태그에 직접 스타일을 지정하는 방법

 
<태그 style="적용할 속성"> ~ </태그>

위의 방법은 특정한 곳에서만 스타일을 지정하는 경우 사용합니다.

 

저작자표시

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[VBA] 폼(Form)의 개념  (0) 2011.01.19
[VBA] 시트 이름 받아서 해당 시트 활성화하기  (2) 2011.01.18
[VBA] Property(속성)과 Method(메서드)  (0) 2011.01.18
[C언어 이야기] C언어의 기본  (0) 2010.12.08
[CSS] 스타일시트 2편 - 스타일의 우선순위와 셀렉터 사용법  (0) 2010.08.24
HTML의 시작  (0) 2010.08.16
AJAX #1. AJAX 소개(AJAX Introduction)  (0) 2010.08.16
AJAX 예제(AJAX Example)  (0) 2010.08.16
HTML 그 두번째 이야기  (0) 2010.08.15
HTML 글씨에 효과주기  (0) 2010.08.15
공유하기 링크
댓글