HTML div span 태그 요소 활용하여 메인화면 레이아웃 나누기
오늘은 정말 html 수업을 신청한 이유라 할 수 있는 메인화면을 구성하는 방법에 대해서 대략적으로 알아봤습니다. 디테일한 부분은 아직은 배우지 않고 있습니다. 지금의 머리로는 아직 멀었기 때문이죠. 기초를 탄탄히 다지고, 원리를 완전히 깨우친 다음 들어가도 늦지 않을 것 같습니다.
메인화면의 기본 레이아웃을 구성하는 방법입니다. 이미 몇 번 앞시간에서 말씀드린적이 있는데, 큰 덩어리를 구성하는건 div, 그리고 작은 부분에 대한 그룹화는 span 이라고 합니다. div는 블록요소, span은 인라인 요소라고 알고 계시면 좋을 듯 합니다. 이 글에서는 TOP / CENTER / BOTTOM 이 세 단락으로 크게 나눠보는 연습을 해 볼 것입니다.
그룹핑 (Grouping) 이란?
먼저 그룹핑에 대해 알아야 겠습니다. 위에서 말씀드렸듯 레이아웃을 구성하기 위한 최소한의 작업 입니다. 통상적으로 제목에도 나와있는 div 또는 span 태그를 사용해서 그룹을 형성하는 것 입니다. 일종의 덩어리죠. 현존하는 모든 홈페이지와 사이트는 이러한 그룹들의 집합체라고 보시면 됩니다. 위의 태그들을 그대로 마크업 후 웹문서로 출력하면 어떻게 보일지 한번 보겠습니다.
그렇습니다. 이렇게 보여집니다. 말씀드렸듯 div는 블록요소이므로 자동으로 줄바꿈이 됩니다. 그러나 span 태그는 인라인 요소이기 때문에 줄을 바꾸려면 <br>과 같은 줄바꿈 태그를 사용해줘야 합니다. 이 점이 가장 큰 차이라 할 수 있습니다.
3단 레이아웃 구성
이제 div를 활용해서 간단한 레이아웃을 구성해 볼 것입니다. 코딩은 최대한 간결하게 마크업해서 최대의 능력을 끌어올리는게 최고라고 합니다. 여기에서는 어떤 식으로 작업이 이루어지는지 한번 살펴보겠습니다.
먼저 본문의 전체적인 영역이 되어야 할 부분을 만들어 줍니다. div 요소로 감싼 다음, id 값을 부여했습니다. 이름은 wrip 입니다.
방금 부여한 id 값인 wrap을 내부 스타일 방식으로 css 스타일을 만들어 주도록 합니다. 새롭게 생성한 wrap 이름을 가진 div는 크기가 0인 상태이므로, 가로 및 세로 크기를 지정해주고, 배경색도 넣어봤습니다. 이대로 출력해 보겠습니다.
네. 정상적으로 영역지정이 된 것을 알 수 있습니다. 그러면 이 영역을 3등분 하도록 하겠습니다.
순서는 먼저 본문인 body 영역에 div를 세개 먼저 만들어 줍니다. 그리고나서 이 각각의 div에 id 값을 부여합니다. 그 이후에 스타일을 지정해 줍니다. 제가 처음에 이 부분이 많이 햇갈렸습니다. 근데 딱 기본 형태를 알고나서 하나하나 만들어주면 편리하더군요.
1. div 기본형태 생성
2. div 에 id 값 부여
3. 스타일 지정
이 순서대로 하시면 어려움이 없으실 것입니다.
위의 마크업에 대한 웹 출력 결과 입니다. 보시는 것 처럼 3등분이 되어 있습니다. 중요한 포인트는, 최초 지정해둔 크기를 생각해야 한다는 것 입니다. 예를 들어, 가로가 1000px 이었다면, 이 영역을 생각해서 새로 생성하는 div도 초과하지 않도록 해야한다는 것 입니다. 세로 크기도 마찬가지 입니다. 이 부분만 신경쓴다면, 이제 div 레이아웃 영역 나누기는 어렵지 않을 것 입니다. 끝.
"친절한효자손 취미생활" 을 검색!
