[project] boostcourse

[실습] 레이아웃 만들어보기

hhnn 2021. 8. 5. 16:09

레이아웃

: 책, 신문, 잡지 등의 출판물에서 글, 그림을 효과적으로 정리하고 배치하는 일을 뜻하는 출판용어

웹사이트 제작시 메뉴, 컨텐츠, 부가정보 등과 같은 구성요소들을 필요한 곳에 위치하여 사용자가 효과적으로 웹사이트를 이용할 수 있게 배치하는 작업을 일컫는다.

 

 

레이아웃의 종류

  • 1단 레이아웃
  • 상단 고정 레이아웃
  • 상,하단 고정 레이아웃
  • 2단 레이아웃
  • 3단 레이아웃
  • 다단 레이아웃

 

 

1단 레이아웃

  • 레이아웃 종류 중 가장 기본이 되는 레이아웃, 단순하고 쉽다.
  • 하나의 행으로 이루어진 레이아웃 형태
  • 상단, 중단, 하단으로 구성되어 있는 것이 일반적이다.

 

 

 

다단레이아웃

2단, 3단 레이아웃

  • 콘텐츠 영역이 2개 또는 그 이상의 행으로 나눠진 레이아웃을 행의 갯수에 따라 2단 레이아웃, 3단 레이아웃으로 부른다.

 

📌float을 이용한 2단 레이아웃 구성

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>2단 레이아웃(float)</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
</head>
<style>
    html, body, #wrap {
        height: 100%;
    }
    .header {
        height: 100px;
        background-color:lightslategrey;
    }
    .container {
        position: relative;
        width: 800px;
        min-height: 100%;
        margin: -100px auto;
        padding: 100px 0;
    }
    .container:after {
        display: block;
        content: '';
        clear:both;
    }
    .content {
        float: left;
        width: 500px;
        height: 1300px;
        background-color:lightseagreen;
    }
    .aside {
        float: left;
        width: 300px;
        height: 300px;
        background-color:lightgreen;
    }
    /* float을 content와 aside에 주게되면 위로 뜨게 되어 footer도 뒤따라 온다. clearfix를 해야 함 */
    .aside:after {
        position: absolute;
        top: 100px;
        bottom: 100px;
        right: 300px;
        content: '';
        width: 5px;
        background-color: #000;
    }
    .footer {
        height: 100px;
        background-color:lightpink;
    }

</style>

<body>
    <div id="wrap">
        <header class="header">header</header>
        <div class="container">
            <section class="content">content</section>
            <aside class="aside">aside</aside>
        </div>
        <footer class="footer">footer</footer>
    </div>
</body>

</html>

 

float을 사용한 2단 레이아웃

 

📌table-cell을 이용한 2단 레이아웃 구성

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>2단 레이아웃(display:table)</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
</head>
<style>
    html, body, #wrap {
        height: 100%;
    }
    .header {
        height: 100px;
        background-color:lightslategrey;
    }
    .container {
        display: table;
        table-layout: fixed;
        width: 800px;
        min-height: 100%;
        /* container 100%를 주기 위해서는 부모의 상속이 필요하므로 html, body, #wrap 에 height:100% 지정  */
        margin: -100px auto;   
        padding: 100px 0;
        box-sizing: border-box;
    }

    .content {
        display: table-cell;
        width: 500px;
        border-right: 5px solid #000;
        background-color:lightseagreen;
    }
    /* 컨테이너 길이가 높이 상속을 해서 table-cell들이 높이값이 함께 적용됨/heigth값은 없어도 됨. */
    .aside {
        display: table-cell;
        width: 300px;
        background-color:lightgreen;
    }
    .footer {
        height: 100px;
        background-color:lightpink;
    }

</style>

<body>
    <div id="wrap">
        <header class="header">header</header>
        <div class="container">
            <section class="content">content</section>
            <aside class="aside">aside</aside>
        </div>
        <footer class="footer">footer</footer>
    </div>
</body>

</html>

table-cell을 이용한 레이아웃 구성

 

