본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

4,5일차 | code_grid3

by Sharon kim 2021. 11. 19. 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>class_grid2 > 06-2.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            display: grid;
            grid-template-areas:
                'e e e . .'
                'e e e . .';
        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
        }

        .parent div.item {
            background-color: crimson;
            grid-area: e;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="item">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_04_1.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            height: 300px;
            display: grid;
            grid-template-columns: auto auto auto auto auto auto;
            gap: 10px;
        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
        }

        .parent div.item {
            background-color: crimson;
            /* 가로시작 라인 / 세로시작 라인 / 가로종료 라인 / 세로 종료라인 */
            /* grid-area: 1 / 2 / 5 / 6; */

            /* 순서 반드시 기억 */
            /* 가로  /  세로  */
            grid-area: 2 / 1 / span 2 / span 3;
        }
    </style>

</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div class="item">8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <!-- <div>14</div>
        <div>15</div> -->
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_04_3.html</title>
    <style>
        .parent {
            border: 5px solid #333;
            padding: 10px;
            background-color: #eee;
            width: 400px;
            height: 400px;
            display: grid;
        }

        .parent div {
            border-radius: 5px;
            padding: 10px;
            margin: 10px;
            text-align: center;
        }

        .parent div:nth-child(1) {
            background-color: yellowgreen;
            grid-area: 1 / 1 / 2 / 2;
        }

        .parent div:nth-child(2) {
            background-color: red;
            grid-area: 2 / 2 / 1 / 3;
        }

        .parent div:nth-child(3) {
            background-color: yellow;
            grid-area: 2 / 1 / 3 / 2;
        }

        .parent div:nth-child(4) {
            background-color: blue;
            grid-area: 2 / 2 / 3 / 3;
            /* 시작가로 / 시작세로 / 종료가로 / 종료세로 */
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_05.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            display: grid;
            width: 500px;
            height: 300px;
        }

        .item1 {
            grid-area: 1 / 1 / 2 / 3;
            background-color: crimson;
            z-index: 0;
        }

        .item2 {
            grid-area: 1 / 2 / 3 / 3;
            background-color: darkgray;
            z-index: 1;
        }

        .item3 {
            grid-area: 2 / 2 / 2 / 4;
            background-color: darkorchid;
            z-index: 0;
        }
    </style>
</head>

<body>
    <!--div.parent>div{$}*3-->
    <div class="parent">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_05_1.html</title>
    <style>
        .parent {
            border: 5px solid #000;

            display: grid;
            width: 500px;
            height: 300px;

        }

        .parent div {
            display: grid;
            justify-items: center;
            align-items: center;
        }

        .item1 {
            grid-area: 1 / 1 / 2 / 3;
            background-color: red;
            z-index: 0;
        }

        .item2 {
            grid-area: 1 / 2 / 3 / 3;
            background-color: pink;
            z-index: 1;
        }

        .item3 {
            grid-area: 2 / 2 / 2 / 4;
            background-color: hotpink;
            z-index: 0;
        }
    </style>
</head>

<body>
    <!--div.parent>div{$}*3-->
    <div class="parent">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
    </div>
</body>

</html>

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_06.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            display: grid;
            grid-template-areas: 'item1 item1 item1 item1 item1';
        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
        }

        .parent div.item {
            background-color: crimson;
            grid-area: item1;
            grid-row: 1;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div class="item">6</div>
    </div>
</body>

</html>

 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_06_1.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            display: grid;
            grid-template-areas: 'item1 item1 . . .';
        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
        }

        .parent div.item {
            background-color: crimson;
            grid-area: item1;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="item">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_06_2.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            display: grid;
            grid-template-areas:
                '. . . item1 item1'
                '. . . item1 item1'
            ;
        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
        }

        .parent div.item {
            background-color: crimson;
            grid-area: item1;
        }

        .parent div.item {}
    </style>
</head>

