DIV 프레임나누기
프레임을 나눌땐 항상 어떤형태의 레이아웃을 구현할까 머리속으로 생각하면서 테이블이나 레이어구조를 만든다.
가장 주의할점은 어떤형태로 변할지에 대해 변칙적으로 구현 할 수있는 스타일을 만들어야 한다. 그럼 이번에는 스타일 정의를 통해 구조를 만들어 보도록 하겠다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV 프레임나누기</title>
<style>
.main_container {
width:100%;
height:100%;}
.main_title {
width:100%;
height:130px;
background-color: green;
float:left;
border-bottom-width:thin;
border-bottom-color:rgba(25,80,100,0);
border-bottom:solid;}
.main_left_btn {
width:50%;
height:280px;
background-color:red;
float:left;}
.main_right_btn {
width:50%;
height:280px;
background-color:blue;
float:left;}
.main_list {
width:100%;
height:150px;
background-color:yellow;
float:left;}
.main_left_btn_icon {
width: 82px;
height: 100px;
margin: 0px auto; --> div 가운데 정열
text-align:center; --> div 안쪽 텍스트 가운데 정렬
background-repeat: no-repeat;
background-image: url(../images/main_left_btn.png);}
/**
.main_left_btn_icon {
width: 82px;
height: 100px;
margin: 0px auto;
background-repeat: no-repeat;
background-image: url(../images/main_left_btn.png); 버튼 백그라운드 이미지 넣기
position:absolute;
left:50%;
margin-left:-41px;}**/
</style>
</head>
<body>
<div class="main_container">
<div class="main_title">타이틀</div>
<div class="main_left_btn">왼쪽
<div class="main_left_btn_icon">중앙정렬</div>
<div class="main_right_btn">오른쪽</div>
<div class="main_list">리스트</div>
</div>
</body>
</html>
※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※
[홈페이지만들기] - first-child / last-child 활용하기
'홈페이지만들기 > Html_css&css3' 카테고리의 다른 글
| html 창크기 조절(반응형코딩) (7) | 2017.01.28 |
|---|---|
| ul li 가로정렬로 메뉴만들기 (css가로정렬) (5) | 2017.01.27 |
| div 배치하기 (0) | 2017.01.24 |
| html 테이블구조 만들기 (0) | 2016.12.30 |
| first-child / last-child 활용하기 (0) | 2016.12.29 |
