[WEB FRONT] YOUTUBE 화면 구현 3

유진·2023년 9월 3일
CSSfronthtmlweb
0
post-thumbnail

CLONE 코딩 과제 : Youtube 화면 구현하기

youtube-clone.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube</title>
    <link rel="stylesheet" href="css/youtube-clone2.css">

    <script src="https://kit.fontawesome.com/f821b57119.js" crossorigin="anonymous"></script>
</head>
<body>
    <nav>
        <section class="nav1">
            <button class="fa-solid fa-bars" id="hambur-btn"></button>
            <a href="#"><img src="../images/youtube-logo.png" id="logo"></a>
        </section>

        <section class="nav2">
            <form>
                <fieldset class="nav2-fd">
                    <div>
                        <div class="nav2-fd-div1">
                            <input type="search" name="search" id="search"
                            placeholder="Search" autocomplete="off">
                        </div>
                        <div class="nav2-fd-div2">
                            <button class="fa-solid fa-magnifying-glass" id="serach-btn"></button>
                        </div>
                    </div>
                    <button class="fa-solid fa-microphone" id="mic-btn"></button>
                </fieldset>
            </form>
        </section>

        <section class="nav3">
            <button class="fa-solid fa-video"></button>
            <button class="fa-regular fa-bell"></button>
            <button class="fa-solid fa-user"></button>
        </section>
    </nav>

    <main>
        <!-- main left -->
       <section class="main1">
            <section class="top">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/RtXBIA-raj8?si=__lGm6P33ZszMEPl" title="YouTube video player"
                frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                </iframe> 
            </section>

            <section class="center">
                <div class="center-t">
                    lookbook🎱 무신사 찐 추천템 모음 ~ ⋆ 질문 폭주 팬츠부터 졸귀 가방까지 다 모았따 ⁼³₌₃ ( 스트릿 • 여름룩북 • 개강룩 • 키작녀 룩북 )   
                </div>
                <div class="center-c">
                    <div class="center-c1">
                        <div class="img-wrapper1">
                            <img src="../images/channel_profile.jpg" id="ch-prof">
                        </div>    
                    </div>
                    <div class="center-c2">
                        <span>아네딘<br></span>
                        <span>33.7K subscribers</span>
                    </div>
                    <div class="center-c3">
                        <div>
                            <button class="fa-regular fa-bell"></button>
                            <strong>Subscribed</strong>
                            <button class="fa-solid fa-chevron-down"></button>
                        </div>
                    </div>
                    <div class="center-c4">
                        <div>
                            <button class="fa-regular fa-thumbs-up"></button>
                            <strong>4.6K</strong>
                            <button class="fa-regular fa-thumbs-down"></button>
                        </div>
                        <div>
                            <button class="fa-solid fa-share"></button>
                            <strong>Share</strong>
                        </div>
                        <div>
                            <button class="fa-solid fa-download"></button>
                            <strong>Download</strong>
                        </div>
                        <div>
                            <button class="fa-solid fa-heart"></button>
                            <strong>Thanks</strong>
                        </div>
                        <div>
                            <button class="fa-solid fa-scissors"></button>
                            <strong>Clip</strong>
                        </div>
                        <div>
                            <button class="fa-solid fa-list-ul"></button>
                        </div>
                    </div>
                </div>
                <div class="center-b">
                    <strong>119K views  3 months ago</strong><br>
                    ✶ 스펙 :156 / 49<br>
                    ✶ 유료광고가 포함 되지 않았습니다.<br>
                    …<strong>more</strong>
                </div>
            </section>

            <section class="bottom">
                <div>
                    <div class="bottom-t-l">
                        79 Comments
                    </div>
                    <div class="bottom-t-r">
                        <button class="fa-solid fa-chart-bar"></button>
                        Sort by
                    </div>
                </div>

                <div>
                    <div class="bottom-c-l">
                        <div class="img-wrapper2">
                            <img src="../images/profile2.image.jpg">
                        </div>
                    </div>
                    <div class="bottom-c-r">
                        <p>Add a comment...</p>
                    </div>
                </div>

                <div>
                   <div class="bottom-b-l">
                        <div class="img-wrapper3">
                            <img src="../images/people-profile-1.jpg">
                        </div>
                   </div>    
                   <div class="bottom-b-r">
                        <div class="t">                        
                            <strong>@user-ww5jd8nf3l</strong>&nbsp;
                            8 days ago (edited) 
                        </div>    
                        <div class="c">
                            목소리도 넘 예쁘시고 얼굴도 넘 빛나시고<br>
                            예쁘세요..❤ 옷도 넘 잘어울리세요 좋은<br> 
                            영상 올려주셔서 너무 감사해요 첫 코디 색감 넘 예쁘고 편하게 입을수있을것 같아서 정말 마음에 드네요😊 다른옷들 도 넘 예뻐서 구경 잘하고 갑니다 히히<br>
                            썸네일 부터 진짜 완벽한 영상 끌려서 들어오게 되네요❤ 네딘님 , 이영상을 보시는 모든분들 꽃길만 걸으세요😊 
                        </div>    
                        <div class="b">
                            <button class="fa-regular fa-thumbs-up"></button>
                            <button class="fa-regular fa-thumbs-down"></button>
                            <button>Reply</button>
                        </div>    
                   </div>     
                </div>
            </section>
       </section> 

       <!-- main right -->
       <section class="main2">
            <div>
                <div class="main2-top-t">
                    <img src="../images/banner.jpg">
                </div>
                <div class="main2-top-b">
                    <div>
                        <div class="img-wrapper4">
                            <img src="../images/banner-profile.jpg">
                        </div>
                    </div>
                    <div>
                        KH 정보교육원<br>
                        <strong>Ad</strong>&nbsp;https://kh-academy.co.kr/
                    </div>
                    <div>
                        <button>자세히보기</button>
                    </div>
                </div>
            </div>

            <div>
                <div id="first-black"><strong>All</strong></div>
                <div><strong>From</strong> 아네딘</div>
                <div><strong>Lookbook</strong></div>
                <div><strong>Trousers</strong></div>
                <button class="fa-solid fa-angle-right"></button>
            </div>

            <div>
                <div>
                    <div class="if1-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/BIhUKOtP2yY?si=zoWI5nCRXZQCkiwp" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if1-r">
                        <div>
                            <strong>[SUB] cute and aesthetic<br>
                                summer outfits : festival,</strong>
                        </div>
                        <div>
                            윤비누YOONSOAP<br>
                            859K views 1 year ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if2-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/rIffmwtbfwE?si=CjpSlBUAwtXo5UzL" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if2-r">
                        <div>
                            <strong>국회 예산결산특별위원회, 결산<br>
                                심사 착수…이틀간 종합정책질의</strong>
                        </div>
                        <div>
                            MBCNEWS<br>
                            10K view s Streamed 3 days ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if3-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/nmkta3scIWI?si=9fltiJzlN0M96s_2" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>  
                    </div>
                    <div class="if3-r">
                        <div>
                            <strong>20만원대 백화점 퀄리티의 울 트위드<br>
                                자켓&10만원대 진짜 가죽</strong>
                        </div>
                        <div>Bongja봉자TV<br>
                            22K views 20 hours ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if4-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/881P3Vr5GQU?si=LVzXhU5GG43oFr9Q" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe> 
                    </div>
                    <div class="if4-r">
                        <div>
                            <strong>[스우파2/2회] 바다가 아예 안 보여🤯<br>
                                리더 계급의 피 튀기는 메</strong>
                        </div>
                        <div>The CHOOM (더 춤)<br>
                            1.5M views 2 days ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if5-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/Oy7QavoHSJw?si=Am7jIwLAy5gs9BuW" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if5-r">
                        <div>
                            <strong>핫한 브랜드 크롭티 8종 추천 ✦<br>
                                aeae • leey • Yuse • 러브이즈트</strong>
                        </div>
                        <div>미니월드 Minni<br>
                            85K views 2 months ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if6-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/oojtCfNVrJg?si=g1Ar-3-aTjI5HAFx" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if6-r">
                        <div>
                            <strong>반팔 싫어 인간을 위한 여름<br>
                                아우터/긴팔 추천 [쓰리타임즈, 애즈</strong>
                        </div>
                        <div>쭈스터<br>
                            10K views 3 months ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if7-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/p9ayBYigXbM?si=op_WWoG927p07EHt" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if7-r">
                        <div>
                            <strong>요즘 근황과 생각들 부터 어릴적<br>
                                이야기👼🏻, 출산에 대한 생각까</strong>
                        </div>
                        <div>규진<br>
                            52K views 2 days ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if8-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/4S4XxEZKXaE?si=Q3v3YMv7llOfWvno" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>

                        </iframe>
                    </div>
                    <div class="if8-r">
                        <div>
                            <strong>더죽긴파들 모여라~🌞 얇은<br>
                                여름용 긴바지 모음집 2022 ver. 린</strong>
                        </div>
                        <div>송이송이<br>
                            369K views 1 year ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if9-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/-d1sVxKkErw?si=ujV6IEgGP-yWCrnq" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe> 
                    </div>
                    <div class="if9-r">
                        <div>
                            <strong>lookbook🍂 가을 꾸안꾸 개강룩 —̳͟͞͞♡<br>
                                휘뚤마뚤 핏 예쁜 추천템만</strong>
                        </div>
                        <div>아네딘<br>
                            5.7K views 5 hours ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if10-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/UkkjhG1Sar0?si=mtw8WLm9DfFAISw8" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if10-r">
                        <div>
                            <strong>⋆⁺₊⋆ 𝕤𝕦𝕞𝕞𝕖𝕣 ･ﾟ✧* 지그재그 ⠂<br>
                                에이블리 여름룩북 ⋆｡˚☽˚｡⋆청바</strong>
                        </div>
                        <div>텅텅이<br>
                            993 views 5 days ago
                        </div>
                    </div>
                </div>
                <div>
                    <div class="if11-l">
                        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/5KtYkJzax0I?si=fwKmBpp_BGJXhesP" title="YouTube video player"
                        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
                        </iframe>
                    </div>
                    <div class="if11-r">
                        <div>
                            <strong>[SUB] 𝒐𝒐𝒕𝒅 𝒗𝒍𝒐𝒈 | wearing in<br>
                                one color🐾 : summer pants,</strong>
                        </div>
                        <div>윤비누YOONSOAP<br>
                        116K views 2 months ago
                        </div>
                    </div>
                </div>
            </div>
       </section> 
    </main>
</body>
</html>

youtube-clone.css

* {
    box-sizing: border-box;
}

body{
    margin: 0;
    padding: 0;
}

/* div,section {
    border: 1px solid black;
} */

nav {
    display: flex;
    width: 100%;
    height: 60px;
}

nav > section:nth-child(1),
nav > section:nth-child(3) {
    width: 20%;
}

nav > section:nth-child(2) {
    width: 60%;
}

.nav1 {
    display: flex;
    padding-left: 30px;
}

/* nav1 */
#hambur-btn {
    border: none;
    background-color: transparent;
    font-size: 30px;
    padding: 10px 18px;
}

