반응형
|
|
HTML작성시 거의 필수적으로 작성되는 CSS의 선언방법을 소개합니다.
1. html문서의 <head>내에 선언
| <html> <head> <title>페이지 타이틀</title> <style type="text/css"> <!-- /* ... 여기에 CSS작성 ... */ --> </style> </head> <body> </body> </html> |
CSS가 하나의 페이지에만 작성되어져 사용된다면 유지보수가 간편합니다.
하지만 CSS의 재사용면에서 본다면 단점으로 작용합니다.
예를들면 동일하게 적용되는 여러개의 CSS가 있고 그것을 매 페이지마다 일일이 적용해주어야 한다면,
사용하기도 불편할뿐아니라, 유지보수측면에서도 하나의 디자인이 수정되면 그 디자인이 적용된 전체
페이지에 대하여 CSS수정이 이루어져야 하므로 매우 불편하게 작용합니다.
2. 분리된 파일로서의 CSS 선언
| <html> <head> <title>페이지 타이틀</title> <link rel="stylesheet" type="text/css" href="mycss.css" /> </head> <body> </body> </html> |
이 선언 방식은 사용자가 원하는 페이지가 어떤 페이지든
link 선언을 추가함으로써 손쉽게 CSS를 끌어 쓸 수 있습니다.
그리고 CSS의 재사용면과 유지보수면 효율적이어서 가장 보편화된 방식입니다.
3. @import 방식
| <html> <head> <title>페이지 타이틀</title> <style type="text/css"> @import url(mycss.css); </style> </head> <body> </body> </html> |
link 방식과 마찬가지로 CSS를 외부파일에 따로 작성하고
파일을 불러들이는 방식이지만 약간의 차이점과 주의점이 있습니다.
link는 html 문서에서만 적용가능하지만 import방식은 html문서와 css문서에서
모두 사용가능합니다. 즉 css문서에서 또다른 css파일을 읽어 들일 수 있습니다.
효율성면에서 import 방식이 더 나은 듯이 보일 수도 있지만,
브라우저에서 로딩되는 시간이 길어진다는 단점과 일부 페이지나 브라우저에서
정상적으로 CSS를 읽어오지 못하는 경우가 있다고 합니다.
link 방식을 추천드립니다.
4. inline style
| <html> <head> <title>페이지 타이틀</title> </head> <body> <h1 style="font-style:italic">...........</h1> </body> </html> |
css를 외부에 따로 지정하거나 head에 선언해놓고 사용하지 않고,
태그부분에 직접 CSS를 정의하여 사용하는 방식입니다.
코드작성시에는 편리하게 느껴질지 모르나 유지보수측면에서
매우 비효율적이고 문제가 많은 방식입니다.
반복적으로 사용되는 동일패턴이 있다고할때 일일이 추가해주어야하고,
변화가 생겼을때 전체 코드에 숨겨져있는 반복 CSS를 일일이 수정합니다.
적극 비추드립니다.
이상 CSS선언 방식에 대해 간략하게 포스팅해보았습니다.
날씨가 많이 쌀쌀해졌네요 감기조심하시고 좋은 하루 되세요 ^^
|
|
반응형
'정보' 카테고리의 다른 글
| 나눔폰트를 블로그(티스토리)에 적용해보자 (0) | 2011.11.22 |
|---|---|
| TTF파일을 블로그에서 사용가능한 웹폰트(EOT) 만드는법 (11) | 2011.11.21 |
| 우분투(Ubuntu) Linux v11.10 Server APM 웹서버 구축하는 방법 (2/2) (12) | 2011.11.18 |
| 우분투(Ubuntu) Linux v11.10 Server APM 웹서버 구축하는 방법 (1/2) (0) | 2011.11.17 |
| 노블리스 오블리주(Noblesse oblige) (2) | 2011.11.15 |
댓글