III. 박스 모델 - 4. 웹 문서의 레이아웃 만들기

Hush 2022. 6. 4. 18:02

display : 배치 방법을 결정

display 속성을 사용하면 블록레벨 요소아 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다.

display 속성은 주로 웹 문서의 내비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치할 수도 있다.

display 속성에서 사용할 수 있는 값은 매우 많은데, 이 중에서 문서 레이아웃을 만들 때 자주 사용하는 속성은 다음과 같다.

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 만듭니다.
inline	블록 레벨 요소를 인라인 레벨 요소로 만듭니다..
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있습니다.
none	해당 요소를 화면에 표시하지 않습니다.

다음 예제는 수평 내비게이션을 만들기 위해 원래 블록 레벨 요소였던 목록을 인라인 레벨 요소로 바꾼 것이다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            * {box-sizing: border-box;}
            nav ul {list-style : none;}
            nav ul li {
                display: inline-block;
                padding: 20px;
                margin: 0 20px;
                border : 1px solid #222;
            }
        </style>
    </head>
    <body>
        <h1>navigation bar</h1>
        <nav>
            <ul>
                <li>menu 1</li>
                <li>menu 2</li>
                <li>menu 3</li>
                <li>menu 4</li>
            </ul>
        </nav>
    </body>
</html>

float : 왼쪽이나 오른쪽으로 배치

웹 문서를 만들다 보면 <p> 태그처럼 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 경우가 있다.

그런데 <p> 태그는 블록 레벨 요소이니 기본적으로 이는 불가능하다.

이럴 때는 float 속성을 사용하여 이미지를 표시하고 그 주변에 텍스트가 둘러싸도록 할 수 있다.

float속성은 웹 요소를 문서 위에 떠 있게 만든다.

여기서 "떠 있다"는 의미는 요소가 왼쪽 구석이나 오른쪽 구석에 배치된다는 것을 말한다.

float 속성에서 사용할 수 있는 값에는 left, right, 그리고 좌우 어느 쪽도 아닌 것(none)이 있습니다.

다음 예제는 이미지를 텍스트의 왼쪽에 떠 있게 하려고 img 요소에 float : left 속성을 적용했다.

이미지를 왼쪽에 배치한 후 오른쪽에 오는 텍스트와 적당한 간격을 유지하도록 margin-right 속성도 함께 사용한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            img {
                float : left;
                margin-right : 40px;
            }
        </style>
    </head>
    <body>
        <img src="images/EiffleTower.jpg" alt="eiffle tower" width="30%">
        <p>이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. 이것은 에펠탑이다. </p>
    </body>
</html>

float 속성을 해제하는 clear 속성

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, 그것이 바로 clear 속성이다.

종류	설명
left	float : left 를 해제합니다.
right	float : right를 해제합니다.
both	float : left 와 right 를 해제합니다.

다음 예제에서 box1과 box2 요소는 float: left를 적용했으므로 왼쪽부터 차례대로 배치된다. 하지만 box3요소는 float 속성을 지정하지 않았으므로 웹 브라우저의 기본 흐름으로 배치된다. 마지막 box4에는 clear : left 속성을 사용했으므로 앞에서 사용한 float 속성이 해제되어 평범한 박스 형태로 표시된다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">  
        <title>Html-basic</title>
        <style>
            *{
                margin : 20px;
                padding : 20px;
            }
            #box1 {
                background: red;
                float : left;
            }
            #box2 {
                background: blue;
                float: left;
            }
            #box3 {
                background: green;
                clear : left;
            }
            #box4 {
                background: purple;
            }
        </style>
    </head>
    <body>
        <div id="box1">박스1</div>
        <div id="box2">박스2</div>
        <div id="box3">박스3</div>
        <div id="box4">박스4</div>
    </body>
</html>

저작자표시 (새창열림)