디자인 된 페이지를 html로 코딩할 때 박스가 모여 하나의 페이지를 이룬다고 생각하면 된다.

 


모든 웹 사이트들은 이 박스형태의 연속이며 박스를 다루고 배치하는 과정은 html과 css의 핵심이다.

네이버의 메인페이지만 보더라도 전부 박스형태로 되어있으며

박스안에 박스들이 세밀하게 배치되어 하나의 페이지를 이루는 것이다.

 

 

 

 

 

 

 

박스는 padding영역 /border영역/ margin영역/ 컨텐츠영역으로 나누어져있다.

 

이 개념을 머릿속에 가지고 있어야 하며 실제로 박스에 선이 그어져 있지 않다하더라도 (border=0)

항상 이런 구조로 되어있다고 생각할 수 있어야 한다.

 

때문에 포토샵에서 디자인된 페이지를 보고 사이즈에 맞춰 코딩을 할 때 유념해야 하는게
width값과 height값은 border값과 padding를 빼고 계산해야 한다는거다.

 

 

 

예를들어 위처럼 가로세로 500x137 짜리 크기의 박스가 있다고 한다면,

border두께인 4픽셀씩 양쪽 8픽셀, padding값인 20픽셀씩 양쪽 40픽셀해서
width값이 500-48=452px, height값이 137-48=89px이 되는것이다.

 


이걸 html과 css로 옮겨보면, 아래와 같다.

 

 

 

 

그럼 포토샵과 브라우저의 사이즈가 일치하는 박스가 그려진다.

 

 

 


작업할때 1픽셀이라도 틀리면 전체적인 레이아웃이 어긋나므로 항상 계산기를 옆에 놓고 이런것들을

계산해가며 해야 하는것이다.

 

 

 

 


자, 그런데 여기서 문제가 있다.

분명 문단을 감쌀때는 <p>를 사용하는게 정석인데 위에서 <div>를 사용한 것이다.
물론 결과물은 같지만 시멘틱한 웹을 위해 텍스트에는 <p>를 써주는게 맞다.


그런데 어째서 p태그를 사용하지 않았을까?

p태그는 문단을 나눠주는 기능을 하기때문에 기본적으로 위, 아래 공백(마진)이 들어가 있다.

 

 

<ul><li>를 사용하면 텍스트앞에 디자인에 전혀 도움안되는 무식한 점이 생기는것처럼 일부 태그의 속성에는

개발자가 지정해놓은 디폴트값이 들어가 있는것이다.

그렇지만 디자인 되어있는걸 보고 그대로 코딩을 할 때 이 공백까지 계산하여 가로, 세로, 마진, 패딩을 넣기는

사실 무리가 있다.

 

 

그래서 이때 필요한게 바로 reset css이다.

스타일의 처음 시작에 p{margin:0;} 이런식으로 넣으면 p태그에 들어가 있던 위,아래 공백이 리셋되면서

코딩시 div와 똑같이 기본공백을 계산할 필요가 없어지는 것이다.

 

p태그 뿐만아니라 수 많은 태그들의 필요없는 기본값을 이런식으로 초기화 시킨 후 사용하기 위해

많은 사용자들이 자신에 맞게 만들어 모아 놓은것들이 있다.
 
그 중에서 보편적으로 많이 사용되는 것은

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

이 사람이 만들어놓은 리셋 css인데 굳이 이걸 사용할 필요는 없지만 
작업하면서 자신에게 편리한 방향으로 계속 수정하여 자신만의 리셋 css를 정리하면 되는것이다.

 

 

 

이 reset css를 사용하는 방법은 문서를 긁어다 에디트플러스에 넣고

에디트플러스에서 파일형식을 css로 저장해 reset.css 파일하나를 만든 후

html에서 링크로 스타일을 불러오면 되는것이다.

 

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>

이때 css파일 위치는 html파일이 있는 곳에서 css폴더하나를 만들고 그 안에 넣어야 위의 경로와 맞게 링크된다.

 

 

 

앞으로 html 시작 시 반드시 스타일의 처음에 넣어서 필요없는 css를 리셋시키자.

 


 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8"/>
<title>박스모델연습</title>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>
<style type="text/css">

</style>
</head>

 

<body>
</body>

 


 

이렇게 리셋시킨 후 <div>대신 이제 <p>태그를 사용하여 마크업하더라도 결과물이 원하는대로 출력될 것이다.

 

 

 

위 사이트에서 저장해서 만든 리셋 css파일인데 필요한 분은 받아서 사용하시길~

 

css.zip

 

 

 

 

 
 
 
 

 

 

Posted by Y&S