<body>
    <div class="parent">
        <div class="item">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_07.html</title>
    <style>
        .parent {
            display: grid;
            border: 5px solid #000;
            background-color: khaki;
            grid-template-areas:
                'header header header'
                'gnb content lnb'
                'gnb footer footer';
            height: 100vh;

        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
        }

        .header {
            grid-area: header;
        }

        .gnb {
            grid-area: gnb;
        }

        .content {
            grid-area: content;
        }

        .lnb {
            grid-area: lnb;
        }

        .footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="header">header</div>
        <div class="gnb">gnb</div>
        <div class="content">content</div>
        <div class="lnb">lnb</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_08.html</title>
    <!-- 빈 셀 만들기 -->
    <style>
        .parent {
            border: 5px solid #000;
            background-color: khaki;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            grid-template-rows: auto;
            grid-template-areas:
                'header header header header'
                'content content . lnb'
                'footer footer footer footer';
        }

        .parent div {
            text-align: center;
            font-size: 30px;
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;

        }

        .header {
            grid-area: header;
        }

        .content {
            grid-area: content;
        }

        .lnb {
            grid-area: lnb;
        }

        .footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="header">header</div>
        <div class="content">content</div>
        <div class="lnb">lnb</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_09.html</title>
    <style>
        body {
            margin: 0;
        }

        .parent {
            border: 5px solid #000;
            display: grid;
            background-color: khaki;
            height: 700px;
            grid-template-columns: auto auto auto;
            align-content: space-between;
            justify-content: space-between;
        }

        .item {
            font-size: 30px;
            border: 1px solid #000;
            background-color: skyblue;
            width: 150px;
            height: 150px;
            justify-items: center;
            align-items: center;
            display: grid;
        }

        .item div {
            width: 100px;
            height: 100px;
            background-color: crimson;
            text-align: center;

        }

        .one {
            display: grid;
            justify-items: start;
            align-items: start;

        }

        .one div {
            background-color: #000;
            color: #fff;
            ;
        }

        .two div {
            justify-self: end;
            align-self: center;
            display: grid;
        }

        .nine div {
            /* width: 150px;
            height: 150px; */
            display: grid;
            justify-self: stretch;
            align-self: stretch;
            width: auto;
            height: auto;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="item one">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item two">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item three">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item four">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item five">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item six">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item seven">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item eight">
            <div><img src="https://placeimg.com/100/100/any" alt=""></div>
        </div>
        <div class="item nine">
            <div><img src="https://placeimg.com/150/150/any" alt=""></div>
        </div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_10.html</title>
    <style>
        .parent {
            border: 5px solid #333;
            width: 600px;
            padding: 10px;
            background-color: khaki;
            display: grid;
            gap: 10px;
            grid-template-columns: 50% 50%;

        }

        .parent div {
            border-radius: 5px;
            background-color: white;
            padding: 10px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">Lorem ipsum dolor sit amet.</div>
        <div class="child2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque, dolorum.</div>
        <div class="child3">3</div>
        <div class="child4">4</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_10_1.html</title>
    <style>
        .parent {
            border: 5px solid #333;
            width: 600px;
            padding: 10px;
            background-color: khaki;
            display: grid;
            gap: 10px;
            grid-template-columns: 50% 50%;
            grid-template-areas: 'child3 child3';

        }

        .parent div {
            border-radius: 5px;
            background-color: white;
            padding: 10px;
            margin-right: 10px;
        }

        .child3 {
            grid-area: child3;
            grid-row: 2;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">Lorem ipsum dolor sit amet.</div>
        <div class="child2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque, dolorum.</div>
        <div class="child3">3</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_10_2.html</title>
    <style>
        .parent {
            border: 5px solid #333;
            width: 600px;
            padding: 10px;
            background-color: khaki;
            display: grid;
            gap: 10px;
            grid-template-columns: 50% 50%;
            grid-template-areas: 'child3 child3';

        }

        .parent div {
            border-radius: 5px;
            background-color: white;
            padding: 10px;
            margin-right: 10px;
        }

        .child3 {
            grid-area: child3;
            grid-row: 2;
        }

        @media (max-width: 768px) {
            .parent {
                width: 100%;
                grid-template-columns: 100%;
                grid-template-areas: 'child3';
            }

            .child3 {
                grid-row: 1;
            }
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">Lorem ipsum dolor sit amet.</div>
        <div class="child2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque, dolorum.</div>
        <div class="child3">3</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_10_3.html</title>
    <!-- 연습 클론코딩 -->
    <style>
        .parent {
            border: 5px solid #333;
            width: 600px;
            padding: 10px;
            background-color: khaki;
            display: grid;
            gap: 10px;
            grid-template-columns: 50% 50%;
            grid-template-areas: 'child3 child3';
        }

        .parent div {
            border-radius: 5px;
            background-color: #fff;
            padding: 10px;
            margin-right: 10px;
        }

        .child3 {
            grid-area: child3;
            grid-row: 2;
        }

        @media (max-width: 768px) {
            .parent {
                width: 100%;
                grid-template-columns: 100%;
                grid-template-areas: 'child3';
            }

            .child3 {
                grid-row: 1;
            }
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child1">Lorem ipsum dolor sit amet.</div>
        <div class="child2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam!</div>
        <div class="child3">3</div>
        <div class="child4">4</div>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">
<!-- grid로 레이아웃 , flex로 내용 채우기 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_ex_1.html</title>
    <style>
        * {
            margin: 0;
        }

        .container {
            display: grid;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 100px 1fr 100px;
            gap: 10px;
            grid-template-areas:
                'header header header'
                'menu main aside'
                'footer footer footer';
            height: 100vh;

        }

        .container div {
            border: 1px solid #000;
            background-color: skyblue;
            display: grid;
            padding: 20px;
            justify-items: start;
            align-items: start;
        }

        .header {
            grid-area: header;
        }

        .menu {
            grid-area: menu;
        }

        .main {
            grid-area: main;
        }

        .aside {
            grid-area: aside;
        }

        .footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">header</div>
        <div class="menu">menu</div>
        <div class="main">main</div>
        <div class="aside">aside</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_ex_2.html</title>
    <style>
        * {
            margin: 0;
            list-style: none;
            text-decoration: none;
        }

        .wrap {
            display: grid;
            grid-template-columns: 15% auto;
            grid-template-rows: 150px auto 150px;
            background-color: rgb(131, 127, 81);
            grid-template-areas:
                'header header header'
                'nav content content'
                'footer footer footer';
            height: 100vh;
        }

        .wrap div {
            padding: 20px;
        }

        .header {
            background-color: crimson;
            grid-area: header;
            text-align: center;
            font-weight: bold;
            font-size: 50px;
        }

        .nav {
            background-color: violet;
            grid-area: nav;
            margin: 0 0 0 -30px;

        }

        .nav ul li a {
            font-weight: bold;
            font-size: 20px;
            color: #000;
        }

        .nav ul li a:hover {
            color: tomato;
        }

        .content {
            background-color: orange;
            grid-area: content;
            text-align: justify;

        }

        .content h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .imgandp {
            clear: both;
            display: block;
            content: '';
        }

        .imgandp>img {
            width: 300px;
            text-align: left;
            float: left;
        }

        .footer {
            background-color: yellowgreen;
            grid-area: footer;
        }
    </style>
</head>


<body>
    <div class="wrap">
        <div class="header">header</div>
        <div class="nav">
            <ul>
                <li><a href="#">nav_1</a></li>
                <li><a href="#">nav_2</a></li>
                <li><a href="#">nav_3</a></li>
                <li><a href="#">nav_4</a></li>
            </ul>
        </div>
        <div class="content">
            <h2>content</h2>
            <div class="imgandp">
                <img src="https://joshua1988.github.io/images/posts/web/layout.png" alt="grid 레이아웃">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore vitae unde iste mollitia dolorum
                    quae dolor omnis nesciunt velit, asperiores hic facere harum cum explicabo laudantium dolorem
                    sapiente
                    qui
                    officia Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore vitae unde iste mollitia
                    dolorum
                    quae dolor omnis nesciunt velit, asperiores hic facere harum cum explicabo laudantium dolorem
                    sapiente
                    qui officia Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore vitae unde iste mollitia
                    dolorum quae
                    dolor omnis nesciunt velit, asperiores hic facere harum cum explicabo laudantium dolorem sapiente
                    qui
                    officia Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore vitae unde iste mollitia
                    dolorum
                    quae dolor omnis nesciunt velit, asperiores hic facere harum cum explicabo laudantium dolorem
                    sapiente
                    qui officia Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore vitae unde iste mollitia
                    dolorum quae
                    dolor omnis nesciunt velit, asperiores hic facere harum cum explicabo laudantium dolorem sapiente
                    qui
                    officia Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore vitae unde iste mollitia
                    dolorum
                    quae dolor omnis nesciunt velit, asperiores hic facere harum cum explicabo laudantium dolorem
                    sapiente
                </p>
            </div>
        </div>
        <div class="footer">
            <h3>footer</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, itaque libero, eum natus ipsa non
                temporibus quod nostrum voluptates ea qui a et dolores asperiores minima, possimus fugiat quisquam
                perspiciatis.</p>
        </div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_ex_3.html</title>
    <style>
        body {
            margin: 0;
        }

        .parent {
            display: grid;
            grid-template-columns: 150px auto 150px;
            grid-template-rows: 100px 150px 1fr 150px 100px;
            gap: 10px;
            grid-template-areas:
                'header header header '
                'menu main top'
                'menu main aside'
                'menu main bottom'
                'footer footer footer';
            height: 100vh;
        }

        .parent>div {
            border: 1px solid #000;
            border-radius: 5px;
            background-color: skyblue;
            text-align: center;
            padding: 20px;
        }

        .header {
            grid-area: header;
        }

        .menu {
            grid-area: menu;
        }

        .main {
            grid-area: main;
        }

        .top {
            grid-area: top;
        }

        .aside {
            grid-area: aside;
        }

        .bottom {
            grid-area: bottom;
        }

        .footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="header">header</div>
        <div class="menu">menu</div>
        <div class="main">main</div>
        <div class="top">top</div>
        <div class="aside">aside</div>
        <div class="bottom">bottom</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_ex_3_1.html</title>
    <style>
        body {
            margin: 0;
        }

        .parent {
            display: grid;
            grid-template-columns: 150px auto 150px;
            grid-template-rows: 100px 150px 1fr 150px 100px;
            gap: 10px;
            grid-template-areas:
                'header header header '
                'menu main top'
                'menu main aside'
                'menu main bottom'
                'footer footer footer';
            height: 100vh;
        }

        .parent>div {
            border: 1px solid #000;
            border-radius: 5px;
            background-color: skyblue;
            text-align: center;
            padding: 20px;
            display: grid;
            justify-items: center;
            align-items: center;
        }

        .header {
            grid-area: header;
        }

        .menu {
            grid-area: menu;
        }

        .main {
            grid-area: main;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            text-align: center;
        }

        .main div {
            background-color: khaki;
            display: grid;
            justify-items: center;
            align-items: center;
            justify-self: stretch;
            align-self: stretch;
        }

        .top {
            grid-area: top;
        }

        .aside {
            grid-area: aside;
        }

        .bottom {
            grid-area: bottom;
        }

        .footer {
            grid-area: footer;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="header">header</div>
        <div class="menu">menu</div>
        <div class="main">
            <div class="m_div">1</div>
            <div class="m_div">2</div>
            <div class="m_div">3</div>
            <div class="m_div">4</div>
        </div>
        <div class="top">top</div>
        <div class="aside">aside</div>
        <div class="bottom">bottom</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>grid_ex_4.html</title>
    <style>
        body {
            margin: 0;
            font-family: verdana;
        }

        .frame {
            display: grid;
            grid-template-columns: repeat (5, auto);
            grid-template-areas:
                'd1 d2 d2'
                'd1 d5 d3'
                'd4 d4 d3';
            gap: 10px;
            height: 100vh;
        }

        .frame div {
            border: 1px solid #000;
            background-color: gold;
            font-size: 30px;
            display: grid;
            justify-items: center;
            align-items: center;


        }

        .d1 {
            grid-area: d1;
        }

        .d2 {
            grid-area: d2;
        }

        .d3 {
            grid-area: d3;
        }

        .d4 {
            grid-area: d4;
        }

        .d5 {
            grid-area: d5;
        }
    </style>
</head>

<body>
    <div class="frame">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
        <div class="d5">5</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>grid_ex_4_1.html</title>
    <style>
        body {
            margin: 0;
            font-family: verdana;
        }

        .frame {
            display: grid;
            grid-template-columns: repeat (5, auto);
            grid-template-areas:
                'd1 d2 d2'
                'd1 d5 d3'
                'd4 d4 d3';
            gap: 10px;
            height: 100vh;
        }

        .frame div {
            border: 1px solid #000;
            background-color: gold;
            font-size: 30px;
            display: grid;
            justify-items: center;
            align-items: center;
        }

        .d1 {
            grid-area: d1;
            display: grid;
            grid-template-columns: repeat (3, auto);
            grid-template-areas:
                'sub1 sub2'
                'sub3 sub3';
            font-size: 30px;
            font-weight: bold;
            font-family: courier;
            color: #999;
        }

        .d1 div {
            border: 1px solid #999;
            background-color: chartreuse;
            display: grid;
            justify-items: center;
            align-items: center;
            justify-self: stretch;
            align-self: stretch;
        }

        .d1 .sub1 {
            grid-area: sub1;
        }

        .d1 .sub2 {
            grid-area: sub2;
        }

        .d1 .sub3 {
            grid-area: sub3;
        }

        .d2 {
            grid-area: d2;
        }

        .d3 {
            grid-area: d3;
        }

        .d4 {
            grid-area: d4;
        }

        .d5 {
            grid-area: d5;
        }
    </style>
</head>

<body>
    <div class="frame">
        <div class="d1">
            <div class="sub1">sub1</div>
            <div class="sub2">sub2</div>
            <div class="sub3">sub3</div>

        </div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
        <div class="d5">5</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>grid_ex_7.html</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: grid;
            justify-items: center;
            align-items: center;
        }

        .frame {
            justify-content: center;
            align-content: center;
            display: grid;
            width: 960px;
            gap: 15px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, minmax(200px, auto));

        }

        .frame div {

            border-radius: 10px;
            box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.20);
            padding: 25px;

        }
    </style>
</head>

<body>

    <div class="frame">
        <div>Lorem ipsum dolor sit amet.</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, itaque!</div>
        <div>Lorem ipsum dolor sit amet consectetur.</div>
        <div>Lorem.</div>
        <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero consectetur at fugiat magnam.</div>
        <div>Lorem ipsum dolor sit.</div>
    </div>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid_ex_8.html</title>
    <style>
        body {
            margin: 0;
            font-family: arial;
        }

        .container {

            display: grid;
            grid-template-columns: 250px 1fr 250px;
            grid-template-rows: 100px 450px 1fr 100px;
            grid-template-areas:
                'header header header'
                'welcome welcome welcome'
                'banner main aside'
                'footer footer footer';

        }

        .container>div {
            border: 1px solid #000;
            display: grid;
            justify-items: center;
            align-items: center;
            padding: 20px;
        }

        .header {
            grid-area: header;
            background-color: khaki;
            text-align: center;
            font-size: 30px;
            font-weight: bold;

        }

        .welcome {
            background: url(welcome-image.jpg) no-repeat center center;
            background-size: cover;
            grid-area: welcome;
            font-weight: bold;
            font-size: 30px;
            color: tomato;

        }


        .banner {
            grid-area: banner;
        }

        .main {
            grid-area: main;
            text-align: justify;
        }

        .aside {
            grid-area: aside;
        }

        .footer {
            grid-area: footer;
            background-color: silver;
        }

        @media (max-width:768px) {
            .container {
                grid-template-columns: 1fr;
                grid-template-rows: 100px 450px 100px 1fr 100px 100px;
                grid-template-areas:
                    'header'
                    'welcome'
                    'banner'
                    'main'
                    'aside'
                    'footer';
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="header">header</div>
        <div class="welcome">
            welcome
        </div>
        <div class="banner">banner</div>
        <div class="main">
            <h2>This is Main Content</h2>
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit corrupti ad laboriosam aut voluptatibus
                labore libero voluptatum alias illum nihil numquam excepturi, dolores recusandae impedit laborum odit
                aliquid dicta eveniet?Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod, harum deserunt!
                Laborum sapiente sequi, iste assumenda ex reprehenderit explicabo, pariatur necessitatibus nobis atque
                ipsam ut iusto earum amet autem distinctio!Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit
                corrupti ad laboriosam aut voluptatibus labore liberovoluptatum alias illum nihil numquam excepturi,
                dolores recusandae impedit laborum odit aliquid dicta eveniet?Lorem
                ipsum, dolor sit amet consectetur adipisicing elit. Quod, harum deserunt!
            </p>
        </div>
        <div class="aside">aside</div>
        <div class="footer">footer</div>
    </div>
</body>

</html>

'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글

7일차 | 자바스크립트 round 6~11, airbnb 클론 코딩  (0) 2021.11.23
6일차 | 그리드 예제 최종, 자바스크립트 round1~5  (0) 2021.11.22
3일차 | class_grid2  (0) 2021.11.19
2일차 | code_grid  (0) 2021.11.19
1일차 | code_html  (0) 2021.11.19

관련글

티스토리툴바