티스토리 뷰

Web개발

HTML CSS로 frame layout 만들기 예제

KyeongRok Kim 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.





728x90
저작자표시 비영리

'Web개발' 카테고리의 다른 글

nginx에서 php ci(code igniter) 설정  (0) 2017.01.11
php array와 array_push()와 json_encode  (0) 2016.10.05
css로 index 화면 만들기  (0) 2014.08.22
CSS 두 줄로 배치 하는 방법 예제  (0) 2013.04.02
05 CSS로 Positioning 하는 법을 알아보자 - clear:both  (0) 2013.03.11
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
글 보관함