메뉴 건너뛰기

검색창 닫기

XEDITION

project2018

[WEB] DIV 태그를 이용하여 레이아웃 만들기

proin 2018.05.28 22:27 조회 수 : 0

http://aboooks.tistory.com/74

 

div태그는 하나 이상의 태그를 묶는 태그라고 했는데요,

 

이렇게 묶어진 요소들은 하나의 객체로 취급되어 속성을 주기에도 편하고,

 

웹 문서의 전체 배치(layout)을 할 때도 상당히 유리합니다.

 

 

 

우선 쉬운 사용 예부터 보겠습니다.

 

1. 월요일, 화요일, 수요일을 <div> </div> 태그로 묶어서 전체 스타일을 줄 수 있고요.

 

<div id="side_left" >
<p>월요일 <p>

<p>화요일 <p>

<p>수요일 <p>
</div>

 

2. 이미지와 문장을 함께 엮어 스타일을 줄 수도 있어요.

 

<div>

<img src="flower.png" width="200px" height="200px" >
동해물과 백두산이 마르고 닳도록  하느님이 보우하사 우리나라 만세. 
(후렴) 무궁화 삼천리 화려강산 대한 사람, 대한으로 길이 보전하세

</div>


 3. div 태그를 이용한 레이아웃

 

예전에는 <table> 태그로 레이아웃을 하기도 하였으니 원래 table은 표를 만들기 위한 목적이라

 

레이아웃은 <div>태그 사용 합니다.

 

 

레이아웃 하는 순서

 

가. 실제 설계도를 그리는 것처럼 종이에다가 메뉴바, 사이드바, 본문, 하단 등의 배치를 그려봅니다.

 

나. 그리고 이름도 붙여봅니다. 이름은 본인이나 남들이 직감적으로 알아듣기 쉬운 이름을 짓습니다.

 

    (단 숫자로 시작하지 않음)

    예)사이드바 왼쪽: side_left / 사이드바 오른쪽: side_right / 본문 : contents

 

 

그럼 우선 가장 쉬운 세 객체를 만들어서 레이아웃 만들기를 해 보겠습니다.

 

24772935532927E3045D18

세 가지 객체 만들기.

<div id="s_left">사이드바왼쪽(노랑)</div>
<div id="contents">본문(녹색)</div>
<div id="s_right">사이드바 오른쪽(빨강)</div>

 

 

스타일을 주기

width: 너비 속성 (pixel, % 가능)

height: 높이 속성 (pixel, % 가능)

float: 좌우 정렬 속성 (left 또는 right)

background-color: 배경색 속성 (색상이름, 칼라 코드 가능)

 

<style type="text/css">
div#s_left {

width:200px;

height: 700px;

background-color: yellow;

float:left;
}

#contents {

width:400px;

height: 700px;

background-color: green;

float:left;

}

#s_right {

width:200px;

height: 700px;

background-color: red;

float:left;

}

</style>

 

 

전체 html 문서를 작성해 보겠습니다

 

 

 

<html>
<head>

<style type="text/css">

div#s_left {

width:200px;

height: 700px;

background-color: yellow;

float:left;
}

#contents {

width:400px;

height: 700px;

background-color: green;

float:left;

}

#s_right {

width:200px;

height: 700px;

background-color: red;

float:left;

}
</style>
 </head>

<body>


<div id="s_left">사이드바왼쪽(노랑)</div>
<div id="contents">본문(녹색)</div>
<div id="s_right">사이드바 오른쪽(빨강)</div>


</body>
</html>

 

 

 

<div>태그와 float 속성으로 문서의 레이아웃 실행 화면입니다

 

2255DB4A53292E023D78FB

 

 

 

 

<div> 태그에 여백 넣기

 

그럼 이번엔 여백을 넣어보겠습니다.

 

margin: 객체와 객체 사이의 공간, border : 선 굵기, padding 내용와 border 사이의 공간

 

margin, border, padding의 더 자세한 차이는 아래 글 참조.

 

티스토리 본문과 사이드바 간격 조정 방법

 

객체와 객체 사이의 여백은 margin 속성을 이용합니다.

 

아래 속성으로 오른쪽 따로, 왼쪽 따로 지정할 수도 있고

 

margin-right 오른쪽

margin-left 왼쪽

margin-top 위

margin-bottom 아래

 

margin: 0 5 2 5;  이렇게 전체 지정을 할 수도 있어요(위, 오른쪽, 아래, 왼쪽 순)

 

margin: 5; 라고 하면 네면이 모두 5px로 지정됩니다.

 

 

스타일 영역에서 아래 margin 코드만 추가하면 됩니다.

 

<style type="text/css">

div#s_left {

width:200px;

height: 700px;

background-color: yellow;

float:left;

margin: 5px;
}

#contents {

width:400px;

height: 700px;

background-color: green;

float:left;

margin: 5px;

}

#s_right {

width:200px;

height: 700px;

background-color: red;

float:left;

margin: 5px;

}
</style>
 

 

실행 화면입니다. 이 화면은 50% 축소화면이라 실제 크기보다 작게 보입니다.

 

271DB54553292EA701DBE3

 

<div> 에서 float 속성 사용 시 주의할 점

 

위 예문에서는 세 가지 객체 모두 float: left 를 사용하여 문제가 없지만

만일 본문(녹색)을 float: right 할 경우, 정렬이 아래처럼 바뀝니다.

 

2167E5505333774E3067D4

 

 

 

그리고 세 가지 객체 모두 float: right; 했을 때는 다음과 같습니다.

 

 

 

253E003853293260132917

 

 

오늘은 table 대신 div 태그를 이용한 레이아웃을 정리해 보았습니다.

 

이 게시물을
수정 삭제 목록
쓰기 태그
위로