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 연습 2 본문

웹퍼블리싱/CSS

float 연습 2

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

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

<style type="text/css">

    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 {height:30px;background-color: yellow;}

</style>

</head>

<body>

 

 <div id="header">상단영역</div>

 <div id="left">좌측메뉴</div>

 <div id="content">

  우측내용<br />우측내용<br />우측내용<br />우측내용<br />우측내용<br />우측내용<br />

  

<!-- 우측내용 글자 정렬방법

1. padding 값 주기 #content  의 padding-left:120px;

2. margin 값 주기  #content  의 margin-left:120px;

3. float 값 주기      #content  의 float:left;

 -->  

 </div>

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

</body>

</html>

위쪽에 두개의 결과 화면과 같이 #content 또한 float 를 left 속성을 주었는데, 문제는 전체 브라우저화면창의 폭넚이에 따라 가변적으로 움직여지는 단점이 존재한다.

또한 #footer 의 부분도 앞에서의 float:left 영향을 받아서 옆으로 연이어 계속 나타난다.






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

position 연습1  (0) 2018.11.22
float 연습 3  (0) 2018.11.19
float 연습 1  (0) 2018.11.19
텍스트박스 마우스 포인트시 손모양표시  (0) 2018.11.18
입력상자 한글,영문 설정하기  (0) 2018.11.18
'웹퍼블리싱/CSS' Related Articles more
Comments