-
[HTML] div 태그Legacy/Web 2015. 7. 4. 13:11728x90
출처 - http://gskool.tistory.com/43
이 강의에 사용된 모든 그림은 클릭 하시면 원본 크기로 볼 수 있습니다.
<DIV> 태그의 개념은 이해하기가 상당히 까다로운 편입니다. 말로 설명하는 것보단 실전 연습을 통해 습득하는 것이 훨씬 쉬울 정도로 <DIV> 태그를 정의하기란 까다롭습니다. 굳이 비유를 해서 표현하자면 우리가 어릴 적 가지고 놀던 레고처럼 블록을 조립한다고 생각하시면 될 것 같습니다. 그럼 바로 실전을 통해 <DIV> 태그를 공략해 보도록 하겠습니다. 아래의 그림을 봐주시기 바랍니다.
아래의 그림은 <DIV> 태그를 이용한 기본적인 구조의 레이아웃 입니다. <CONTAINER>가 밑에 깔려 있고, 그 위에 <HEADER>, <CONTENT>, <SIDEINFO>, <FOOTER> 레이아웃이 올려져 있네요. 아래의 그림을 실제 소스로 코딩하면 어떤 구조일까요? 직접 소스 코딩을 해보도록 하겠습니다.
HTML 문서 내용
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="sideinfo"></div>
<div id="footer"></div>
</div>
</body>
</html>
CSS 문서 내용
#container { background-color:#F0F0F0; width:960px; margin:0 auto; padding:10px; }
#header { background-color:#908886; height:100px; }
#content { background-color:#F5F5F5; float:left; width:660px; height:400px; }
#sideinfo { background-color:#DCDAD9; float:right; width:300px; height:400px; }
#footer { background-color:#555555; clear:both; height:100px; }결과물을 보여 드리기 위해 각 레이아웃에 속성을 주었습니다. 그럼 아래의 결과물을 보면서 각 영역에 들어간 속성들을 파헤쳐 보도록 하겠습니다.
margin:0, auto
레이아웃을 화면의 중앙에 위치시키기 위해 들어간 속성입니다. 만약 해당 속성을 주지 않는다면 기본값에 의해 레이아웃은 화면의 좌측에 위치하게 됩니다.
float:left
<CONTENT> 영역을 좌측으로 정렬시키라는 의미입니다. 현재 부모인 <CONTAINER> 영역이 감싸고 있기 때문에 <CONTAINER> 영역을 벗어나지 않고, <CONTAINER> 영역 안에서 좌측에 위치하게 됩니다.
float:right
<SIDEINFO> 영역을 우측으로 정렬시키라는 의미입니다. 만약 <CONTAINER> 영역의 폭을 고정시키지 않으면 어떻게 될까요? 아래의 그림을 봐주세요.
그럼처럼 <SIDEINFO> 영역이 <CONTAINER> 영역 안에서 우측에 위치하게 됩니다. 현재 그림은 <CONTAINER> 영역에 부여된 속성 중에 넓이(width) 값을 삭제해서 그림과 같이 레이아웃이 깨진 겁니다. 넓이(width) 값을 별도로 설정해 주지 않으면 기본적으로 넓이(width)의 값은 100%가 됩니다. 반면에 높이(height)는 별도로 설정하지 않으면 값이 제로가 됩니다. 즉, 넓이(width)만 설정하고 높이(height)를 설정해 주지 않으면 실제로는 레이아웃이 존재하지만 화면상으로는 아무것도 없는 것처럼 보이게 됩니다.
그럼 <CONTENT> 영역과 마찬가지로 <SIDEINFO> 영역도 좌측에 위치 정렬(float) 시키면 어떤 모습이 될까요?
그림과 같이 같은 방향으로 위치 정렬(float) 시키면 해당 방향으로 차곡차곡 정렬됩니다.
clear:both
위치 정렬 속성인 float 속성을 상속 받지 않고 초기화 시켜줍니다. 만약 위치 정렬(float) 속성을 초기화 시켜주지 않으면 어떤 결과가 나올까요? 아래의 그림을 봐주세요.
보시는 바와 같이 위치 정렬(float) 속성을 초기화 시켜주지 않으면 <CONTENT> 영역과 <SIDEINFO> 영역이 공중으로 붕 떠서 <FOOTER> 영역이 가려지게 됩니다. 그림을 잘 보시면 <CONTAINER> 영역의 높이가 줄어든 것을 볼 수 있습니다. 보이지는 않지만 현재 <FOOTER> 영역은 빨간색 선으로 표시된 부분에 위치하고 있습니다. <HEADER> 영역은 위치 정렬(float) 속성이 없기 때문에 <CONTENT> 영역과 <SIDEINFO> 영역이 <HEADER> 영역 아래에 자리잡게 되는 겁니다. <FOOTER> 영역이 <HEADER> 영역의 아래에 위치하게 된 이유는 <HEADER> 영역에는 위치 정렬(float) 속성이 없기 때문에 <HEADER> 영역의 아래에 자리잡게 된 겁니다. 이처럼 <DIV> 태그는 개념을 이해하기가 쉽지 않을 뿐더러 설명하는 것조차 까다롭습니다. 직접 실전 연습을 통해 터득하는 게 가장 빠른 길입니다.
'Legacy > Web' 카테고리의 다른 글
[JavaScript] DOM(Document Object Model) (0) 2015.07.13 [JavaScript] BOM(Browser Object Model) (2) 2015.07.13 [JavaScript] 자바스크립트의 객체 (0) 2015.07.12 [JavaScript] 조건식에 논리형(Boolean)이 아닌 다른 형이 오는 경우 (0) 2015.07.11 [JavaScript] CDATA 선언문 (0) 2015.07.11 인기 있는 소셜 네트워크 서비스로 본 아키텍처 (0) 2015.07.04 검색 잘되는 웹문서 만들기 (0) 2015.07.04 GET과 POST의 차이 (0) 2015.07.04 [JavaScript] JavaScript Object prototype 이해하기 (2) 2015.06.13 [JavaScript] JavaScript Comparison Table (0) 2015.06.07
예제 소스.zip
