[CSS] 웹사이트 기본적인 레이아웃 잡기

 CSS 기본적인 레이아웃 잡기

우리나라 사람이라면 모두 사용해봤을 네이버(naver)를 예로들어 레이아웃을 잡아보려고한다.

네이버를 기준으로 웹사이트의 기본적인 레이아웃을 잡을때 가장 먼저 div태그로 가로 행의 갯수를 잡는다.(사이트마다 상이하다.)

대충 딱 봤을때 3등분이 되어있다는 느낌이 강하게 느껴진다. (자세히 보지않아서 모르겠지만 더 세세하게 나눠져있을 수 있다.)

총 가로 3행으로 나눈것을 볼수있다.

이럴경우 

<div>1</div>

<div>2</div>

<div>3</div>

와 같이 화면의 가로 너비 100%를 차지하는 div태그로 나눌수있다. 컨텐츠를 직접 작성하기는 어려워 컨텐츠대신 숫자만 대입했다.

그 후 자세히 보면 가로로 3등분 되어있다는 느낌이 확든다. 공백 | 컨텐츠 | 공백

공백 | 컨텐츠 | 공백 으로 되어있는데 이것은 따로 div태그로 나눴다기보다는 데이터들을 담고있는 div태그에 가로 너비(width)를 지정하여 가운데 정렬 시킨것이다. 

가운데 정렬은 style 속성으로 margin: 0 auto; 를 작성하면 가운데 정렬이 된다.

margin: 0 auto; 은

margin-top, margin-bottom 은 0,

margin-right, margin-left 는 auto 이다.

이렇게 div태그로 가운데 정렬된 데이터를 자세히보면 컨텐츠사이에 여백이있고 2열로 나란히 정렬되어있다는 느낌이 든다. (개발자 도구로 확인하면 2열로 나뉜다.) 이것또한 div태그로 열을 지정해준것이다. 

네이버에서 지정한 크기와는 다르지만 가운데 정렬한 최상위 div태그의 너비(width)가 1000px이라고 한다면 그 최상위 div태그 안에 작성되는 div들의 너비 100%는  1000px 이다.

div태그는 기본적으로 display: block; 속성을 가지고있어서 기본적으로 2열이 아닌 2행이 만들어진다. 2열을 만들고자 한다면 2개의 div태그의 속성을 display: inline-block;으로 바꿔주고 각각의 열의 너비를 최상위 태그 1000px안에서 지정해준다.

위 사진을 참고하면 1000px중에 1번 열 div태그는 750px, 2번 열 div태그는 250px로 나눌 수 있다.

이렇게 나누어진 열안에 광고, 뉴스, 쇼핑, 로그인 등의 컨텐츠들이 담긴다.

사진에 표시된  1번, 2번, 3번, 4번 컨텐츠 또한 div태그로 만들어져 있다.

두개의 열 중 750px로 지정한 1열의 경우 div태그가 4개 작성되어 들어가있으며 각 태그는 다른 컨텐츠들을 담고있다.

앞서 말했던것과 마찬가지로 750px로 지정한 1열 div태그안에 작성되는 div태그들의 너비(width) 100%는 750px로 지정된 부모태그의 너비 750px이다.

1열안에서 또 열을 나누고싶다면 div태그의 속성을 inline-block으로 변경하고 너비를 지정해주면 된다.

하지만 위에 네이버의 경우 더이상 열을 나누지않고 4개의 div태그로 1열안의 4개의 행의 컨텐츠들을 나열하고있다.

추가적으로 각각의 브라우저마다 기본적으로 html과 body 태그에 속성으로 margin과 padding이 적용되어 있는 경우가 있다. 그러므로 내가 원하는 완벽한 레이아웃을 설정하기 위해서는 html과 body가 가지고 있는 margin, padding 속성을 0으로 초기화하자.

ex)

html,body {

   margin: 0;

   padding: 0;

}