|
DIV 태그를 이용하여 레이아웃 만들기 |
지난 시간에 div태그와 float 속성에 대해 배웠습니다.
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
그럼 우선 가장 쉬운 세 객체를 만들어서 레이아웃 만들기를 해 보겠습니다.
세 가지 객체 만들기.
<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> <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; } <body>
|
<div>태그와 float 속성으로 문서의 레이아웃 실행 화면입니다
<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% 축소화면이라 실제 크기보다 작게 보입니다.
<div> 에서 float 속성 사용 시 주의할 점
위 예문에서는 세 가지 객체 모두 float: left 를 사용하여 문제가 없지만
만일 본문(녹색)을 float: right 할 경우, 정렬이 아래처럼 바뀝니다.
그리고 세 가지 객체 모두 float: right; 했을 때는 다음과 같습니다.
오늘은 table 대신 div 태그를 이용한 레이아웃을 정리해 보았습니다.
다음 시간엔 div 태그를 이용하여 광고(애드센스) 넣는 방법을 알아볼게요~
[html/css] div 1개 정렬하기(왼쪽, 오른쪽, 가운데 정렬)
[html/css] text-align 속성으로 정렬하기 (left, right, center, justify)
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
CSS란? (HTML과 CSS의 차이, CSS 작성법)
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)
'css' 카테고리의 다른 글
| [html/css] margin 속성 자세히 알아 보기(margin-top,margin-left, margin-bottom, margin-left 설정 방법) (0) | 2014.03.25 |
|---|---|
| [html/css 기초] border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) (1) | 2014.03.24 |
| [css 기초] float 속성에 대하여 (3) | 2014.03.18 |
| [html/css] span, div 태그 차이 (1) | 2014.03.14 |
| [html/css기초] span, div (0) | 2014.03.11 |
댓글