상단고정 레이아웃

 

📌position을 이용한 상단 고정

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>상단 고정레이아웃</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
</head>
<style>
    html, body, #wrap {
        height: 100%;
    }
    .header {
        position: fixed;
        top: 0; left: 0; right: 0; /*상단 위치 고정 left, right 지정으로 width: 100%로 동작*/
        height: 100px;
        background-color: cadetblue;
    }
    .container {
        min-height: 100%;
        /* 스스로 높이값을 가질 수 없으므로 부모요소로부터 상속 받아야 함-> html, body, #wrap에 지정해야 함 */
        margin-top: -100px;
    }
    .content {
        max-width: 1200px;
        height: 1300px;
        margin: 0 auto;
        padding: 100px 0;
        background-color:lightsteelblue;
    }
    .footer {
        height: 100px;
        background-color:lightpink;
    }
</style>

<body>
    <div id="wrap">
        <header class="header">header</header>
        <div class="container">
            <section class="content">content</section>
        </div>
        <footer class="footer">footer</footer>
    </div>
</body>

</html>

 

📌position과 box-sizing을 이용한 상단 고정

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>상단 고정레이아웃(box-sizing)</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
</head>
<style>
    html, body, #wrap {
        height: 100%;
    }
    #wrap {
        min-height: 800px;
        text-align: center;
    }
    .header {
        position: fixed;
        top: 0; left: 0; right: 0; /*상단 위치 고정 left, right 지정으로 width: 100%로 동작*/
        height: 100px;
        background-color: cadetblue;
    }
    .container {
        min-height: 100%;
        /* 스스로 높이값을 가질 수 없으므로 부모요소로부터 상속 받아야 함-> html, body, #wrap에 지정해야 함 */
        margin-top: -100px;
        padding-top: 200px;
        box-sizing: border-box;
        /* padding값을 콘텐츠 사이즈에 포함할 수 있는 box-sizing으로 적용한다 */
    }
    .content {
        max-width: 1200px;
        height: 1300px;
        margin: 0 auto;
        background-color:lightsteelblue;
    }
    .footer {
        height: 100px;
        background-color:lightpink;
    }
</style>

<body>
    <div id="wrap">
        <header class="header">header</header>
        <div class="container">
            <section class="content">content</section>
        </div>
        <footer class="footer">footer</footer>
    </div>
</body>

</html>

 

 

상하단고정 레이아웃

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>상하단 고정레이아웃(box-sizing)</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="reset.css">
</head>
<style>
    html, body, #wrap {
        height: 100%;
    }
    #wrap {
        min-height: 800px;
        text-align: center;
    }
    .header {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 100px;
        background-color: cadetblue;
    }
    .container {
        min-height: 100%;
        /* 스스로 높이값을 가질 수 없으므로 부모요소로부터 상속 받아야 함-> html, body, #wrap에 지정해야 함 */
        padding: 100px 0;
        box-sizing: border-box;
    }
    .content {
        max-width: 1200px;
        height: 1300px;
        margin: 0 auto;
        background-color:lightsteelblue;
    }
    .footer {
        position: fixed;
        bottom: 0; right: 0; left: 0;
        height: 100px;
        background-color:lightpink;
    }
</style>

<body>
    <div id="wrap">
        <header class="header">header</header>
        <div class="container">
            <section class="content">content</section>
        </div>
        <footer class="footer">footer</footer>
    </div>
</body>

</html>
반응형
SMALL

'[project] boostcourse' 카테고리의 다른 글

[실습] image list 제작하기_3/3  (0) 2021.08.22
[실습] image list 제작하기_2/3  (0) 2021.08.20
[실습] 텍스트 말줄임표 만들어보기  (0) 2021.08.13
[실습] image list 제작하기_1/3  (0) 2021.08.13
[실습] 탭제작하기  (0) 2021.08.12

'[project] boostcourse'의 다른글

  • 현재글[실습] 레이아웃 만들어보기

관련글

티스토리툴바