Ex 003 | Photo Frame

dhforb123·2021년 11월 12일
0

HTML/CSS 예제

목록 보기
3/4

[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용을 활용한 연습 예제.
- Photo Frame
- CSS Grid

👨‍💻 Photo Frame 👨‍💻

1. Result

학습한 grid 속성을 활용해 간단하게 사진첩 틀을 제작한 것이다.
Grid-container는 전체 영역을 height: 100vh로 viewport height의 100% 채워 설정하고 각 셀 사이에 gap: 10px로 간격을 주었다.

2. Code

<!-- This is Photo Frame (Grid) -->
<!DOCTYPE html>
<html lang="ko">
<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 Exercise</title>
    <link rel="stylesheet" href="reset.css">
    <style>
        ul{
            display: grid;
            height: 100vh;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            list-style: none;
        }

        li{
            border: 1px solid black;
        }

        .first{
            grid-column: 1 / 4;
            grid-row: 1 / 3;
            background-color: #989AA6;
        }
        
        .second{
            grid-column: 4 / 6;
            grid-row: 1 / 4;
            background-color: #666973;
        }
        
        .third{
            grid-column: 1 / 3;
            background-color: #3B3C40;
        }

        .forth{
            background-color: #0C0C0D;
        }

        .fifth{
            grid-column: 1 / 3;
            grid-row: 4 / 6;
            background-color: #CCD0D9;
        }

        .sixth{
            grid-column: 3 / 6;
            grid-row: 4 / 6;
            background-color: #989AA6;
        }
    </style>
</head>
<body>
    <ul>
        <li class="first"></li>
        <li class="second"></li>
        <li class="third"></li>
        <li class="forth"></li>
        <li class="fifth"></li>
        <li class="sixth"></li>
    </ul>
</body>
</html>

3. Review

Grid 속성을 통한 정렬을 사용하고 Grid-container의 속성과 Grid-item의 속성을 다양하게 사용하여 제작하면서 해당 속성에 대해 충분히 이해할 수 있는 예제였다.

0개의 댓글