이전 글에서 레이아웃의 종류로 고정폭과 유동폭에 대해서 알아보았습니다. 대부분의 블로그나 웹사이트에서는 고정폭 레이아웃을 사용합니다. 요즘은 모니터화면이 와이드로 나오기 때문에 유동폭 레이아웃을 사용하면 컨텐트가 화면에 꽉 차게 나오므로 글을 읽기가 힘들죠. 특수한 경우, 예를 들면 포털 사이트에서 검색어를 입력하고 엔터키를 치면 들어가는 페이지의 경우는 유동폭 레이아웃을 사용합니다. 컨텐트가 좌우로 꽉차게 나오죠. 하지만 화면을 줄이다보면 일정 범위까지는 컨텐트 영역이 좌우로 줄어들지만 그 범위를 넘어서면 고정폭으로 전환되어 더이상 줄어들지 않습니다.
이번 글에서는 고정폭 2단(Two Columns)과 3단 레이아웃에 대해서 설정하는 방법을 알아봅니다. 2단 레이아웃은 컬럼이 두개만 있기때문에 CSS에서 간단하게 배치할 수 있는데 3단의 경우는 여러가지 방법을 사용할 수 있습니다.
첨부파일의 압축을 풀고 html파일을 클릭하면 웹브라우저 화면에 위와같이 나옵니다. CSS에서 컨텐트와 사이드바를 float:left; 속성을 적용한 결과입니다.
두개의 파일을 텍스트에디터에 열면 위와같이 나옵니다. 위 코드에서 시작하여 앞으로 유동폭 레이아웃까지 진행됩니다. html부분을 보면 크게 4부분으로 나옵니다. CSS에서는 고정폭이므로 width가 정해지고 중앙에 배치하기 위해서 margin:0 auto; 를 적용했습니다. CSS에서 패딩과 마진, 테두리의 값은 블럭요소의 폭에 포함되므로 width가 딱 떨어지는 수치가 아닙니다. header에서 패딩 10픽셀 양쪽 적용, 테두리 1픽셀 양쪽 적용되므로 이 수치는 22픽셀이고 778픽셀을 더하면 800픽셀이 됩니다. 컨텐트나 사이드바, footer도 마찬가지입니다.
html 페이지는 검색엔진이 순서대로 검색을 하기 때문에 중요한 내용이 있는 컨텐트 영역이 먼저 나오는게 좋습니다.그런데 어떤 사정에 의해서 사이드바가 먼저 나와야할 경우 1과 2처럼 배치되는데 CSS에서 3과 4처럼 둘다 float:left;로 되어있다면 사이드바가 좌측에 배치됩니다. html에서 사이드바가 먼저 나오더라도 레이아웃에서는 우측으로 보내고 싶다면 CSS에서 사이드바의 속성을 float:right;로 하면 됩니다. 두개의 컬럼이 있는 레이아웃은 어렵지 않게 원하는대로 배치할 수 있습니다.
압축파일을 풀고 텍스트에디터에 열면 사이드바가 하나 추가되었고 CSS에서도 이에 대한 설정이 되어있습니다. html파일을 웹브라우저에 열면 CSS에서 모두 float:left;로 되어있기 때문에 순서대로 배치됩니다. 3단 레이아웃에서 많이 사용하는 방법인 사이드바를 양쪽에 배치하려면 4의 사이드바 a를 5의 위치로 이동함 하면 됩니다. 하지만 검색엔진 최적화를 위해서는 컨텐트 영역을 항상 상위에 올려놓는 것이 좋습니다. 그래서 html은 그대로 두고 CSS만으로 레이아웃을 변경하려고 합니다.
html에서 wrapper라는 id의 이름으로 div태그를 만들어 컨텐트와 사이드바 a를 감싸고 CSS에서 이 wrapper에 대해서 float:left;를 적용하고 컨텐트는 float:right;를 사이드바 a는 float:left;를 적용합니다. 사이드바 b는 float:left;를 적용하거나 float:right;를 적용해도 같습니다. 또하나의 방법은 절대위치를 사용하는 방법입니다.
html에서 컨텐트와 두개의 사이드바를 wrapper로 감싸고 CSS에서는 wrapper를 상대위치로 설정합니다. 사이드바는 둘다 절대위치로 설정하고 사이드바 a는 left:0px;로하면 부모요소인 wrapper를 기준으로 좌측끝에 위치하고 사이드바 b는 right:0px;로 하면 우측끝에 위치하게 됩니다. 컨텐트영역은 float:left;로 설정하고 사이드바의 공간을 비워줘야하기 때문에 앙쪽 마진을 사이드바의 공간만큼 설정하면 다음과 같이 나옵니다.
사이드바의 위치를 서로 바꾸려면 다음과 같이 합니다.
사이드바 a는 right로 사이드바 b는 left로 속성을 서로 교체해주면 간단하게 위치가 바뀝니다.
이번 글에서는 고정폭 2단(Two Columns)과 3단 레이아웃에 대해서 설정하는 방법을 알아봅니다. 2단 레이아웃은 컬럼이 두개만 있기때문에 CSS에서 간단하게 배치할 수 있는데 3단의 경우는 여러가지 방법을 사용할 수 있습니다.
1. 고정폭 2단 레이아웃
fixed-layout.zip첨부파일의 압축을 풀고 html파일을 클릭하면 웹브라우저 화면에 위와같이 나옵니다. CSS에서 컨텐트와 사이드바를 float:left; 속성을 적용한 결과입니다.
두개의 파일을 텍스트에디터에 열면 위와같이 나옵니다. 위 코드에서 시작하여 앞으로 유동폭 레이아웃까지 진행됩니다. html부분을 보면 크게 4부분으로 나옵니다. CSS에서는 고정폭이므로 width가 정해지고 중앙에 배치하기 위해서 margin:0 auto; 를 적용했습니다. CSS에서 패딩과 마진, 테두리의 값은 블럭요소의 폭에 포함되므로 width가 딱 떨어지는 수치가 아닙니다. header에서 패딩 10픽셀 양쪽 적용, 테두리 1픽셀 양쪽 적용되므로 이 수치는 22픽셀이고 778픽셀을 더하면 800픽셀이 됩니다. 컨텐트나 사이드바, footer도 마찬가지입니다.
html 페이지는 검색엔진이 순서대로 검색을 하기 때문에 중요한 내용이 있는 컨텐트 영역이 먼저 나오는게 좋습니다.그런데 어떤 사정에 의해서 사이드바가 먼저 나와야할 경우 1과 2처럼 배치되는데 CSS에서 3과 4처럼 둘다 float:left;로 되어있다면 사이드바가 좌측에 배치됩니다. html에서 사이드바가 먼저 나오더라도 레이아웃에서는 우측으로 보내고 싶다면 CSS에서 사이드바의 속성을 float:right;로 하면 됩니다. 두개의 컬럼이 있는 레이아웃은 어렵지 않게 원하는대로 배치할 수 있습니다.
2. 고정폭 3단 레이아웃
압축파일을 풀고 텍스트에디터에 열면 사이드바가 하나 추가되었고 CSS에서도 이에 대한 설정이 되어있습니다. html파일을 웹브라우저에 열면 CSS에서 모두 float:left;로 되어있기 때문에 순서대로 배치됩니다. 3단 레이아웃에서 많이 사용하는 방법인 사이드바를 양쪽에 배치하려면 4의 사이드바 a를 5의 위치로 이동함 하면 됩니다. 하지만 검색엔진 최적화를 위해서는 컨텐트 영역을 항상 상위에 올려놓는 것이 좋습니다. 그래서 html은 그대로 두고 CSS만으로 레이아웃을 변경하려고 합니다.
html에서 wrapper라는 id의 이름으로 div태그를 만들어 컨텐트와 사이드바 a를 감싸고 CSS에서 이 wrapper에 대해서 float:left;를 적용하고 컨텐트는 float:right;를 사이드바 a는 float:left;를 적용합니다. 사이드바 b는 float:left;를 적용하거나 float:right;를 적용해도 같습니다. 또하나의 방법은 절대위치를 사용하는 방법입니다.
html에서 컨텐트와 두개의 사이드바를 wrapper로 감싸고 CSS에서는 wrapper를 상대위치로 설정합니다. 사이드바는 둘다 절대위치로 설정하고 사이드바 a는 left:0px;로하면 부모요소인 wrapper를 기준으로 좌측끝에 위치하고 사이드바 b는 right:0px;로 하면 우측끝에 위치하게 됩니다. 컨텐트영역은 float:left;로 설정하고 사이드바의 공간을 비워줘야하기 때문에 앙쪽 마진을 사이드바의 공간만큼 설정하면 다음과 같이 나옵니다.
사이드바의 위치를 서로 바꾸려면 다음과 같이 합니다.
사이드바 a는 right로 사이드바 b는 left로 속성을 서로 교체해주면 간단하게 위치가 바뀝니다.
더보기
'부트스트랩.CSS.JS/CSS기초' 카테고리 관련글
