[css 사용법 1] html 문서서식인 스타일시트(css) 선언방법

스타일시트(CSS)의 선언방법 1

티스토리 블로그를 운영하거나, 홈페이지 제작, 홈페이지를 관리하게 된다면 반드시 알아둬야 할 것이 css라는 것을 이미 지난 글에서 언급을 했습니다. 반대로 네이버 블로그나 다음블로그등 포탈 블로그만 이용하거나 웹에서 검색만을 주로 하는 사람이라면 css에 관심을 가질 필요가 전혀 없습니다. ^^

특히 티스토리에서 글자색을 변경하거나 링크색, 제목, 배경등을 바뀌기 위해서는 반드시 알아야 하는 부분이 css라고 할 수 있습니다.

스타일시트를 사용하기 위해서는 선언하는 방법부터 알아야 합니다. 그리고 사용법만 알아두면 직접 작성은 못해도 리딩이 가능하게 됩니다. 스타일시트를 선언하는 방법과 사용법에 대해서 알아보도록 하겠습니다. 또한 html을 모른다면 이해가 어려울 수도 있습니다.

스타일시트 선언방법

스타일시트를 선언하는 방법은 3가지가 있습니다. 원래 곧바로 예제를 보여주며 설명하는 것이 읽는 사람이 지루하지 않고 재미있겠지만 어차피 다 알아야 하는 사항이므로 기본 사용법을 알고 넘어가는 것이 좋을듯 합니다. 하긴 이글을 읽는 분이라면 관심이 있어서 보시는 분일테니 제가 걱정하는 것이 기우에 불과할지도 모르겠네요. ^^

스타일시트의 선언은 html 파일안에 선언을 해줍니다. <head>와</head>사이에 선언하는 방법과 <body>와 <body>사이에 선언하는 방법이 있으며 아래의 방법중 편리한 방식을 사용하면 됩니다.

embeded 방식 ( <style> )
링크방식( <link> )
인라인 방식 ( 태그 )

임베디드방식 (embeded)

이 방식은 스타일시트를 <style>태그를 이용하여 html소스에 포함시키는 방법입니다. 이렇게 html파일에 포함시키는 경우 다른 html 파일에서는 사용을 할 수가 없다는 단점이 있습니다.

선언은 아래 파랑색 부분처럼 <head>와 </head>사이에 하며, <style> 과 </style> 태그 사이에 스타일을 지정하면 됩니다.

지정방식 => 선택자 { 속성 : 값 }

사용 예)

<body>
<head>
<style type="text/css">
b {color:orange; font-size:12pt}
</style>
</head>

<body>
임베디드 방식은<b>html에 스타일을 포함하는 방식</b> 입니다.
</body>

<소스 설명>

<b> 태그에 대해서 b {color:orange; font-size:12pt} 와 같이 스타일을 지정하였습니다.<b>태그는 글자를 강조하는 태그인데 글자색을 오렌지색으로 (color:orange), 글자크기는 12pt (font-size:12pt)로 스타일을 지정함으로써 앞으로 <b>태그를 사용하면 원래기능인 강조문자+오렌지색+12포인트(pt)로 글자가 표시 됩니다. 하나의 태그로 여러가지를 지정할 수 있으니 편리하죠?

<예제 실행 결과>

임베디드 방식은 html에 스타일을 포함하는 방식 입니다.

링크(link) 방식

링크방식은 스타일을 파일로 저장해놓고 html 파일에서 필요할때 호출하여 사용하는 방식입니다. 티스토리에서 기본적으로 사용하는 방식이기도 합니다.

<사용하는 형식>

이 링크방식은 매우 간단하죠? 위에서 "mystyle.css"에는 스타일이 지정되어 있습니다.

티스토리 관리자 페이지에서 소스를 컨트롤 할 수 있는 부분은 skin.html 과 style.css 입니다.
티스토리도 링크방식으로 스타일시트를 사용하고 있습니다.

티스토리 skin.html의 내용중 윗쪽을 보면

와 같은 내용이 있습니다. style.css에는 스타일이 정해져 있고 이 style.css를 skin.html에 호출하여 사용하는 방식입니다. 그러므로 티스토리에 스타일을 수정할때는 style.css를 수정해주면 바로 스킨에 적용이 됩니다.

인라인 방식

인라인 방식은 html 태그에 style속성을 이용하여 직접 지정하는 방식입니다.

<사용 예>

<소스 설명>
<p> 태그에 스타일을 이용하여 글자색은 초컬릿, 글자속성은 볼드, 글자체는 궁서로 지정을 한 예입니다.
두번째 <font> 태그는 글자색과 왼쪽 마진을 주었습니다.

<예제 실행 결과>

인라인 방식1
인라인 방식2 ==> 왼쪽에서 10픽셀(pixel) 만큼 공백을 두고 내용이 표시됨

위의 3가지 방식을 이용하여 스타일을 지정하며 티스토리는 이미 링크방식으로 작성되어 있으므로 어떤 방식을 사용할것인지는 고민을 하지 않아도 됩니다.

다만, 저는 인라인 방식을 가끔 사용합니다. 특히 사이드바 설정할때 많이 사용하죠. 사이드바의 html 베너출력에서 정렬을 한다든지 줄간격을 맞춘다든지 할때 주로 사용합니다.

쉽게 설명한다고 설명했는데 어렵지 않은지 모르겠습니다. 다음에는 스타일 지정방식에 대해서 할까 생각합니다. 티스토리에서 많이 볼 수 있는 #article이나 .title 과 같은 방식으로 실제적으로 style.css를 이해하는데 필요한 내용입니다.