Clone 7. Error 404

JOY·2024년 2월 7일

CSS 노마드코더

CSS Layout Masterclass

목록 보기

12/13

오늘의 과제

이전에 했던 테두리 + 메인 그리드 형태의 레이아웃
장식 요소 몇 개 빼고는 특이할 게 없어보인다.

나도 속도를 높이기 위해 HTML과 CSS를 같이 해보겠다.

1. 분석

column은 1짜리 8개,
row는 211 211 형태이다.

특이한 부분은 ① not found 장식 ② 중간 부분의 테두리 radius ③ 저 대각선 border

2. 비교

3. 결과

1) HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>title</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="bar">
        <span>This page does not exist · This page does not exist · This page does not exist · This page does not exist
            · This page does not exist · This page does not exist
            · This page does not exist · This page does not exist</span>
    </div>
    <div class="bar">
        <span>This page does not exist · This page does not exist · This page does not exist · This page does not exist
            · </span>
    </div>
    <div class="main">
        <div class="title">
            <h1>error 404</h1>
        </div>
        <div class="menu">
            <h2>Exhibition</h2>
        </div>
        <div class="menu">
            <h2>Literature</h2>
        </div>
        <div class="menu">
            <h2>Calendar</h2>
        </div>
        <div class="menu">
            <h2>Perfortming Art Projects</h2>
        </div>
        <div class="menu">
            <h2>Contact Us</h2>
        </div>
        <div class="img">
            <img src="https://source.unsplash.com/random" alt="">
        </div>
        <div class="article">
            <h2>The Ballad of Sexual Dependency</h2>
        </div>
        <div class="article">
            <h2>Death is a mistake</h2>
        </div>
        <div class="img">
            <img src="https://source.unsplash.com/random" alt="">
        </div>
        <div class="card">
            <div class="card__top"><span>19 October 2020</span><span>Sofometqi</span></div>
            <div class="card__info">
                <h2>Between Gender Identities</h2>
                <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi culpa architecto sapiente
                    necessitatibus asperiores numquam minus tenetur non laudantium aspernatur vero, illo saepe magnam
                    reiciendis perspiciatis explicabo iste consectetur eveniet!</span>
            </div>
        </div>
        <div class="card">
            <div class="card__top"><span>29 September 2019</span><span>Cxvari</span></div>
            <div class="card__info">
                <h2>Reason without strength</h2>
                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero debitis, sint impedit sequi et
                    hic consequuntur deleniti vero ex ipsam placeat nostrum obcaecati fugit delectus, asperiores illum
                    corrupti aliquam numquam?</span>
            </div>
        </div>
        <div class="card">
            <div class="card__top"><span>07 August 2020</span><span>Maison Margiela</span></div>
            <div class="card__info">
                <h2>Sexual equality means Immortality to us all</h2>
                <span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, ea dicta. Aliquam eveniet eius
                    similique, tenetur, et necessitatibus nisi facere accusamus enim quisquam tempora laudantium
                    accusantium in deleniti. Aliquid, quaerat!</span>
            </div>
        </div>
        <div class="card">
            <div class="card__row">
                <h2>Subscribe</h2>
            </div>
            <div class="card__row"><span>Your mail here</span>
                <h2>Send</h2>
            </div>
        </div>
        <div class="menu">
            <h2>Facebook</h2>
        </div>
        <div class="menu">
            <h2>Twitter</h2>
        </div>
        <div class="menu">
            <h2>Instagram</h2>
        </div>
        <div class="menu">
            <div class="line"></div>
        </div>

    </div>
    <div class="bar">
        <span>This page does not exist · This page does not exist · This page does not exist · This page does not exist
            · </span>
    </div>
    <div class="bar">
        <span>This page does not exist · This page does not exist · This page does not exist · This page does not exist
            · This page does not exist · This page does not exist
            · This page does not exist · This page does not exist</span>
    </div>
</body>

</html>

2) CSS

@import "css/reset.css";
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Days+One&family=Syne:wght@400;500;600;700;800&display=swap');

$superbigfont : 70px;
$bigfont : 30px;
$smallfont : 18px;
$white : #f0f0f0;
$grey : #d9d9d9;
$green : #57ff57;
$syne : 'Syne', sans-serif;
$blackhans: 'Black Han Sans', sans-serif;

// @keyframes slide {
//     0% {
//         transform: translateY(-3000%) rotateZ(90deg);
//     }
//     100% {
//         transform: translateY(calc(0%-45px)) rotateZ(90deg);
//     }
// }

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    grid-template-rows: 40px 1fr 40px;
    height: 100vh;
    background-color: black;
}

.bar {
    background-color: $green;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    overflow: hidden;
    position: relative;
    
    span {
        position: absolute;
        width: max-content;
    }
    
    &:first-child {
        grid-column: 2/3;
    }
    
    &:nth-child(2) {
        grid-row: 1/4;
        span {
            rotate: -90deg;
        }
    }

    &:nth-child(4) {
        grid-row: 1/4;
        span {
            rotate: 90deg;
        }
    }

    &:nth-child(5) {
        span {
            rotate: 180deg;
        }
    }
}

.main {
    margin: 2px;
    height: 100vh;
    grid-column: 2/3;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: 2fr 1fr 1fr 2fr 1fr 1fr;
    gap: 1px;
    
    > * {
        background-color: $grey;
        padding: 10px;
        box-sizing: border-box;
    }
    .title {
        grid-column: span 8;
        font-size: $superbigfont;
        text-transform: uppercase;
        font-family: $blackhans;
        display: flex;
        justify-content: space-around;
    }

    .menu{
        display: flex;
        align-items: center;
        position: relative;
        overflow: hidden;
    &:nth-child(5) {
        grid-column: span 2;
        }

        .line {
            position: absolute;
            width: 1px;
            height: 250px;
            right: 50%;
            background-color: black;
            rotate: -66deg;
        }
    }

    .article {
        display: flex;
        align-items: center;
        background-color: $white;
    
        &:nth-child(8) {
            grid-column: span 4;
        }

        &:nth-child(9) {
            grid-column: span 2;
        }


    }

    .img {
        grid-column: span 2;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            object-fit: cover;
        }

        &:nth-child(7) {
            grid-row: span 3;
            img {
                width: 100%;
                height: 100%;
            }
        }
        &:nth-child(10){
            background-color: $white;
            img {
                max-height: 200px;
                width: 100%;
            }
        }
    }

    .card {
        grid-column: span 2;
        background-color: $white;
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        overflow: hidden;

        &:nth-child(11){
            border-radius: 0px 0px 10px 0px;
        }
        &:nth-child(12) {
            border-radius: 0px 0px 0px 10px;
        }
        &:nth-child(13) {
            grid-column: span 4;
            grid-row: span 2;
            border-radius: 0px 10px 0px 0px;
        }
        &:nth-child(14) {
            background-color: $grey;
            grid-row: span 2;
            border-radius: 10px 0px 0px 0px;
        }
        .card__top {
            display: flex;
            justify-content: space-between;
        }

        .card__row {
            display: flex;
            justify-content: space-between;

            &:last-child {
                align-items: flex-end;
                border-bottom: 1px solid black;
                > * {
                    margin-bottom: 10px;
                }
            }
        }

    }

}