4. CSS 코딩하기

웹 & IT/웹표준 HTML, CSS & PHOTOSHOP

4. CSS 코딩하기

유지아빠 2010. 12. 7. 09:59

4. CSS 코딩하기

이전장에서는 HTML 과 포토샵을 이용해서 문서에 대한 구조를 갖췄습니다.

이번장은 CSS을 이용하여, 지금까지 만들어진 HTML 문서에 디자인을 입히는 작업을 해보도록 하겠습니다.

먼저 CSS 초기화 작업을 하겠습니다.

CSS 초기화 작업이 중요한 이유는 몇 가지가 있습니다.

우선 브라우저마다 조금씩 CSS 처리하는 방식에서 차이가 있습니다.

그래서 모든 브라우저에서 동일한 값을 적용시키는 것이 디자이너와 프로그래머들이 여간 힘든 일이 아닙니다. 특히 CSS 초기화는 IE6을 위한 사이트 제작 시 반드시 필요한 일이라고 할 수 있습니다.

이렇게 초기화를 한 후에도 한국에서 많이 사용하는 IE6을 위해서는 좀 더 많은 트릭(Hack 이라고 합니다.)을 사용해야 하는 경우도 많습니다.

그래서 CSS 초기화는 어떻게 하는지에 대해서 살펴보도록 하겠습니다.

CSS 초기화 하기

CSS 초기화는 생각보다 간단합니다.

가장 많이 사용하는 CSS 구문들의 값을 0 으로 만들어 버리는 것입니다.

IE6 인 경우에는 마진과 패딩값이 다른 브라우저에 비해 다르게 해석해서 처리하기 때문에 가장 많이 사용하는 태그들의 값을 0으로 만드는 것입니다.

이러한 태그들의 값을 margin:0 ; padding:0; border:0; 이런 식으로 처리해 버리는 것입니다.

가장 간단하게 CSS를 초기화 하는 방법은 다음과 같습니다.

body,div,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,th,td {margin:0;padding:0;}

가장 일반적으로 많이 쓰이는 태그들에 대한 마진과 패딩 값을 0으로 줘버리는 것입니다.

그리고 인터넷에서 보면 인기있는 CSS 초기화 파일들이 있습니다.

대표적인 것 중 하나가 야후에서 만들어진 것인데 한번 보도록 하겠습니다.

이 CSS 파일은 http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css 여기서 다운로드 가능합니다.

Code licensed under the BSD License:

http://developer.yahoo.net/yui/license.txt

version: 2.6.0

html{color:#000;background:#FFF;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

fieldset,img{border:0;}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}

li{list-style:none;}

caption,th{text-align:left;}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}

q:before,q:after{content:'';}

abbr,acronym{border:0;font-variant:normal;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}

input,textarea,select{*font-size:100%;}

