웹페이지 작업시 가장 먼저 하게 되는 것이 웹페이지에 대한 설계인데 미리 종이나 포토샵을 이용해서 그림을 그려서 전체적인 규모와 배치를 하게 됩니다. 포토샵을 이용하면 색상과 효과를 쉽게 적용할 수 있어서 편리하므로 대부분의 설계단계에서는 포토샵을 이용합니다.
레이아웃에 있어서 피해야할 것은 전통적으로 페이지레이아웃을 테이블태그를 이용했는데 이 방식은 CSS가 배우기 어렵고 브라우저마다 특성이 있어서 페이지를 나타내는 방식이 다르다보니 한동안 레이아웃의 표준으로 자리를 잡았었고 아직도 이방식을 이용하고 있습니다. 하지만 컬럼을 하나 추가한다든가 좌우의 컬럼을 서로 바꾼다든가 하는 페이지를 수정한다거나 할때 수정이 아니라 처음부터 다시 작업하는게 나을 정도로 테이블레이아웃 방식은 수정하기가 어렵습니다. 하지만 CSS는 몇개의 글자 수정만으로 바로 가능하게 되어있습니다.
또한 금해야할 것은 프레임방식의 레이아웃입니다. 이것은 모니터화면에 하나의 페이지가 나오는 것처럼 보이지만 사실은 여러 프레임이 모여서 하나의 화면에 보이도록한 것입니다. 즉 웹페이지가 중복되어 나오는 것과 마찬가지라서 이러한 페이지를 프린트한다고 했을때 여러번의 인쇄를 해야하므로 번거롭습니다.
페이지레이아웃은 대부분의 경우 3 파트로 나뉩니다. header, content, footer입니다. header에는 로고나 대표이미지가 들어가거나 네비게이션바, 검색창이 들어갑니다. content는 side bar와 본문 article이 들어가고 footer에는 2차 네비게이션바와 카피라이트 부분이 들어가는게 보통입니다. 하지만 요즘의 추세는 이 footer부분에 site map과 같은 내용이 들어가기도 하고 중요한 추가적인 content가 들어가기도 합니다.
html로 코딩시 가장 먼저하는 것이 div의 설정입니다. 건물로 치자면 외벽공사와 같습니다. div을 설정할때 css의 타겟을 정하기 위해서 id나 class로 이름을 정하게 되는데 보통 상단부분은 header 본문은 content 하단은 footer라고 이름을 사용하는데 이것은 html5 처음 설계될때 이전에 사용하던 방식의 div태그가 아닌 새로운 태그를 만들었기 때문에 웹디자이너들이 html5가 사용되기전에 미리 용어를 차용하기 시작하면서 보편화되었습니다. html5는 div이라는 태그와 같은 개념이지만 각 파트별로 용어를 다르게 정의하고 있습니다. 이전의 태그방식이 <div id="header">...</div>이었다면, html5의 태그방식은 <header id="mainHeader">..</header>처럼 header가 바로 태그가 되도록 하였습니다. 최근에 모든 브라우저들이 거의 동시에 업그레이드 되면서 html5를 지원하게 되었지만 아직은 그 이전 버전의 브라우저가 대세이므로 이러한 태그방식을 사용하려면 좀 더 기다려야할 것입니다.
그러면 간단한 레이아웃을 만들어보겠습니다.
레이아웃에 있어서 피해야할 것은 전통적으로 페이지레이아웃을 테이블태그를 이용했는데 이 방식은 CSS가 배우기 어렵고 브라우저마다 특성이 있어서 페이지를 나타내는 방식이 다르다보니 한동안 레이아웃의 표준으로 자리를 잡았었고 아직도 이방식을 이용하고 있습니다. 하지만 컬럼을 하나 추가한다든가 좌우의 컬럼을 서로 바꾼다든가 하는 페이지를 수정한다거나 할때 수정이 아니라 처음부터 다시 작업하는게 나을 정도로 테이블레이아웃 방식은 수정하기가 어렵습니다. 하지만 CSS는 몇개의 글자 수정만으로 바로 가능하게 되어있습니다.
또한 금해야할 것은 프레임방식의 레이아웃입니다. 이것은 모니터화면에 하나의 페이지가 나오는 것처럼 보이지만 사실은 여러 프레임이 모여서 하나의 화면에 보이도록한 것입니다. 즉 웹페이지가 중복되어 나오는 것과 마찬가지라서 이러한 페이지를 프린트한다고 했을때 여러번의 인쇄를 해야하므로 번거롭습니다.
페이지레이아웃은 대부분의 경우 3 파트로 나뉩니다. header, content, footer입니다. header에는 로고나 대표이미지가 들어가거나 네비게이션바, 검색창이 들어갑니다. content는 side bar와 본문 article이 들어가고 footer에는 2차 네비게이션바와 카피라이트 부분이 들어가는게 보통입니다. 하지만 요즘의 추세는 이 footer부분에 site map과 같은 내용이 들어가기도 하고 중요한 추가적인 content가 들어가기도 합니다.
html로 코딩시 가장 먼저하는 것이 div의 설정입니다. 건물로 치자면 외벽공사와 같습니다. div을 설정할때 css의 타겟을 정하기 위해서 id나 class로 이름을 정하게 되는데 보통 상단부분은 header 본문은 content 하단은 footer라고 이름을 사용하는데 이것은 html5 처음 설계될때 이전에 사용하던 방식의 div태그가 아닌 새로운 태그를 만들었기 때문에 웹디자이너들이 html5가 사용되기전에 미리 용어를 차용하기 시작하면서 보편화되었습니다. html5는 div이라는 태그와 같은 개념이지만 각 파트별로 용어를 다르게 정의하고 있습니다. 이전의 태그방식이 <div id="header">...</div>이었다면, html5의 태그방식은 <header id="mainHeader">..</header>처럼 header가 바로 태그가 되도록 하였습니다. 최근에 모든 브라우저들이 거의 동시에 업그레이드 되면서 html5를 지원하게 되었지만 아직은 그 이전 버전의 브라우저가 대세이므로 이러한 태그방식을 사용하려면 좀 더 기다려야할 것입니다.
그러면 간단한 레이아웃을 만들어보겠습니다.
<body>
<div class="wrapper">
<div class="header">
<!--Header-->
</div>
wrapper라는 div이 3가지 요소를 감싸고 있습니다. 이것은 요소 전체를 포함시켜서 전체내용의 위치를 정하기 위함입니다. wrapper가 어느 위치에 있느냐에 따라서 그 안의 내용도 따라가게 되어있기 때문입니다. 일반적으로 화면의 중앙에 전체 내용이 위치하므로 중앙정렬을 하고 사이즈를 정하게 됩니다. 이를 CSS로 표현하자면 다음과 같습니다.
width는 가로의 폭을 정하는 것이고 margin은 div의 외부 공간을 정하는 속성인데 위와같이 하면 div이 중앙정렬됩니다.
예전버전의 IE같은 경우 margin: auto라는 속성을 인식하지 못해서 다음과 같이 사용하기도 했었습니다.
<div class="wrapper">
<div class="header">
<!--Header-->
</div>
<div class="content">
<!--Content-->
</div>
<div class="footer">
<!--Footer-->
</div>
</div>
</body> wrapper라는 div이 3가지 요소를 감싸고 있습니다. 이것은 요소 전체를 포함시켜서 전체내용의 위치를 정하기 위함입니다. wrapper가 어느 위치에 있느냐에 따라서 그 안의 내용도 따라가게 되어있기 때문입니다. 일반적으로 화면의 중앙에 전체 내용이 위치하므로 중앙정렬을 하고 사이즈를 정하게 됩니다. 이를 CSS로 표현하자면 다음과 같습니다.
.wrapper {
width: 920px;
margin: 0 auto;
} width는 가로의 폭을 정하는 것이고 margin은 div의 외부 공간을 정하는 속성인데 위와같이 하면 div이 중앙정렬됩니다.
예전버전의 IE같은 경우 margin: auto라는 속성을 인식하지 못해서 다음과 같이 사용하기도 했었습니다.
body {
text-align: center;
}
.wrapper {
width: 920px;
margin: 0 auto;
text-align: left;
}
text-align은 글자를 정렬하는 속성인데 IE가 의도와는 다르게 인식을 해서 이런 방식을 사용해서 중앙정렬했습니다.
text-align은 글자를 정렬하는 속성인데 IE가 의도와는 다르게 인식을 해서 이런 방식을 사용해서 중앙정렬했습니다.
더보기
'부트스트랩.CSS.JS/CSS2.1' 카테고리 관련글
