수평, 중앙, One True 정렬 레이아웃

HTML 2023. 10. 19. 15:22

수평 정렬 레이아웃

<!DOCTYPE html>
<html>
<head>
    <title>Float with Overflow</title>
    <style>
        div.container {
            overflow: hidden;
        }
        div.item {
            float: left;
            margin: 0 3px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas totam magnam molestiae quas, eaque in voluptatum labore consequatur necessitatibus accusamus. Esse, dignissimos expedita laudantium dolor atque mollitia eos consequatur libero!</p>
    <div class="container">
        <div class="item">메뉴 - 1</div>
        <div class="item">메뉴 - 2</div>
        <div class="item">메뉴 - 3</div>
        <div class="item">메뉴 - 4</div>
    </div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, perferendis sed quam optio ullam nobis voluptas quaerat cumque. Eum dolorem voluptatibus molestiae non sapiente quia iste asperiores eligendi fuga qui.</p>
</body>
</html>

여기서 overflow 속성을 적용하지 않고 실행 시

    <style>
        div.container {
            
        }
        div.item {
            float: left;
            margin: 0 3px;
            padding: 10px;
            border: 1px solid black;
        }

실행 결과처럼 요소가 떠다님

+ clear: both를 사용해 수평 정렬 레이아웃 적용

HTML에서 적용

<body>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas totam magnam molestiae quas, eaque in voluptatum labore consequatur necessitatibus accusamus. Esse, dignissimos expedita laudantium dolor atque mollitia eos consequatur libero!</p>
    <div class="clear"></div>
    <div>
        <div class="item">메뉴 - 1</div>
        <div class="item">메뉴 - 2</div>
        <div class="item">메뉴 - 3</div>
        <div class="item">메뉴 - 4</div>
    </div>
    <div class="clear"></div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique, perferendis sed quam optio ullam nobis voluptas quaerat cumque. Eum dolorem voluptatibus molestiae non sapiente quia iste asperiores eligendi fuga qui.</p>
</body>

CSS에서 적용

    <style>
        div.item {
            float: left;
            margin: 0 3px;
            padding: 10px;
            border: 1px solid black;
        }

        div.clear {
            clear: both;
        }
    </style>

+ Grid 사용하는 방법

<!DOCTYPE html>
<html>
<head>
    <title>Float with Overflow</title>
    <style>
        #wrapper {
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 100px 200px;
            margin: 30px;
        }
        .items:nth-child(2n+1) {
            background-color: #bbb;
        }
        .items:nth-child(2n) {
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
        <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
        <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
        <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
        <div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    </div>
</body>
</html>

중앙 정렬 레이아웃은 그리드 시스템과 함께 사용, 너비는 일반적으로 880px, 960px, 980px를 많이 사용
그중 특히 960px는 1,2,3,4,5,6,8,10,12로 나누어 떨어지므로 레이아웃 구성하기 쉬움

중앙 정렬 레이아웃

<!DOCTYPE html>
<html>
<head>
    <title>Float with Overflow</title>
    <style>
        /* 초기화 */
        * {margin: 0; padding: 0;}

        /* 주제 */
        body {
            margin: 0 auto;
            width: 960px;
        }
    </style>
</head>
<body>
    <h1>Lorem ipsum</h1>
    <h2>Neque porro quisquam est qui...</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Ex ad dicta, nam vel, harum, excepturi a adipisci explicabo reprehenderit est placeat unde minima optio.</p>
</body>
</html>

One True 레이아웃

행 구성

<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</body>

열 구성

<body>
    <div id="top"></div>
    /* 중간의 #middle 공간을 공간 분할 태그 2개로 나눔 */
    <div id="middle">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <div id="bottom"></div>
</body>

레이아웃 구성

1. 부모 태그에 고정된 너비 지정

2. 수평 정렬하는 부모 태그의 overflow 속성에 hidden 적용

3. 자손 태그에 적당한 너비 입력, float 속성 적용

<!DOCTYPE html>
<html>
<head>
    <title>One True Layout</title>
    <style>
        body {
            width: 500px;
            margin: 10px auto;
        }
        #middle {overflow: hidden;}
        #left {float: left; width: 150px; background: red;}
        #right {float: right; width: 350px; background: blue;}

        #top {background: green;}
        #bottom {background: purple;}

    </style>
</head>
<body>
    <div id="top">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut expedita delectus asperiores iste consequatur optio cumque. Labore aperiam molestias, consectetur reiciendis cupiditate alias minus similique tenetur, pariatur quia excepturi quod?</div>
    <div id="middle">
        <div id="left">Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>
        <div id="right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla magni similique magnam! Fugit perspiciatis sequi omnis. Maxime molestiae optio consequuntur doloribus ipsum vero doloremque, fugiat vel aspernatur accusamus excepturi maiores!.</div>
    </div>
    <div id="bottom">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor modi vel magni ipsa placeat animi autem fugiat ipsum, neque ea unde voluptate sint facere, officia cumque tenetur laboriosam dolorem molestias.</div>
</body>
</html>

OneTrue 레이아웃의 핵심은 각 행을 독립적으로 구성한다는 것

1. 자손에 float 속성 적용

2. 부모의 overflow 속성에 hidden 적용

자손 태그의 너비 총합이 부모 태그의 너비가 될 때 좋음

    <style>
        body {
            width: 500px;
            margin: 10px auto;
        }
        /* #middle {overflow: hidden;} */
        #left {float: left; width: 150px; background: red;}
        #right {float: right; width: 350px; background: blue;}

        #top {background: green;}
        #bottom {background: purple;}

    </style>

위처럼 overflow 속성을 지정하지 않으면 float 속성을 적용한 자손이 있는 행을 다른 행이 침범

+ 추가 연습 예제

    <style>
        body {
            width: 500px;
            margin: 0px auto;
        }
        #middle {overflow: hidden;}
        #left {display: inline; margin: 20px; float: left; width: 150px; background: red;}
        #right {display: inline; float: right; width: 310px; background: blue;}

        #top {background: green;}
        #bottom {background: purple;}

    </style>

    <style>
        body {
            width: 500px;
            margin: 0px auto;
        }
        /* #middle {overflow: hidden;} */
        #left {display: inline; margin: 20px; float: left; width: 150px; background: red;}
        #right {display: inline; float: right; width: 310px; background: blue;}

        #top {background: green;}
        #bottom {background: purple;}

    </style>

    <style>
        body {
            width: 500px;
            margin: 10px auto;
        }
        /* #middle {overflow: hidden;} */
        #left {float: left; width: 150px; background: red;}
        #right {float: left; width: 350px; background: blue;}

        #top {background: green;}
        #bottom {background: purple;}

    </style>

저작자표시

'HTML' 카테고리의 다른 글

연습 예제 (0)	2023.10.20
요소 배치 (0)	2023.10.19
CSS3 속성 (0)	2023.10.06
CSS3 기초: 선택자와 단위 (0)	2023.10.05
HTML 입력 양식 태그, 구조화 (0)	2023.10.05

ABOUT ME

개발자 어쩌구 개발자 어쩌구

'HTML' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'HTML' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바