날나리 강좌. ㅋ 레이아웃 짜기 Row편

날나리 강좌. ㅋ 레이아웃 짜기 Row편 정보

HTML 날나리 강좌. ㅋ 레이아웃 짜기 Row편

본문

웹문서를 작성하는데는, 더불어 레이아웃의 기초를 닦는데는 좋은 wysiwyg 에디터들도 있겠지만 이러한 것들은 도움이 되지 않고 텍스트 편집기가 최고입니다. wysiwyg 에디터들을 사용할 수록 눈뜬 장님이 됩니다.

보통 많이 사용하는 3개의 행으로 레이아웃을 짭니다. 반드시 모든 브라우저가 동일하게 처리되기를 바라며 html dtd를 삽입합니다.

<!doctype html>

<html>

<body>

<div> header </div>

<div> content </div>
<div> footer </div>

</body>

</html>

다 했습니다. 별거 아니죠? 이게 전부입니다. 맞게 height 넣어주시면 되겠습니다. (__) .

그런데 문제가 시작됩니다. 내부에 요소들을 넣을수록 height, width, margin이 막 뒤죽박죽.. 당췌 어떻게 돌아가는 것이냐며....

일단 height와 width는 순수히 content 영역의 크기입니다. padding, margin, border는 자신의 height나 width를 변경하지 못합니다. 일정한 값의 height나 width를 정하면 거기에서 추가하여 padding + margin + border의 좌우내지 상하의 값을 갖습니다. 이게 대단히 좀 짜증날 수도 있으나 계산해보면 별거 아니고 미리 고정된 폭이나 높이를 가진 블록을 만들어낼 수도 있습니다.

일단 div요소는 좌우를 꽉 채우려 합니다. width 값이 정해지지 않았다면 초기값이 auto입니다. auto가 참좋죠.. padding이나 border 크기를 설정해도 알아서 width가 냉큼냉큼 바뀝니다.

이제 header 내부에 요소하나를 넣습니다. 그래 이건 좀 여백이 필요해.. margin:5ox을 설정합니다. 그런데 이게 모지.. 이상한 일이 발생합니다.

<div> <div style="margin:5px">header</div> </div>

이상한데.. 부모 div도 좀 떨어진 것 같은데.... 오 눈치가 빠른 김군은 확인작업에 들어갑니다. 일단 배경을 넣어보고 margin값을 더 키워보자.

<div style="background;#f00"> <div style="margin:100px">header</div> </div>

헉.. 부모 div가 공중에 100px 벌어졌습니다. 왜 자식 div가 안떨어지지... 김군은 귀신이 곡할 노릇입니다. 누군가 나를 모함하고 있어... 이건 브라우저 탓이다 ㅜ.ㅜ 지나가던 A군 한마디 합니다. 마진 병합이 발생했어. 이렇게 수직간에 자식과 부모 요소가 만나면 큰 마진만을 골라서 부모가 가져다 써. 이것은 원래 출판물에서랄까. 그런데서 마진은 서로간에 큰 놈을 가져다 쓰는 것이 편한 결과로 나왔데나 그렇다나 하더라고 하면서 척하는 소리까지 합니다.

김군이 한마디 합니다. "이것 어떻게 해결하지 ?"

A군이 답합니다. "일단은 부모 div가 border가 있으면 병합없이 알아서 해결이 돼. 근데 border를 쓰기 싫다면 자식 div에 margin을 쓰지말고 부모 div에 padding을 써. 그럼돼... 다시 말해 부모와 자식 사이에 margin이 만날 수 없게 부모에게 border나 padding을 적용시키면 된다고..."

이제 김군은 하나를 깨우쳤습니다.

"그래 이제 유동 폭(fluid width)이 아닌 고정 폭(fixed width)으로 가자. 요즘 대세는 960px?"

김군이 어디서 무언가 주워들었나봅니다.

<div>

<div style="padding:20px"> header </div>

</div>

<div> content </div>

<div> footer</div>

<div>

짝짝짝 다 만들었다. 그런데... 왼쪽에 있네. 이거 좀 촌스러운데. 요즘 대세는 가운데 아니냐? 어떻게 가운데로 오게 하지 김군은 다시 꼬민에 빠집니다. 다시 A군에게 물어봅니다.

A군 왈 "아까 블록 속성이 모라했어? 좌우로 꽉채우려 한다고 했지. 알아서 이때 width가 정해지고. 만일 width가 정해졌다면 이때 margin을 auto로 좌우값에 두면 어떠한 일이 발생할까?"

눈치 빠른 김군은 이런 선문답에 미리 답을 알수밖에 없어 "정렬이 발생하겠네"라고 답합니다.

A군 왈 "그렇지.. 그래서 왼쪽으로 정열하고 싶으면 블록 속성이니 우측에다 auto를 넣고, 우측 정렬을 하고자 한다면 좌측에다 auto를 쓰면되겠고, 가운데다 놓으려면 양측에 auto를 넣음 되겠지. 좌우는 동시에 속기로 쓸 수 있으니 좀더 간단히 쓸 수 있겠지"

눈치빠른 A군은 드디어 960px 고정폭의 레이아웃 하나를 만들어봤습니다.

<div>

<div style="padding:20px"> header </div>

</div>

<div> content </div>

<div> footer</div>

<div>

김군은 좀전에 쩔쩔매던 것을 금새 잊고 한마디 합니다. "별거 아니네.. ㅎ.ㅎ" 김군은 좀더 생각에 빠지더니 나름 아이디어를 떠오릅니다. 이거 content에 따라 자꾸 높이가 변경되는데 footer는 항상 바닥에 놓고 싶어.. 김군은 이것을 알기 위해서 좀더 많은 기술의 전수를 모른채 겁없이 상상했습니다.

---- 다음 시간으로....