HTML 문서에 CSS(스타일 시트) 적용하기
2011. 4. 1. 22:12ㆍIT/Tistory Tips
CSS(스타일 시트)는 Cascading Style Sheets의 줄임말로 웹 문서의 스타일(색, 너비, 높이, 두께 등의 표시 방식)을 미리 지정하는 것이다. 웹페이지 크기를 줄여 로딩 속도를 높이기 위한 것으로, 반복되는 속성을 한 번만 지정해서 적용할 수 있는 장점이 있다. 예를 들어 블로그 스킨 사이드 바의 모든 목록(ul 태그)에 같은 글꼴과 크기, 여백을 지정하려고 할 때 CSS를 사용하면 각 ul 태그마다 스타일을 지정할 필요 없이 단 한 번의 스타일 정의로도 사이드 바의 모든 ul 태그에 적용되는 스타일을 지정할 수 있다. 또 앞에서 지정한 CSS의 사이드 바 ul 태그 스타일만 수정하면 실제 사이드 바의 모든 목록에 수정 내용이 즉시 반영되므로 내용 수정도 간편하다. CSS의 편리한 점은 CSS에 원하는 스타일을 한 번만 정의해도 같은 class, id, 또는 태그 전체에 적용된다는 사실이다.
이전에 글자 스타일 지정하기 (1)에서 <span style="">, 즉, 스타일을 적용해 글꼴 표현 방식을 바꾸는 것에 대해 이야기했다. span style=""에서 큰따옴표(" ")로 묶인 style 뒷부분이 스타일이다.
CSS를 적용하는 방법은 여러 가지다. 첫 번째는 HTML 문서와 해당 문서의 스타일을 정의한 style.css 파일을 따로 만든 다음 HTML 문서에서 외부 CSS를 불러와서 사용하는 것이다. 티스토리 블로그 스킨 편집화면을 보면 skin.html과 style.css를 확인할 수 있다. 많은 웹사이트에서 이렇게 HTML 문서와 CSS를 따로 작성하고 HTML 문서에 사용할 CSS 파일을 지정해서 사용한다.
외부 스타일 시트 적용은 크게 두 가지 방법이 있다. 이 중 한 가지를 HTML 문서의 <head>와 </head> 사이에 삽입한다.
이 중 가장 보편적으로 사용하는 방법은 <link>를 사용하는 방법이다. 티스토리 스킨 대부분에 이 방식으로 스타일 시트를 적용한 것을 확인할 수 있다. 기본 스타일 시트를 지정한 다음 특정 상황에 미리 만들어둔 다른 스타일 시트를 적용하고 싶을 때 @import를 사용한 방법도 많이 쓰인다. link에 관한 내용은 Style Sheets in HTML documents와 Links in HTML documents에서 자세히 확인할 수 있다. 외부 스타일 시트는 HTML과 CSS를 완전히 분리하며 HTML 문서 내부에 문서 구조와 상관 없는 스타일 정의가 포함되지 않으므로 가장 효과적인 스타일 적용 방법이다.
두 번째는 글자 스타일 지정하기 (1)에서 나온 것처럼
<span style="font-size:16px;font-weight:700;font-family:tahoma">본문 내용</span>
와 같은 방식으로 HTML 태그 안에 style=" " 형식으로 스타일을 삽입하는 방식이다. 이 방식은 외부 스타일 시트에 정의되지 않은 내용이나 독립적인 스타일을 적용할 때 주로 사용한다.
세 번째는 문서 처음에 다음과 같이 스타일을 정의하는 방식이다. HTML 문서의 <head>와 </head> 사이에 삽입하는 것이 일반적이다.
세 번째 방식은 CSS 파일을 따로 작성하진 않았지만, 한 페이지 안에 적용할 스타일이 많을 때 주로 사용한다. 세 번째, 네 번째 줄에 있는 내용이 사용자가 지정할 스타일이다.
스타일을 적용하기 위해선 셋 중 어떤 방법을 사용해도 좋지만, 보통 전체 웹사이트나 전체 블로그 스킨엔 외부 스타일 시트를 적용하는 방법이 많이 사용되고 특정 게시물에만 제한적으로 스타일을 적용할 땐 3번의 내부 스타일 시트를 주로 사용한다. 또 페이지의 특정 부분을 강조한다든지 특수한 효과를 줄 의도로 사용한다면 두 번째의 인라인 스타일이 적합하다.
이전에 글자 스타일 지정하기 (1)에서 <span style="">, 즉, 스타일을 적용해 글꼴 표현 방식을 바꾸는 것에 대해 이야기했다. span style=""에서 큰따옴표(" ")로 묶인 style 뒷부분이 스타일이다.
1. 외부 스타일 시트(External Style Sheet)
CSS를 적용하는 방법은 여러 가지다. 첫 번째는 HTML 문서와 해당 문서의 스타일을 정의한 style.css 파일을 따로 만든 다음 HTML 문서에서 외부 CSS를 불러와서 사용하는 것이다. 티스토리 블로그 스킨 편집화면을 보면 skin.html과 style.css를 확인할 수 있다. 많은 웹사이트에서 이렇게 HTML 문서와 CSS를 따로 작성하고 HTML 문서에 사용할 CSS 파일을 지정해서 사용한다.
외부 스타일 시트 적용은 크게 두 가지 방법이 있다. 이 중 한 가지를 HTML 문서의 <head>와 </head> 사이에 삽입한다.
| 1. <link>를 사용한 방법 |
| <link rel="stylesheet" type="text/css" href="./style.css" /> |
| 2. @import를 사용한 방법 |
| <style type="text/css"> @import url("./style.css"); </style> |
이 중 가장 보편적으로 사용하는 방법은 <link>를 사용하는 방법이다. 티스토리 스킨 대부분에 이 방식으로 스타일 시트를 적용한 것을 확인할 수 있다. 기본 스타일 시트를 지정한 다음 특정 상황에 미리 만들어둔 다른 스타일 시트를 적용하고 싶을 때 @import를 사용한 방법도 많이 쓰인다. link에 관한 내용은 Style Sheets in HTML documents와 Links in HTML documents에서 자세히 확인할 수 있다. 외부 스타일 시트는 HTML과 CSS를 완전히 분리하며 HTML 문서 내부에 문서 구조와 상관 없는 스타일 정의가 포함되지 않으므로 가장 효과적인 스타일 적용 방법이다.
2. 인라인 스타일(Inline Style)
두 번째는 글자 스타일 지정하기 (1)에서 나온 것처럼
<span style="font-size:16px;font-weight:700;font-family:tahoma">본문 내용</span>
와 같은 방식으로 HTML 태그 안에 style=" " 형식으로 스타일을 삽입하는 방식이다. 이 방식은 외부 스타일 시트에 정의되지 않은 내용이나 독립적인 스타일을 적용할 때 주로 사용한다.
3. 내부 스타일 시트(Internal Style Sheet)
세 번째는 문서 처음에 다음과 같이 스타일을 정의하는 방식이다. HTML 문서의 <head>와 </head> 사이에 삽입하는 것이 일반적이다.
<style type="text/css">
span.ex1{font-size:16px;font-weight:700;font-family:tahoma}
div.ex2{padding:10px 5px;border:1px solid #ccc;background:#f7f7f7}
</style>
span.ex1{font-size:16px;font-weight:700;font-family:tahoma}
div.ex2{padding:10px 5px;border:1px solid #ccc;background:#f7f7f7}
</style>
세 번째 방식은 CSS 파일을 따로 작성하진 않았지만, 한 페이지 안에 적용할 스타일이 많을 때 주로 사용한다. 세 번째, 네 번째 줄에 있는 내용이 사용자가 지정할 스타일이다.
스타일을 적용하기 위해선 셋 중 어떤 방법을 사용해도 좋지만, 보통 전체 웹사이트나 전체 블로그 스킨엔 외부 스타일 시트를 적용하는 방법이 많이 사용되고 특정 게시물에만 제한적으로 스타일을 적용할 땐 3번의 내부 스타일 시트를 주로 사용한다. 또 페이지의 특정 부분을 강조한다든지 특수한 효과를 줄 의도로 사용한다면 두 번째의 인라인 스타일이 적합하다.