[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태그의 속성을 displa