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> ※ 소스가 필요하신분은 댓글 남겨주시면 소스 보내드리겠습니다. ※[홈페이지만들기] - div 배치하기 [홈페이지만들기] - html 테이블구조 만들기 [홈페이지만들기] - first-child / last-child 활용하기 div태그 좌우 반으로 나누기 html) float 속성으로 좌우로 배치하고 box-sizing: border-box 속성으로 너비가 테두리영역까지 포함되도록 한다
결과
|
HTML div 영역 나누기 - HTML div yeong-yeog nanugi
관련 게시물
저작권 © 2024 ko.apacode Inc.
