[HTML/CSS] 광복절 기념 태극기 마크업

오늘입니다 :)

광복절을 기념해서 태극기를 CSS로 작업해봤어요
생각보다 코드가 조금 지저분하게 나와서 속상합니다ㅠㅠ
썸네일은 작업한 화면이고 애니메이션을 준 화면은
▼ 아래에서 확인 가능해요 ▼

결과화면 바로보기

HTML 코드

<div class="flag_box">
        <section class="geon">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </section>
        <section class="gon">
            <div class="one">
                <div class="subone"></div>
                <div class="subtwo"></div>
                <div class="subthree"></div>
            </div>
            <div class="two"></div>
            <div class="three">
                <div class="subone"></div>
                <div class="subtwo"></div>
                <div class="subthree"></div>
            </div>
        </section>
        <section class="gam">
            <div class="one"></div>
            <div class="two">
                <div class="subone"></div>
                <div class="subtwo"></div>
                <div class="subthree"></div>
            </div>
            <div class="three"></div>
        </section>
        <section class="lee">
            <div class="one">
                <div class="subone"></div>
                <div class="subtwo"></div>
                <div class="subthree"></div>
            </div>
            <div class="two">
                <div class="subone"></div>
                <div class="subtwo"></div>
                <div class="subthree"></div>
            </div>
            <div class="three">
                <div class="subone"></div>
                <div class="subtwo"></div>
                <div class="subthree"></div>
            </div>
        </section>
        <section class="taegeuk">
            <div class="half_red"></div>
            <div class="red_circle"></div>
            <div class="half_blue"></div>
            <div class="blue_circle"></div>
        </section>
    </div>
    <div class="shine_box"></div>

CSS 코드

body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    position: relative;
    display: flex;
    align-items: center;
    align-content: center;
}

.shine_box {
    width: 680px;
    height: 680px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 48px;
    background: linear-gradient(to right, transparent 0, rgba(0, 0, 0, 0.4) 10%, #fff 20%);
    background-position: 0;
    animation: shine 3s infinite linear;
    animation-fill-mode: forwards;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    z-index: 999;
}

.flag_box {
    width: 680px;
    height: 680px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 48px;
}

.flag_box .one,
.flag_box .two,
.flag_box .three {
    width: 30px;
    height: 200px;
    margin-right: 10px;
    border: none;
}

.flag_box .geon .one,
.flag_box .geon .two,
.flag_box .geon .three,
.flag_box .gon .two,
.flag_box .gam .one,
.flag_box .gam .three {
    width: 30px;
    height: 200px;
    background: #000;
    margin-right: 10px;
    border: none;
}

.flag_box .subone,
.flag_box .subthree {
    width: 100%;
    height: 45%;
    background: #000;
}

.flag_box .subtwo {
    width: 100%;
    height: 10%;
    background-color: #fff;
}

.flag_box .geon {
    display: flex;
    position: absolute;
    top: 15%;
    left: 15%;
    transform: rotate(42deg);
    overflow: hidden;
    flex-wrap: nowrap;
}

.flag_box .gon {
    display: flex;
    position: absolute;
    top: 15%;
    right: 15%;
    transform: rotate(132deg);
    overflow: hidden;
    flex-wrap: nowrap;
}

.flag_box .gam {
    display: flex;
    position: absolute;
    bottom: 15%;
    left: 15%;
    transform: rotate(315deg);
    overflow: hidden;
    flex-wrap: nowrap;
}

.flag_box .lee {
    display: flex;
    position: absolute;
    bottom: 15%;
    right: 15%;
    transform: rotate(221deg);
    overflow: hidden;
    flex-wrap: nowrap;
}

.flag_box .taegeuk {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flag_box .half_blue {
    width: 100%;
    height: 50%;
    background-color: #00f;
}

.flag_box .red_circle {
    position: absolute;
    background-color: #f00;
    width: 50%;
    height: 40%;
    border-radius: 50%;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.flag_box .half_red {
    width: 100%;
    height: 50%;
    background-color: #f00;
}

.flag_box .blue_circle {
    background-color: #00f;
    width: 50%;
    height: 40%;
    border-radius: 50%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    position: absolute;
}

@keyframes shine {
    0% {
        background-position: 0
    }
    60% {
        background-position: 340px;
    }
    100% {
        background-position: 780px;
    }
}