legend{color:#000;}

del,ins{text-decoration:none;}

여기서도 마찬가지로 가장 많이 사용하는 태그의 마진과 패딩값은 0으로 설정했습니다.

나머지 값들도 보면 거의 모든 값을 0으로 조정하거나, normal로 조정되어 있는 것을 볼 수 있습니다. 또는 None 이라는 값으로 모든 설정을 초기화 한 것을 볼 수 있습니다.

이 CSS 파일을 다운로드 받으신 후 적용 시키면 바로 모든 CSS 값들이 초기화 되어 버립니다.

이 CSS 파일은 CSS파일을 만들기 전에 적용시켜도 되지만, 현재 페이지에 대한 CSS 를 전부 적용시킨 후 IE6로 테스트하기 바로 전에 적용시켜도 좋습니다.

일단 CSS 파일을 만들 때는 가장 웹 표준이 잘 지켜지는 브라우저를 대상으로 작업을 먼저 하는 편이 좋습니다.

그 이후 IE6 또는 IE7 에 맞춰서 조정을 해 주는 편이 작업 능률을 올릴 수 있습니다.

현재 IE 버전에서는 8 버전이 가장 웹표준에 그나마 근접하고 있고 Firefox 는 3.X 버전대 사파리는 4.x 버전대 구글 크롬은 6.x 버전 그리고 오페라는 9.x 대 버전이 가장 최신의 브라우저이므로 해당 브라우저로 테스트 해 보면서 CSS 값을 조정하는 것이 좋습니다. 저는 주로 IE8 로 먼저 작업물을 확인하고 Firefox 에서 다시 한번 확인해서 값을 조정합니다. 그렇게 하면 다른 브라우저에서는 거의 작업했던 결과와 거의 일치하게 됩니다.

CSS를 HTML문서에 적용하는 방법은 3가지 방법이 있습니다.

HTML 문서내에 직접 입력하는 방법, Link를 통해서 CSS를 별도의 파일로 저장해서 불러오는 방법 그리고 link 와 동일하지만 import 를 이용해서 불러오는 방법 이렇게 3가지 방식이 있습니다.

첫번째 방법인 문서내에 직접 입력하는 방법은 HTML 문서를 잘라서 사용할 때 사용하는 방법입니다.

HTML 문서인 경우에도 몇 개의 모듈로 잘라서 사용하게 됩니다.

즉 HTML 문서를 document.html 이란 문서가 있으면, a.html b.html c.html 이렇게 3개 이상의 문서로 분리를 해서 필요한 부분만 내용을 수정해서 사용하게 되면 작업 속도가 굉장히 빨라지고 효율적이 됩니다.

HTML 문서내의 코드가 50 라인 이하이면 단일 HTML 문서로 작업하는 것이 좋지만 100라인이 넘어가기 시작하면, HTML 코드 자체가 워낙 방대해 지기 때문에 잘라서 사용하는 것이 좋습니다.

그렇게 되면 CSS 는 <head>와 </head> 사이에 위치하기 때문에 a.html 이란 문서 하나만 수정하더라도 전체 HTML 문서에 적용이 되는 것입니다.

예를 들어 보겠습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>초보자를 위한 예제사이트</title>

</head>

<body>

<ul>

</ul>

</div>

è 여기까지 문서를 head.html 이라 해서 저장합니다.

<ul>

<li> 찾아오시는길</li>

</ul>

</div>

è 여기까지 문서를 sub.html 이라 해서 저장합니다.

<h1> Company Information</h1>

<h3> 회사연력 / History </h3>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

</div>

è 이 부분은 회사소개에서 내용이 들어가는 곳이기 때문에 따로 설명하겠습니다.
Company.html 이라고 저장을 하는데 아래에 자세한 내용을 설명하겠습니다.

</body>

</html>

è 이 부분은 footer.html 이라고 해서 저장하겠습니다.

Company.html 은 다음과 같이 정리 가능합니다.

<h1> Company Information</h1>

<h3> 회사연력 / History </h3>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

</div>

길었던 HTML 코드가 아주 간편해졌습니다.

위의 코드는 ASP 또는 .net 에서 사용하는 include 방식이며, PHP 코드에선  이런 코드를 <? include “../head.html”; ?> 이렇게 사용해야 합니다.

즉 이렇게 모듈화를 함으로써, 해당 HTML 문서들을 수정할 때, 모든 코드들을 볼 필요 없이 해당 코드만 수정하면 되기 때문에 작업능률이 훨씬 빠를 수 있습니다.

CSS 파일을 직접 HTML 문서내에 삽입하는 경우는 head.html 문서 내에 <head> 와 </head> 태그 사이에 넣어줌으로써, 향후 CSS 문을 추가하거나 수정할 때 head.html 만 수정해 주면 됩니다.

하지만 이런 방법은 CSS 문법 구조가 복잡해 지면 전체 코드의 길이도 길어지기 때문에 나중에 head.html 문서를 수정할 때 복잡해 질 수 있습니다.

그래서 보통은

이렇게 link를 통해서 css 문서를 불러오는 방법을 사용하게 됩니다.

이렇게 하는 방법의 장점은 CSS 문서 단독으로 수정과 편집을 할 수 있다는 것과 나중에 추가적인 CSS 문서가 있으면 아래와 같이 추가 가능하다는 것입니다.

이렇게 각각의 CSS 문서들을 다중으로 불러 올 수 있습니다.

특히 CSS는 해당 HTML 문서를 인쇄할 때 강력한 기능을 발휘합니다.

보통 HTML 문서를 출력할 때 모든 페이지가 다 출력되는데 반해 CSS 로 print.css 문서를 만들게 되면 CSS 에서 지정한 요소들만 출력하게 만들 수 있습니다.

위와 같은 식으로 media 를 지정해 줌으로써 고객들이 해당 정보를 인쇄 할 경우 정확하게 원하는 내용만 인쇄가 되는 것입니다.

저작자표시 비영리 변경금지

'웹 & IT > 웹표준 HTML, CSS & PHOTOSHOP' 카테고리의 다른 글

웹표준 그리고 HTML5 & CSS3 (0)	2011.12.26
CSS 박스 모델 이해하기 (10)	2010.12.07
HTML 코딩 다시 확인하기 (2)	2010.12.01
오늘의 강좌 \| Save for web 옵션 알아보기 (0)	2010.12.01
3. 포토샵 파일을 잘라내자 (0)	2010.11.30

현재글4. CSS 코딩하기

제주에서 IT관련 프리랜서로 활동하는 유지아빠입니다. 책도 출간했고 지금도 쓰고 있습니다.

css, 폰트, 웹기획, 포토샵, 오식이, 웹표준, HTML5, jQuery, D800, 워드프레스, CSS3, 자바스크립트, 맥북프로, 어도비, 시그마, 제주, 책, 니콘, 강의자료, 디자인,

Today :
Yesterday :

유지아빠가 살아가는 세상