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

2일차 | code_grid

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>01.html</title>
    <style>
        body {}

        div {
            border: 3px solid skyblue;
            background-color: aliceblue;
            height: 50px;
            width: 50px;
            display: block;
           
        }
    </style>
</head>

<body>
    <div>가</div>
    <div>나</div>
    <div>다</div>
    <div>라</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>02.html</title>
    <style>
        span {
            border: 3px solid skyblue;
            background-color: aliceblue;
            display: block;
        }
    </style>
</head>

<body>
    <span>안녕하세요</span>
    <span>안녕하세요</span>
    <span>안녕하세요</span>
    <span>안녕하세요</span>
</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_03.html</title>
    <style>
        .parent {
            display: grid;
            grid-template-columns: auto auto auto;
            border: 5px solid #000;
            grid-template-rows: 100px;
        }

        .parent div {
            color: #fff;
            text-align: center;
            font-size: 30px;
            background-color: yellowgreen;
            border: 1px solid #fff;

        }
    </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>
</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>03_1.html</title>
    <style>
        table,
        th,
        td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            padding: 5px;
            text-align: center;
            margin: 20px;
        }

        th {
            background-color: #000;
            color: #fff;
        }

        img {

            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <!-- <table>
        <tr>
            <td>섹션1</td>
            <td>섹션2</td>
        </tr>
        <tr>
            <td>섹션3</td>
            <td>섹션4</td>
        </tr>
    </table> -->
    <!-- <table>
        <thead>
            <tr>
                <th> 학교 </th>
                <th>창립연도</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>서울대학교</td>
                <td>1940</td>
            </tr>
            <tr>
                <td>고려대학교</td>
                <td>1905</td>
            </tr>
            <tr>
                <td>연세대학교</td>
                <td>1885</td>
            </tr>
        </tbody>
    </table>



    <table>
        <thead>
            <th>block</th>
            <th>inline</th>
            <th>html&css</th>
        </thead>
        <tbody>
            <tr>
                <td>div</td>
                <td>span</td>
                <td>html</td>
            </tr>
            <tr>
                <td>nav</td>
                <td>a</td>
                <td>css</td>
            </tr>
            <tr>
                <td>section</td>
                <td>...</td>
                <td>Javascript</td>
            </tr>
        </tbody>
    </table> -->

    <!-- colspan열은 좌우로 확장합니다.
         rowspan행은 상하로 확장합니다.-->

    <table>
        <tr>
            <td colspan="2">2x1 셀</td>

        </tr>
        <tr>
            <td>1x1 셀</td>
            <td>1x1 셀</td>
        </tr>
    </table>

    <br>

    <table>
        <tr>
            <td rowspan="2">1x2 셀</td>
            <td>1x1 셀</td>
        </tr>
        <tr>
            <td>1x1 셀</td>

        </tr>
    </table>

    <table>
        <tr>
            <td colspan="4">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnOdJIoryIBYHWguUR5PxQSX27ihBiG8dH8irph7-ns0O_Vt2vQWRr763-LiC_XlU3HIM&usqp=CAU"
                    alt="부부">
            </td>

        </tr>
        <tr>
            <td>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRo97floDkdzFA6Y2kWBmKi6Ga5xWEXBNI3Dw&usqp=CAU"
                    alt="아이1">
            </td>
            <td>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSObUB-3vYhlIlp6g-Qy-ff5OY1WP-As_p5PQ&usqp=CAU"
                    alt="아이2">
            </td>
            <td>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPlk-J9fdrMDqg5Q9Dw7RQIWamP8v1BAX_VQ&usqp=CAU"
                    alt="아이3">
            </td>
            <td>
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0ZeQ_sQxHP8nB2muC1ZY2G8QurDMv36WUWg&usqp=CAU"
                    alt="아이4">
            </td>
        </tr>



    </table>
</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">
    <!-- 파비콘 타이틀 영역의 이미지 -->
    <link rel="shortcut icon" sizes="76x76" type="image/x-icon"
        href="https://a0.muscache.com/airbnb/static/logotype_favicon-21cc8e6c6a2cca43f061d2dcabdf6e58.ico">
    <title>04.html</title>
</head>

<body>
    <h2>여러가지 아이콘</h2>
    <hr>
    <!-- 벡터기반 이미지(깨지지않음) -->
    <svg width="102" height="32" fill="currentcolor" style="display:block">
        <path
            d="M29.24 22.68c-.16-.39-.31-.8-.47-1.15l-.74-1.67-.03-.03c-2.2-4.8-4.55-9.68-7.04-14.48l-.1-.2c-.25-.47-.5-.99-.76-1.47-.32-.57-.63-1.18-1.14-1.76a5.3 5.3 0 00-8.2 0c-.47.58-.82 1.19-1.14 1.76-.25.52-.5 1.03-.76 1.5l-.1.2c-2.45 4.8-4.84 9.68-7.04 14.48l-.06.06c-.22.52-.48 1.06-.73 1.64-.16.35-.32.73-.48 1.15a6.8 6.8 0 007.2 9.23 8.38 8.38 0 003.18-1.1c1.3-.73 2.55-1.79 3.95-3.32 1.4 1.53 2.68 2.59 3.95 3.33A8.38 8.38 0 0022.75 32a6.79 6.79 0 006.75-5.83 5.94 5.94 0 00-.26-3.5zm-14.36 1.66c-1.72-2.2-2.84-4.22-3.22-5.95a5.2 5.2 0 01-.1-1.96c.07-.51.26-.96.52-1.34.6-.87 1.65-1.41 2.8-1.41a3.3 3.3 0 012.8 1.4c.26.4.45.84.51 1.35.1.58.06 1.25-.1 1.96-.38 1.7-1.5 3.74-3.21 5.95zm12.74 1.48a4.76 4.76 0 01-2.9 3.75c-.76.32-1.6.41-2.42.32-.8-.1-1.6-.36-2.42-.84a15.64 15.64 0 01-3.63-3.1c2.1-2.6 3.37-4.97 3.85-7.08.23-1 .26-1.9.16-2.73a5.53 5.53 0 00-.86-2.2 5.36 5.36 0 00-4.49-2.28c-1.85 0-3.5.86-4.5 2.27a5.18 5.18 0 00-.85 2.21c-.13.84-.1 1.77.16 2.73.48 2.11 1.78 4.51 3.85 7.1a14.33 14.33 0 01-3.63 3.12c-.83.48-1.62.73-2.42.83a4.76 4.76 0 01-5.32-4.07c-.1-.8-.03-1.6.29-2.5.1-.32.25-.64.41-1.02.22-.52.48-1.06.73-1.6l.04-.07c2.16-4.77 4.52-9.64 6.97-14.41l.1-.2c.25-.48.5-.99.76-1.47.26-.51.54-1 .9-1.4a3.32 3.32 0 015.09 0c.35.4.64.89.9 1.4.25.48.5 1 .76 1.47l.1.2c2.44 4.77 4.8 9.64 7 14.41l.03.03c.26.52.48 1.1.73 1.6.16.39.32.7.42 1.03.19.9.29 1.7.19 2.5zM41.54 24.12a5.02 5.02 0 01-3.95-1.83 6.55 6.55 0 01-1.6-4.48 6.96 6.96 0 011.66-4.58 5.3 5.3 0 014.08-1.86 4.3 4.3 0 013.7 1.92l.1-1.57h2.92V23.8h-2.93l-.1-1.76a4.52 4.52 0 01-3.88 2.08zm.76-2.88c.58 0 1.09-.16 1.57-.45.44-.32.8-.74 1.08-1.25.25-.51.38-1.12.38-1.8a3.42 3.42 0 00-1.47-3.04 2.95 2.95 0 00-3.12 0c-.44.32-.8.74-1.08 1.25a4.01 4.01 0 00-.38 1.8 3.42 3.42 0 001.47 3.04c.47.29.98.45 1.55.45zM53.45 8.46c0 .35-.06.67-.22.93-.16.25-.38.48-.67.64-.29.16-.6.22-.92.22-.32 0-.64-.06-.93-.22a1.84 1.84 0 01-.67-.64 1.82 1.82 0 01-.22-.93c0-.36.07-.68.22-.93.16-.3.39-.48.67-.64.29-.16.6-.23.93-.23a1.84 1.84 0 011.6.86 2 2 0 01.21.94zm-3.4 15.3V11.7h3.18v12.08h-3.19zm11.68-8.9v.04c-.15-.07-.35-.1-.5-.13-.2-.04-.36-.04-.55-.04-.89 0-1.56.26-2 .8-.48.55-.7 1.32-.7 2.31v5.93h-3.19V11.69h2.93l.1 1.83c.32-.64.7-1.12 1.24-1.48a3.1 3.1 0 011.81-.5c.23 0 .45.02.64.06.1.03.16.03.22.06v3.2zm1.28 8.9V6.74h3.18v6.5c.45-.58.96-1.03 1.6-1.38a5.02 5.02 0 016.08 1.31 6.55 6.55 0 011.6 4.49 6.96 6.96 0 01-1.66 4.58 5.3 5.3 0 01-4.08 1.86 4.3 4.3 0 01-3.7-1.92l-.1 1.57-2.92.03zm6.15-2.52c.57 0 1.08-.16 1.56-.45.44-.32.8-.74 1.08-1.25.26-.51.38-1.12.38-1.8 0-.67-.12-1.28-.38-1.79a3.75 3.75 0 00-1.08-1.25 2.95 2.95 0 00-3.12 0c-.45.32-.8.74-1.09 1.25a4.01 4.01 0 00-.38 1.8 3.42 3.42 0 001.47 3.04c.47.29.98.45 1.56.45zm7.51 2.53V11.69h2.93l.1 1.57a3.96 3.96 0 013.54-1.89 4.1 4.1 0 013.82 2.44c.35.76.54 1.7.54 2.75v7.24h-3.19v-6.82c0-.84-.19-1.5-.57-1.99-.38-.48-.9-.74-1.56-.74-.48 0-.9.1-1.27.32-.35.23-.64.52-.86.93a2.7 2.7 0 00-.32 1.35v6.92h-3.16zm12.52 0V6.73h3.19v6.5a4.67 4.67 0 013.73-1.89 5.02 5.02 0 013.95 1.83 6.57 6.57 0 011.59 4.48 6.95 6.95 0 01-1.66 4.58 5.3 5.3 0 01-4.08 1.86 4.3 4.3 0 01-3.7-1.92l-.09 1.57-2.93.03zm6.18-2.53c.58 0 1.09-.16 1.56-.45.45-.32.8-.74 1.09-1.25.25-.51.38-1.12.38-1.8a3.42 3.42 0 00-1.47-3.04 2.95 2.95 0 00-3.12 0c-.44.32-.8.74-1.08 1.25a3.63 3.63 0 00-.38 1.8 3.42 3.42 0 001.47 3.04c.47.29.95.45 1.55.45z">
        </path>
    </svg>
    🤴
    <!-- 이모지 : 그림형태의 문자 -->
    <!-- matarial icon -->
</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>
        .grid_con {
            background-color: #ddd;
            color: #fff;
            display: grid;
            grid-template-columns: auto auto;
            grid-template-rows: 100px;
            column-gap: 50px;
            row-gap: 50px;

        }

        .grid_con div {
            background-color: #222;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="grid_con">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>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_01.html</title>
    <style>
        .grid-con {
            /* grid는 항상 디스플레이 속성을  grid 로 줘야한다. */
            display: grid;
            grid-template-columns: auto auto auto;
            background-color: antiquewhite;
            padding: 10px;
        }

        .grid_item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Grid Elements</h1>
    <div class="grid-con">
        <div class="grid_item">1</div>
        <div class="grid_item">2</div>
        <div class="grid_item">3</div>
        <div class="grid_item">4</div>
        <div class="grid_item">5</div>
        <div class="grid_item">6</div>
        <div class="grid_item">7</div>
        <div class="grid_item">8</div>
        <div class="grid_item">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_01_1.html</title>
    <style>
        .parent {
            display: inline-grid;
            border: 5px solid #000;
        }

        .parent div {
            color: #fff;
            text-align: center;
            font-size: 30px;
            padding: 0 20px;
            border: 1px solid #fff;
            background-color: yellowgreen;
        }
    </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>

</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_02_1.html</title>
    <style>
        .grid-con {
            /* grid는 항상 디스플레이 속성을  grid 로 줘야한다. */
            display: grid;
            border: 5px solid rgba(0, 0, 0, 0.8);
            grid-template-columns: 100px 1fr 1fr;
            background-color: yellowgreen;
            padding: 10px;
            color: #fff;
        }

        .grid-con div {
            border: 1px solid #fff;
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>Grid Elements</h1>
    <div class="grid-con">
        <div class="grid_item">1</div>
        <div class="grid_item">2</div>
        <div class="grid_item">3</div>
        <div class="grid_item">4</div>
        <div class="grid_item">5</div>
        <div class="grid_item">6</div>
        <div class="grid_item">7</div>
        <div class="grid_item">8</div>
        <div class="grid_item">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_03.html</title>
    <style>
        .parent {
            display: grid;
            grid-template-columns: auto auto auto;
            border: 5px solid #000;
            grid-template-rows: 100px;
        }

        .parent div {
            color: #fff;
            text-align: center;
            font-size: 30px;
            background-color: yellowgreen;
            border: 1px solid #fff;

        }
    </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>
</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.html</title>
    <style>
        .grid_con {
            display: grid;
            border: 5px solid #333;
            grid-template-columns: 100px 20px auto auto auto;
            grid-template-rows: 30px 100px 70px;
        }

        .grid_con div {
            color: #fff;
            text-align: center;
            font-size: 30px;
            background-color: skyblue;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="grid_con">
        <div>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>10</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=div, initial-scale=1.0">
    <title>grid_03_1.html</title>
    <style>
        .parent {
            display: grid;
            border: 5px solid #000;
            background-color: pink;
            /* grid: 100px 200px / auto auto auto; */
            grid: auto auto auto / 100px 200px;
        }

        .parent {
            border: 1px solid #fff;
            background-color: yellowgreen;
            text-align: center;
        }
    </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>
</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.html</title>
    <style>
        .parent {
            border: 5px solid #000;
            background-color: #ddd;
            display: grid;
            grid-template-columns: auto auto auto;
            /* grid-column-gap: 30px; */
            /* grid-row-gap: 50px; */
            column-gap: 50px;
            row-gap: 60px;
        }

        .parent div {
            color: #fff;
            border: 1px solid #fff;
            background-color: yellowgreen;
            text-align: center;
        }
    </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>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_05.html</title>
    <style>
        .parent {
            display: grid;
            grid-template-columns: auto auto;
            background-color: #ddd;
            height: 200px;
            width: 500px;
            border: 5px solid #000;

        }

        .parent div {
            background-color: #333;
            color: #fff;
            font-size: 30px;
            width: 100px;
            height: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</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 dashed #000;
            width: 800px;
            height: 200px;
            display: grid;
            background-color: lightcyan;
            grid-template-columns: auto auto;
            /* 각자의 컬럼 내에서 !!!
             수평으로 정렬 */
            /* stretch가 기본값 */
            /* justify-items: start; */
            /* justify-items: center; */
            justify-items: end;


        }

        .parent div {
            color: #fff;
            text-align: center;
            font-size: 30px;
            background-color: darkturquoise;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</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;
            width: 600px;
            height: 300px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            background-color: thistle;
            /* 각자의 컬럼 내에서 수직으로 정렬 */
            /* start center end stretch->기본값 */
            align-items: start;

        }

        .parent div {
            color: lightpink;
            text-align: center;
            font-size: 30px;
            background-color: palevioletred;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <di class="parent">
        <div>1</div>
        <div>2</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 {
            background-color: #fff;
            border: 5px solid #000;
            width: 700px;
            height: 200px;
            display: grid;
            /* justify-items 수평정렬 */
            justify-items: stretch;
            /* align-items 수직정렬 */
            /* 둘다 stretch가 기본값 */
            /* align-items: center; */
            grid-template-columns: auto auto;
        }

        .parent div {
            background-color: #ddd;
            font-size: 30px;
            text-align: center;
            width: 100px;
            height: 100px;

        }
    </style>
</head>

<body>
    <div class="parent">
        <div>1</div>
        <div>2</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: deepskyblue;
            grid-template-columns: auto auto auto auto auto;
            column-gap: 10px;
            row-gap: 10px;
            gap: 100px 100px;
            /* justify-content 자식 요소를 수평으로 정렬 */
            /* justify-content: end; */
            /*space-around 자식요소를 수평으로 양쪽정렬 */
            /*space-between 자식요소를 수평으로 양쪽정렬
                            첫번째 컬럼과 마지막 컬럼은 양끝에 여백 없이 붙음 */
            justify-content: space-around;
        }

        .parent div {
            color: #fff;
            text-align: center;
            font-size: 30px;
            background-color: gold;
            width: 100px;
            padding: 20px 0px;
        }
    </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>8</div>
        <div>9</div>
        <div>10</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 {
            display: grid;
            border: 5px solid #000;
            background-color: deepskyblue;

            /* 수직 정렬이기 때문에 부모 요소의 높이값이 필요 */

            height: 500px;
            grid-template-columns: auto auto auto;
            gap: 10px;
            justify-content: center;
            /* align-content: end; */
            /* 수직을 기준으로 자식요소를 상하 양쪽 정렬 */
            /* align-content: space-around; */
            /*수직을 기준으로 자식요소를 상하 양쪽 정렬 
            (첫번째 컬럼과 마지막 컬럼은 부모 요소 양끝에 여백값이 붙음)*/
            align-content: space-between;
        }

        .parent div {
            color: #fff;
            text-align: center;
            background-color: coral;
            width: 100px;
            padding: 30px 0;
        }
    </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>
</body>

</html>

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

<head>
    <meta charset="UTF-8">
    <title>grid_all.html</title>
    <style>
        .h_wrap {
            display: grid;
            grid-template-columns: auto auto auto auto auto;
            grid-template-rows: 1fr 1fr;
            grid-column-gap: 50px;
            grid-row-gap: 50px;
            /* column-gap: 20px; */
            justify-content: center;
            border: 2px solid #fff;
            list-style: none;
            background-color: black;
            width: 100%;
            align-items: center;
        }

        .h_wrap>li {
            border: 2px solid #fff;
            color: #fff;
            font-size: 20PX;
            width: 100px;
            height: 50px;
            padding: 10px;
            text-align: center;

        }

        /* css 우선순위 
        1. 속성 값 뒤에 !impotant 를 붙인 속성
        2. html 에서 style을 직접 지정한 속성
        3. #id로 지정한 속성
        4. .클래스, :추상클래스로 지정한 속성
        5. 태그 이름으로 지정한 속성
        6. 상위 객체에 의해 상속된 속성
        같은 우선 순위에 있는 경우 --> 보다 구체적으로 적은 선택자를 우선 되어 적용된다.
        */
    </style>


    <!-- ol, ulo,
파비콘
svg
이모지o
grid 템플릿 칼럼o / 로우o
그리드 칼럼 겝ㅇ / 로우ㅇ
칼럼 갭 
로우 갭
align 아이템
저스티스 아이템
얼라인 컨텐츠
저스티스 컨텐츠 -->

    <style>

    </style>
</head>

<body>

    <ul class="h_wrap">
        <li>abcd😊</li>
        <li>efgh😊</li>
        <li>ijkl😊</li>
        <li>mno😊</li>
        <li>pqr😊</li>
        <li>1😊</li>
        <li>2😊</li>
        <li>3😊</li>
    </ul>


</body>

</html>

 

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

6일차 | 그리드 예제 최종, 자바스크립트 round1~5  (0) 2021.11.22
4,5일차 | code_grid3  (0) 2021.11.19
3일차 | class_grid2  (0) 2021.11.19
1일차 | code_html  (0) 2021.11.19
오전반_1~6일차 | 정리  (0) 2021.11.06

관련글

티스토리툴바