#hambur-btn:hover {
    border: 1px solid #ddd;
    border-radius: 50%;
    background-color: #ddd;
    cursor: pointer;
}

#logo {
    width: 130px;
    height: 100%;
    padding: 5px 0px;
}

/* nav2 */
.nav2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

fieldset {
    border: none;

    display: flex;
}

.nav2-fd > div {
    border: 2px solid #ddd;
    border-radius: 20px;
    width: 500px;
    height: 35px;

    display: flex; 
}

.nav2-fd-div1 {
    width: 90%;
    border: none;
}

#search {
    border: none;
    width: 100%;
    font-size: 15px;
    padding: 6px 25px; 
    background-color: transparent;
}

#search:focus {
    outline: none;
}

.nav2-fd-div2 {
    width: 10%;
    border: none;
    display: flex;
    justify-content: center;
}

#serach-btn {
    border: none;
    font-size: 20px;
    background-color: transparent;
}

#mic-btn {
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 20px;
    background-color: #ddd;
    margin-left: 15px;
}

#mic-btn:hover {
    background-color: darkgrey;
}

/* nav3 */
.nav3 {
    display: flex;
    justify-content: flex-end;
}

.nav3 > button {
    font-size: 18px;
    margin: 0px 10px;
    border: none;
    background-color: transparent;
}

