본문 바로가기

Study/HTML & CSS

[CSS] 스타일 속성 - float 속성

1. float 속성

float 속성은 부유하는 대상을 만들 때 사용하는 스타일 속성입니다.

키워드 설명
left 태그를 왼쪽에 붙입니다
right 태그를 오른쪽에 붙입니다

 

<head>
    <style>    
    </style>
</head>
<body>
    <img src="cat.jpg" />
    <p>This is cat</p>
</body>

 

<head>
    <style>
        img {
            float: left;
        }
    </style>
</head>
<body>
    <img src="cat.jpg" />
    <p>This is cat</p>
</body>

float 속성을 사용하면 그림을 글자 위에 띄울 수 있습니다. 원래 float 속성은 이러한 목적으로 만들어졌지만 현대에는 웹 페이지의 레이아웃을 만들 때 더 많이 사용합니다. [1] (221)

 

 

2. float 속성을 사용한 수평 정렬

1) float: left

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>

 

2) float: right

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 10px;
            padding: 10px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
</body>

 

 

3. float 속성을 사용한 레이아웃 구성

 

1) 레이아웃 구성

 

2) 기본 HTML 코드

<head>
    <style>
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="navigation"></div>
    <div id="wrap">
        <div id="aside"></div>
        <div id="section"></div>
    </div>
    <div id="footer"></div>
</body>

 

3) body 내용 입력

<body>
    <div id="header"><h1>Header</h1></div>
    <div id="navigation"><h1>Navigation</h1></div>
    <div id="wrap">
        <div id="aside">
            <h1>Aside</h1>
            <p>This is aside</p>
        </div>
        <div id="section">
            <h1>Section</h1>
            <p>This is section</p>
        </div>
    </div>
    <div id="footer"><h1>Footer</h1></div>
</body>

 

4) style 적용 - body 중앙정렬

태그에 width 속성을 사용하고 margin-left 속성과 maring-right 속성에 auto 키워드를 적용하면 자동으로 중앙 정렬됩니다. [1] (225)

<head>
    <style>
        body {
            width: 600px;
            margin: 0 auto;
        }
    </style>
</head>

 

5) style 적용 - wrap, aside, section

"자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용합니다." [1] (223)

<head>
    <style>
        body {
            width: 600px;
            margin: 0 auto;
        }
        #wrap {
            overflow: hidden;
        }
        #aside {
            width: 200px;
            float: left;
        }
        #section {
            width: 760px;
            float: left;
        }
    </style>
</head>

 

6) style 적용 - 배경색 적용

<head>
    <style>
        body {
            width: 960px;
            margin: 0 auto;
        }
        #header { background-color: rgb(200, 200, 200); }
        #navigation { background-color: rgb(200, 180, 180); }
        #wrap { overflow: hidden; }
        #aside {
            background-color: rgb(200, 160, 160); 
            width: 200px;
            float: left;
        }
        #section {
            background-color: rgb(200, 140, 140); 
            width: 760px;
            float: left;
        }
        #footer { background-color: rgb(200, 120, 120); }
    </style>
</head>

 

 

 


Reference

[1] 모던 웹을 위한 HTML5+CSS3 바이블, 윤인성 (2019), 한빛미디어

'Study > HTML & CSS' 카테고리의 다른 글

[CSS] 스타일 속성 - 위치 속성  (0) 2022.11.01
[CSS] 스타일 속성 - 박스 속성  (0) 2022.10.31
[CSS] 스타일 속성 - 가시 속성  (0) 2022.10.31
[CSS] 스타일 속성 - 단위  (0) 2022.10.26
[CSS] 선택자 (Selector)  (0) 2022.10.24