본문으로 바로가기

HTML CSS로 frame layout 만들기 예제

category Web개발 2015.10.24 13:00

Html css로 frame layout 만들기 예제



HTML에서 Frame을 사용하지 않고 CSS를 이용해서 위와 같은 layout을 만들 것이다.



간단히 설명을 해보자면 위 레이아웃은 div가 총 4개 들어간다. 3개 처럼 보이겠지만 4개다.


1.<div class="wrapper">(뢰퍼)

위 그림에서 맨 바깥쪽 까만색 테두리이다. 전체 layout을 감싸는 역할을 한다.


2.<div class="top">(탑)

위 그림에서 맨 위에 분홍색이다. wrapper안에 들어간다.


3.<div class="menu">(메뉴)

위 그림에서 왼쪽 초록색 부분이다. wrapper안에 들어간다.


4.<div class="contents">(컨텐츠)

위 그림에서 오른쪽 약간 회색으로 칠해진 부분이다. wrapper에 들어간다.


소스코드는 아래와 같다.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrapper{
width:900px;
height:500px;
padding:10px;
background-color: #fff;
border: 2px solid #666;  

}
.top{
width:100%;
height:150px;
background-color: #FF0066;
}
.menu{
float:left;
width:200px;
height:300px;
background-color: green;
}
.contents{
float:left;
width:700px;
height:300px;
background-color: #eeffcb;
}
</style>


</head>
<body>
<div class="wrapper">
<div class="top">

</div>
<div class="menu">

</div>
<div class="contents">
</div>


</div>

</body>
</html>




그럼 아래 화면은 어떻게 만들까?


contents와 menu의 자리가 바뀌었다.

아래와 같이 간단히 바꿀 수 있다.

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrapper{
width:900px;
height:500px;
padding:10px;
background-color: #fff;
border: 2px solid #666;  

}
.top{
width:100%;
height:150px;
background-color: #FF0066;
}
.menu{
float:left;
width:200px;
height:300px;
background-color: green;
}
.contents{
float:left;
width:700px;
height:300px;
background-color: #eeffcb;
}
</style>


</head>
<body>
<div class="wrapper">
<div class="top">

</div>
<div class="contents">
</div>

<div class="menu">

</div>


</div>

</body>
</html>



ㅇㅇ



end.






댓글을 달아 주세요