/* main */
main {
    width: 100%;
    height: 100%;

    display: flex;

    padding: 10px 80px;
}

/* main left */
.main1 {
    flex-basis: 70%;

    display: flex;
    flex-direction: column;
}

.main1 > .top {
    width: 100%;
    height: 600px;
}

.main1 > .center {
    width: 100%;
    height: 200px;

    display: flex;
    flex-direction: column;
}

.center > .center-t {
    flex-basis: 20%;

    font-size: 18px;
    font-weight: bold;
    padding-top: 4px;
}

.center > .center-c {
    flex-basis: 30%;

    display: flex;
    align-items: center;
}

.center-c1 {
    flex-basis: 5%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper1 {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;

    /* overflow : 흘러넘친 부분 숨기기*/
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

#ch-prof {
    height: 100%;
}

.center-c2 {
    flex-basis: 10%;
}

.center-c2 > span:nth-child(1) {
    font-size: 17px;
}

.center-c2 > span:nth-child(2) {
    font-size: 13px;
    color: gray;
}

.center-c3 {
    flex-basis: 35%;
}

.center-c3 > div {
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #ddd;
    width: 170px;
    height: 30px;
    padding: 2px 7px;
}

.center-c3 > div > button {
    border: none;
    background-color: transparent;
    font-size: 15px;
}

.center-c4 {
    flex-basis: 50%;

    display: flex;
    justify-content: flex-end;
}

.center-c4 > div {
    margin: 0 5px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #ddd;
    padding: 2px 9px;
}

.center-c4 button {
    border: none;
    background-color: transparent;
    font-size: 10px;
}

.center > .center-b {
    flex-basis: 50%;

    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #ddd;
    padding: 5px 8px;
}

.main1 > .bottom {
    width: 100%;
    height: 300px;

    display: flex;
    flex-direction: column;
}

.main1 > .bottom > div:nth-child(1) {
    flex-basis: 15%;

    display: flex;
    align-items: center;
}

.bottom-t-l {
    flex-basis: 15%;
    font-size: 18px;
    font-weight: bold;
}

.bottom-t-r {
    flex-basis: 85%;
    font-size: 13px;
    font-weight: bold;
}

.bottom-t-r > button {
    border: none;
    background-color: transparent;
    font-size: 20px;
}

.main1 > .bottom > div:nth-child(2) {
    flex-basis: 25%;

    display: flex;
}

.bottom-c-l {
    flex-basis: 5%;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bomttom-c-r {
    flex-basis: 95%;
}

.bottom-c-r > p {
    color: gray;
    padding: 0px 10px;
}

.img-wrapper2 {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    
    overflow: hidden;

    display: flex;
}

.img-wrapper2 > img {
    width: 100%;
    height: 100%;
}

.main1 > .bottom > div:nth-child(3) {
    flex-basis: 60%;

    display: flex;
}

.bottom-b-l {
    flex-basis: 5%;
    
    display: flex;
    justify-content: center;
}

.img-wrapper3 {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50px;

    overflow: hidden;
}

.img-wrapper3 > img {
    width: 100%;
    height: 100%;
}

.bottom-b-r {
    flex-basis: 95%;

    display: flex;
    flex-direction: column;
}

.bottom-b-r > .t {
    flex-basis: 20%;
}

.bottom-b-r > .c {
    flex-basis: 50%;
}

.bottom-b-r > .b {
    flex-basis: 30%;
}

.bottom-b-r > .t,
.bottom-b-r > .c,
.bottom-b-r > .b {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.bottom-b-r > .b > button {
    border: none;
    background-color: transparent;
    font-size: 20px;
    margin: 0px 5px;
}

.bottom-b-r > .b > button:hover {
    border: 1px solid #ddd;
    border-radius: 20px;
    background-color: #ddd;
    cursor: pointer;

    height: 30px;
}

.bottom-b-r > .b > button:nth-child(3) {
    font-size: 13px;
    font-weight: bold;
}

/* main right */
.main2 {
    flex-basis: 30%;

    display: flex;
    flex-direction: column;

    margin-left: 15px;
}

.main2 > div:nth-child(1) {
    flex-basis: 15%;

    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.main2-top-t {
    flex-basis: 40%;
}

.main2-top-b {
    flex-basis: 60%;

    display: flex;
    align-items: center;
}

.main2-top-t > img {
    width: 100%;
    height: 100%;
}

.main2-top-b > div:nth-child(1) {
    flex-basis: 15%;

    display: flex;
    justify-content: center;
}

.main2-top-b > div:nth-child(2) {
    flex-basis: 60%;
}

.main2-top-b > div:nth-child(3) {
    flex-basis: 25%;

    display: flex;
    justify-content: center;
}

.img-wrapper4 {
    width: 50px;
    height: 50px;
    border: none;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
}

.img-wrapper4 > img {
    width: 100%;
    height: 100%;
}

.main2-top-b > div:nth-child(3) > button {
    border: 1px solid blue;
    border-radius: 20px;
    background-color: blue;
    color: white;
    font-weight: bold;
    height: 40px;
}

.main2 > div:nth-child(2) {
    flex-basis: 8%;

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 20px;
}

.main2 > div:nth-child(2) > div {
    border: 1px solid #ddd;
    border-radius: 10%;
    background-color: #ddd;
    height: 30px;
    font-size: 17px;
    margin: 0px 5px;
    padding: 0px 10px;
}

#first-black {
    background-color: black;
    color: white;
    border: 1px solid black;
    border-radius: 10%;
}

.main2 > div:nth-child(2) > button {
    border: none;
    background-color: transparent;
    font-size: 25px;
    color: darkgray;
}

.main2 > div:nth-child(2) > button:hover {
    border: 1px solid #ddd;
    border-radius: 50px;
    background-color: #ddd;
}

.main2 > div:nth-child(3) {
    flex-basis: 77%;
}

.main2 > div:nth-child(3) > div {
    width: 100%;
    height: calc(100%/11);

    display: flex;
}

.if1-l,
.if2-l,
.if3-l,
.if4-l,
.if5-l,
.if6-l,
.if7-l,
.if8-l,
.if9-l,
.if10-l,
.if11-l {
    width: 40%;
    height: 100%;
}

.if1-r,
.if2-r,
.if3-r,
.if4-r,
.if5-r,
.if6-r,
.if7-r,
.if8-r,
.if9-r,
.if10-r,
.if11-r {
    width: 60%;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 5px;

    font-size: 15px;
}

.if1-r > div:nth-child(1),
.if2-r > div:nth-child(1),
.if3-r > div:nth-child(1),
.if4-r > div:nth-child(1),
.if5-r > div:nth-child(1),
.if6-r > div:nth-child(1),
.if7-r > div:nth-child(1),
.if8-r > div:nth-child(1),
.if9-r > div:nth-child(1),
.if10-r > div:nth-child(1),
.if11-r > div:nth-child(1) {
    flex-basis: 50%;
}

.if1-r > div:nth-child(2),
.if2-r > div:nth-child(2),
.if3-r > div:nth-child(2),
.if4-r > div:nth-child(2),
.if5-r > div:nth-child(2),
.if6-r > div:nth-child(2),
.if7-r > div:nth-child(2),
.if8-r > div:nth-child(2),
.if9-r > div:nth-child(2),
.if10-r > div:nth-child(2),
.if11-r > div:nth-child(2) {
    flex-basis: 50%;
    font-size: 13px;
    color: gray;
}

.main2 > div > div {
    margin-bottom: 7px;
}

/* 반응형 모바일 기준 */
/* 해상도 767px 이하면 무조건 여기 작성된대로 css 적용해라 */
@media all and (max-width:767px) {

    main {
        flex-direction: column;
        padding: 0;
    }

    nav {
        height: 60px;
    }

    nav > section:nth-of-type(2),
    nav > section:nth-of-type(3) {
        display: none;
    }

    nav > section:nth-of-type(1) {
        padding-left: 10px;
    }
    
    #logo {
        width: 100px;
    }

    .center-c4 > div {
        display: none;
    }

    .bottom-t-l,
    .bottom-t-r {
        display: none;
    }
}

구현 화면

구현 화면 | 모바일 버전

느낀 점.

- 모바일버전까지 생각해서 레이아웃 나누기!
profile
유진
이전 포스트

[WEB FRONT] YOUTUBE 화면 구현 2

다음 포스트

[WEB FRONT] TIL 036 - 23.09.04

0개의 댓글