Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
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
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

float 연습 3 본문

웹퍼블리싱/CSS

float 연습 3

http://portfolio.wonpaper.net 2018. 11. 19. 18:33

<!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>float를 이용한 화면 레이아웃03</title>

<style type="text/css">
  #wrapper {width:800px;border:1px solid black;margin: 0 auto;}
     div {border: 1px solid red;} /*페이지내 모든 div 요소*/
     #header {height: 50px;}
     #left {float:left;height:70px;width:120px;background-color: cyan;}
     #content {height:100px;width:300px;background-color: fuchsia;
        /*padding-left:120px;*/
       /*margin-left:120px;*/  
       float:left;
     }
     #footer {clear:both;height:30px;background-color: yellow;}
</style> 
</head>
<body>


 <div id="wrapper">
  <div id="header">상단영역</div>
  <div id="left">좌측메뉴</div>
  <div id="content">
   우측내용
   <br />
   우측내용
   <br />
   우측내용
   <br />
   우측내용
   <br />
   우측내용
   <br />
   우측내용
   <br />

  </div>
  <div id="footer">하단회사정보</div>
 </div>


 <!-- 우측내용 글자 정렬방법
1. padding 값 주기 #content  의 padding-left:120px;
2. margin 값 주기  #content  의 margin-left:120px;
3. float 값 주기       #content  의 float:left;
 --> 
 
</body>
</html>

결과 화면과 같이 우측내용부분과 하단회사 정보들이 일반적인 웹레이아웃용으로 보기 좋게 나타난다.

또한 #footer 에서 clear:both; 속성으로 앞에서 연이은 float 내용을 clear 시켜주었다.

#wrapper 의 margin:0 auto; 속성으로  (0은 상하, auto 는 좌우) 전체 div 항목을 묶어서 전체 내용들이 화면 중앙 정렬이 되게끔 하였다






'웹퍼블리싱 > CSS' 카테고리의 다른 글

position 연습2  (0) 2018.11.22
position 연습1  (0) 2018.11.22
float 연습 2  (0) 2018.11.19
float 연습 1  (0) 2018.11.19
텍스트박스 마우스 포인트시 손모양표시  (0) 2018.11.18
'웹퍼블리싱/CSS' Related Articles more
Comments