CSS 디폴트 값들 재설정하기

이제는 웹표준을 지키며 작업을 하는게 일반화되어서, IE가 아닌 다른 브라우저(Firefox, safari, Opera, Chrome)에서도 제대로 보여지도록 하여야 한다는 요구사항이 언제나 약방의 감초처럼 계약 사항에 들어 있습니다.

 

웹페이지 제작시 웹 표준에 따라서 작업을 하더라도 서로 다른 웹 브라우저에서 동일하게 보이지 않는 경우가 많이 있습니다. 웹 표준을 따르는 것이 서로 다른 브라우저에서 동일한 화면을 보여주는 것을 보장하는 것은 아닌 것입니다.

 

각각의 브라우저들이 서로 다른 렌더링 방식을 가지고 있거나, 표준에 대한 지원율도 차이를 보입니다.

 

웹페이지를 만들면서 웹 디자이너와 개발자들이 각기 다른 브라우저에서 웹페이지가 동일하게 보이도록 하는데 많은 시간을 들이게 됩니다.(퍼블리싱을 전문으로하는 사람이 있는 곳도 있다는 예기를 온라인상으로 많이 들었지만 그런 환경을 접해 볼 기회는 아직 없었습니다.)

 

이를 위한 일반적인 해결 방법으로는 CSS를 사용하여 각기 다른 엘리먼트, 마진, 패딩, 폰트 등의 디폴트 스타일을 지우고 무효화 하는 것입니다. 마진과 패딩등을 0으로 설정하여 기본 설정 없이 모든 상황이 동일한 상태에서 설정을 다시 시작하는 것입니다.

 

이를 위해서는 단순히 margin과 padding을 0으로 설정하는 것으로는 충분하지 않습니다. 보더, 폰트 사이트등 고려해야할 항목들이 더 많으며, 특정 엘리먼트에만 해당하는 사항들도 있기 때문입니다.

 

필요한 기능을 자신이 만들어서 사용해도 좋지만 이미 잘 만들어진게 있다면 가져와 사용하는것도 나쁘지 않습니다.

 

먼저 모든 엘리먼트를 초기화하여 0부터 새로 시작한다면, Eric Meyer의 CSS 리셋이 있습니다.

 

다음 주소에서 찾을 수 있습니다.

 

http://meyerweb.com/eric/tools/css/reset/

 

소스에 나와 있는것처럼 라이센스가 없습니다.(public domain) 마음대로 사용할 수 있다고 합니다.

 

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
} 
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

 

이렇게 모든 설정을 초기화 하고 시작하는 것도 좋은 방법이지만, 처음부터 모두 다시 만들려면 작업량이 많아지는게 사실 입니다(물론 나만의 것을 한번 만들어 두면 다음 부터는 재사용이 가능하겠습니다).

 

그래서, 각 브라우저에서 동일한 부분은 그대로 두고, 차이를 보이는 부분만 초기화하는 설정 방법도 있습니다. Nicolas Gallagher 와 Jonathan Neal 에 의해 만들어진 Normalize.css가 이러한 동작을 합니다.

 

이 스트일 시트는 Chrome, Firefox, Opera, Safari 6+, IE 8+ 를 지원하고, 라이센스는 MIT License 입니다. (MIT 라이센스는 이 소프트웨어를 사용함에 있어 자신의 소스 공개 없이 수정, 배포, 상업적 이용 등이 가능합니다. 다만, 원래 저작권 표시 및 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 하고, 저자 또는 저작권자는 소프트웨의에 대한 아무런 책임을 지지 않습니다.)

 

다음 사이트에서 찾을 수 있습니다. http://necolas.github.io/normalize.css/

 

CDN은 다음 주소입니다.

 

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css

 

웹 표준은 따른다는 것은 단순히 DTD에 맞는 엘리먼트를 사용것 뿐만 아니라 각 엘리먼트들을 용도에 맞게 적절히 사용하는 것도 포함됩니다. 그래서 가장 많이 이야기 되는것이 페이지 레이아웃을 잡을때 테이블을 엘리먼트 사용하던 관행일 것입니다.

 

이제는 주로 div 태그를 사용하고, CSS 의 float 속성을 사용해 화면에 배치하게 됩니다. 이때 화면상의 엘리먼트들의 실제 차지하는위치와 크기를 알아보기 위해 다음 스타일을 사용할 수 있습니다.

 

outline: solid 1px red;

 

outline 은 border와는 다르게 실제 영역을 차지하지 않으므로 레이아웃을 흩트러뜨리지 않고, 경계를 확인할 수 있습니다.

 

다른 방법으로는 브라우저에 있는 CSS 디버깅 기능을 사용해는 것입니다. IE, Firefox, Chrome 은 모드 F12 키를 눌러 개발자 도구를 실행할 수 있습니다.

 

IE는 개발자 도구의 DOM 탐색기(IE11) 탭에서 스타일을 확인하고 변경해서 적용해 볼 수 있습니다. Firefox 는 검사기 탭에서 같은 작업을 할 수 있습니다. Firefox 는 HTML 소스에 포커스를 가져가면 뷰화면에 그 태그 영역이 바로 표시되므로 더 쉽게 확인이 가능합니다. Chrome에서는Elements 탭에서 같은 작업을 할 수 있으면 Firefox 처럼 소스에 포커스를 가져가면 뷰 화면에 그 영역이 표시됩니다.