Style
문서에서 스타일을 선언하는 방법
스타일 속성으로 선언(inline style sheet)
<h2 style="font-size: 1.3em;">인라인 스타일 선언</h2>
HTML 태그에 style 속성을 사용하여 직접 선언하는 방법이다. 간단하게 스타일을 적용할 수 있지만 구조와 표현의 분리 측면에서 보면 마크업에 스타일 선언이 섞이게 되기 때문에 제한적으로 사용할 필요가 있다.
헤더 영역에 선언(header style sheet)
<head>
...
<style type="text/css">
p {
margin: 1.5em 0;
}
...
</style>
...
<head>
HTML의 <head>요소 안에 <style>요소를 이용하여 문서에 적용될 스타일 시트를 선언하는 방법이다. 한 페이지 안에서 여러 요소의 스타일을 효율적으로 선언할 수 있다. 만약, 선언한 스타일이 여러 페이지에 걸쳐서 적용되어야 한다면 외부파일로 선언하는 것이 더욱 효과적이다.
외부 파일로 선언(external style sheet)
<head> ... <link rel="styleshteet" type="text/css" href="externalstyle.css" /> ... </head>
별도의 CSS 문서를 만들고 HTML에서는 <head>요소 안에서 <link>요소를 이용하여 연결 시키는 방법이다. 여러 문서에 동시에 적용되는 스타일을 효율적으로 선언할 수 있다. 사이트 전체의 레이아웃 선언이나 기본 마크업 스타일 선언등을 포함하여 통일성을 유지하고 수정, 보완시의 효율성이 매우 높다. 별도로 만들어진 CSS 문서는 text/css mime-type을 가지고 있어야 한다.
스타일 선언에 따른 우선순위
선언 방법에 따른 우선 순위는 external = header < inline < user 순이다. 우선 순위가 같을 경우에는 셀렉터의 우선순위를 따르게 되고, 같은 셀렉터 우선 순위를 가지고 있는 경우 나중에 선언된 스타일이 적용된다.
사용자 스타일 선언
사용자 스타일(user style)은 웹사이트 제작자가 제공하는 스타일이 아니라 사용자가 자신의 환경(브라우저)에만 적용되도록 스타일을 만들어서 웹사이트에 적용하는 것을 말한다.
오페라 브라우저의 사용자 모드(User mode)가 이 기능을 가장 쉽게 볼 수 있는 예이다. 사용자가 직접 작성한 스타일은 아니지만 브라우저 자체적으로 사용자 스타일을 포함하여 웹페이지에 사용자가 원하는 모양의 스타일을 적용할 수 있게 구현되어 있다. 오페라 브라우저에서는 접근성을 향상시킨 레이아웃, 테이블 레이아웃 제가, 고대비 화면, 텍스트 브라우저와 같이 보는 기능 등 웹사이트를 다양하게 표현하는 방법을 제공한다. 재미도 있지만 접근성 향상을 위해서 제공되고 있는 기능이라는 느낌이 강하다.
인터넷 익스플로러도 완전하지는 않지만 사용자 스타일을 지원하고 있다. 도구 > 인터넷 옵션 > 일반 > 사용자 서식 에서 사용자 스타일을 설정할 수 있다. 레이아웃까지 변경할 수는 없고 텍스트 스타일을 변경하는 수준의 기능이 지원된다.
사용자 스타일은 모든 스타일 선언 중에서 가장 높은 우선순위를 가지고 있다.
외부 스타일과 마임타입(mime-type)
외부 스타일로 스타일 시트를 선언할 때에는 스타일 시트 파일의 마임타입이 text/css로 지정되어 있는 가를 확인해야 한다. IE의 경우 마임타입 스니핑 기능이 있어서 text/css로 지정이 되어 있지 않아도 스타일 시트를 해석하기도 한다. 하지만 스니핑 기능이 작동하지 않을 경우 화면 표시에 문제가 발생할 수도 있다. 또한, 설정한 마임타입을 충실하게 따르는 다른 브라우저, 파이어폭스와 같은 브라우저에서는 마임타입이 정확하게 설정되어 있지 않으면 스타일 시트가 전혀 적용이 되지 않는다.
파이어 폭스에서 스타일이 적용되지 않을 때에 자바스크립트 콘솔을 열어서 확인해 보면 CSS파일의 마임타입이 text/css가 아니기 때문에 선언이 무시 되었다는 메시지가 나오는 경우가 있다. 구형의 WAS(Web Application Server) - 예를 들어서 톰캣 3.X - 에 CSS파일의 마임타입 선언이 안되어 있는 경우에 발생할 수 있는 문제이다.
마임타입이 제대로 선언되어 있는지 확인하기 위해서는 HTTP 헤더 정보를 확인해 보면 된다. 파이어 폭스의 웹디벨로퍼 확장기능의 Information > View Response Headers를 이용하여 HTTP 헤더 정보를 확인할 수 있다. 또한 Web-Sniffer와 같은 툴을 이용해서도 확인 할 수가 있다.
Content-Type: text/css
위와 같은 결과를 볼 수 있으면 정상적으로 선언이 된 것이고, 다른 것으로 선언이 되어 있으면 잘못 선언이 되어 CSS를 인식할 수 없는 경우이다.
마임타입을 설정하는 방법은 웹서버별로 모두 다르기 때문에 사용하고 있는 웹서버의 마임타입 설정 방법을 참조하면 된다. 웹서버 설정을 바꾸지 않고 웹 어플리케이션에서도 HTTP 헤더 정보를 보내는 방법으로 마입타입을 설정할 수 있다. 예를 들어서 CSS를 동적으로 생성하기 위해서 php파일을 CSS파일로 사용했다면, mystyle.php 상단에서 아래와 같이 HTTP 헤더 정보를 보내주면 CSS파일로 인식이 된다.
<?php
header("Content-type: text/css");
?>
body {
margin: 0;
padding: 0;
}
이렇게 만들어진 mystyle.php파일은 일반 CSS파일을 선언하듯이 <link>요소를 이용해서 페이지에 정상적으로 적용할 수 있다.
<link rel="styleshteet" type="text/css" href="mystyle.php" />
인라인 스타일 변환
메일과 같이 외부스타일을 지원하지 않는 환경을 위한 인라인 스타일 변환 프로그램이다.