24. [HTML, CSS]_(1) YOUTUBE 화면 clone coding

hyunsoda·2024년 1월 22일
CSShtmlpractice

CSS

목록 보기
15/16
post-thumbnail

YOUTUBE 화면 구현

목표

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>youtube_clone_coding</title>
    <link rel="stylesheet" href="css/youtube.css">
    <script src="https://kit.fontawesome.com/9e480ae7f0.js" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <!-- 목록 버튼 -->
        <section class="head-buttons">
            <section>
            <button id="list-button" class="fa-solid fa-list" type="button"></button>
            </section>
        <!-- youtube 로고 -->
            <section>
            <a href="#">
                <img src="../images/YouTube-Logo.wine.png" id="home-logo">
            </a>
            </section>
        </section>
       
        <!-- 빈 화면 -->
        <section></section>


        <!-- 검색창 -->
        <section>
            <section class="search-area">
                <form action="#" name="search-form"></form>
        
                    <fieldset>
                        <input type="search" id="query" name="query" placeholder="검색">
                        <button id="keyboard" class="fa-regular fa-keyboard"></button>
             
                        <button id="search-btn" class="fa-solid fa-magnifying-glass"></button>
                    </fieldset>
                         
                    <section class="micro">
                         <button id="microphone" class="fa-solid fa-microphone"></button>
                    </section>
                        
                <!-- 음성 -->

                </form>
            </section>  
        </section>

        
         <!-- 빈 화면 -->
         <section></section>
      

        <!-- 설정 로그인 버튼 --> 
        <section>
            <section class="setting">
                <button id="setting-btn"class="fa-solid fa-ellipsis-vertical"></button>
            </section>
            <section class="login-icon">
                <button id="login-btn" class="fa-regular fa-circle-user"> 로그인</button>
            </section>
        </section>

    </header>





    <main>
        <section class="content">
            <section class="left">
                <section class="screen">
                    <iframe id="mainscreen" width="1400px" height="800px" src="https://www.youtube.com/embed/vpGrEoMQDQ8?si=O7n-YIq7yPB4k5wf" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                </section>

                <section class="title">
                    <h1 >𝗝𝗮𝘇𝘇 𝗣𝗶𝗮𝗻𝗼｜눈이 왔다, 완전한 겨울</h1>
                </section>

                <section class="user">
                    <section>
                        <button id="user-button" class="fa-regular fa-circle-user" ></button>
                    </section>


                    <section class="subscriber">
                        <section><a href="#">Loo Piano 루 피아노</a></section>
                        <section>구독자 10.8만</section>
                    </section>

                    <section>
                        <button id="subscribe">구독</button>
                    </section>

                    <section></section>

                    <section>
                        <button id="thumbs-up" class="fa-solid fa-thumbs-up"> 2.7천</button>
                    </section>

                    <section>
                        <button id="thumbs-down" class="fa-solid fa-thumbs-down"></button>
                    </section>

                    <section>
                        <button id="share" class="fa-solid fa-share">공유</button>
                    </section>

                    <section>
                        <button id="download" class="fa-solid fa-download"> 저장</button>
                    </section>

                    <section>
                        <button id="more" class="fa-solid fa-ellipsis"></button>
                    </section>
                </section>


                <section class="describe">
            
                      <fieldset>
        
    조회수 20만회  1개월 전  재즈피아노(Jazz Piano)<br>

    🎧듣는 분들의 행복을 기원하는 Loo Piano 입니다🎧<br>
    
    🎹제 채널의 음악은 모두 직접 작곡 및 편곡, 연주하고 있습니다🎹 …
    
                     </fieldset>
              
                </section>


                <section class="commentlist">
                    <section>댓글 152개</section>
                    <section>
                        <select id="sort-btn" class="fa-solid fa-list">
                            <option>인기 댓글순</option>
                            <option>최신순</option>
                            <option selected>정렬 기준</option>
                        </select>
                    </section>
                    <section></section>
                </section>

                <!-- 댓글 작성 -->
                <section class="writer">
                    <section>
                        <button id="writer-btn" class="fa-regular fa-circle-user"></button>
                    </section>

                    <section>
                        <input id="writer-input" placeholder="댓글 추가...">
                    </section>
                </section>
                <!-- 댓글 리스트 1-->
                <section class="comment">
                    <section class="comment-left">
                        <button id="comment-writer-btn" class="fa-regular fa-circle-user"></button>
                    </section>

                    <section class="comment-right">
                        <!-- 아이디 날짜 -->
                        <section class="id-date">
                            <section>@hyunsoda</section>
                            <section>1개월 전</section>
                            <section></section>
                        </section>
                        <!-- 댓글 본문 -->
                        <section>피아노 소리 너무 좋고 마음이 따뜻해지는 느낌이예요~~ </section>
                        <!-- 버튼들 -->
                        <section class="comment-bottom">
                            <section >
                                <button id="comment-good" class="fa-solid fa-thumbs-up">   1</button>
                            </section>
                            <section>
                                <button id="comment-bad" class="fa-solid fa-thumbs-down"></button>
                            </section>
                            <section><button id="recomment">답글</button></section>
                            <section></section>
                        </section>
                    </section>
                </section>
                <!-- 댓글 리스트 1-->
                <section class="comment">
                    <section class="comment-left">
                        <button id="comment-writer-btn" class="fa-regular fa-circle-user"></button>
                    </section>

                    <section class="comment-right">
                        <!-- 아이디 날짜 -->
                        <section class="id-date">
                            <section>@happy</section>
                            <section>3개월 전</section>
                            <section></section>
                        </section>
                        <!-- 댓글 본문 -->
                        <section>연주하시는 거 라이브로도 보고 싶네요🥹 항상 잘 듣고 있습니다...❤</section>
                        <!-- 버튼들 -->
                        <section class="comment-bottom">
                            <section>
                                <button id="comment-good" class="fa-solid fa-thumbs-up">   3</button>
                            </section>
                            <section>
                                <button id="comment-bad" class="fa-solid fa-thumbs-down"></button>
                            </section>
                            <section><button id="recomment">답글</button></section>
                            <section></section>
                        </section>
                    </section>
                </section>
            </section>
    


           

        
        <section class="right">

                <ul class="video-list">
                    <li>
                        <section class="video-left"><iframe src="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                        <!-- <section class="algorithm-list"> -->
                        <section class="algorithm-list">
                           
                                    <section class="list-title"><label>
                                        <a href="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM">
                                        Playlist | 디즈니 공주, 재즈 Playlist 
                                    </a></label></section>
                                  
                                    <section class="list-user"><label>
                                        <a href="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM">
                                        기분Jazz네 | Mood is Jazz 
                                    </a></label></section>

                                    <section class="list-info"><label>
                                        <a href="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM">
                                        조회수 7만회
                                    </a></label></section>
                            
                        </section>     
                        <!-- </section> -->
                    </li>
                    <!--  width="350" height="250"-->

                    <li>
                        <section class="video-left"><iframe  src="https://www.youtube.com/embed/Yu_X5ZS8HRo?si=0aSnhw9fbPLNdK7B" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                        <section class="algorithm-list">
                   
                            <section class="list-title"><label>
                                <a href="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM">
                                Playlist | 겨울을 담은, 재즈 
                            </a></label></section>
                        
                            <section class="list-user"><label>
                                <a href="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM">
                                기분Jazz네 | Mood is Jazz 
                            </a></label></section>

                            <section class="list-info"><label>
                                <a href="https://www.youtube.com/embed/O3oWeOsgGpA?si=aYpAZ3lueO-BOWYM">
                                조회수 11만회
                            </a></label></section>
                        </section>
                    </li>
                    


                <li>
                    <section><iframe src="https://www.youtube.com/embed/AOQVMoFC5-4?si=UjWwz_o3sKXEMF9l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/AOQVMoFC5-4?si=UjWwz_o3sKXEMF9l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                            첫눈이 오면 우리,다가온 재즈의 계절 | Winter Jazz | Jazz Lab
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/AOQVMoFC5-4?si=UjWwz_o3sKXEMF9l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                            Jazz Lab 
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/AOQVMoFC5-4?si=UjWwz_o3sKXEMF9l" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share">
                            조회수 5.2만회
                        </a></label></section>
                    </section>
                </li>



                <li>
                    <section><iframe width="560" height="315" src="https://www.youtube.com/embed/Kb2_njd7jJg?si=G4lH-XqA3Z0MAM9t" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/Kb2_njd7jJg?si=G4lH-XqA3Z0MAM9t">
                            Playlist | 크리스마스, 기타재즈
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/Kb2_njd7jJg?si=G4lH-XqA3Z0MAM9t">
                            기분Jazz네 | Mood is Jazz 
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/Kb2_njd7jJg?si=G4lH-XqA3Z0MAM9t">
                            조회수 23만회
                        </a></label></section>
                    </section>
                </li>



                <li>
                    <section><iframe width="560" height="315" src="https://www.youtube.com/embed/B4TgFIn3DNY?si=yKjSAga2lD8Jhyy8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/B4TgFIn3DNY?si=yKjSAga2lD8Jhyy8">
                            [1 HOUR] 긍정적인 에너지를 주는 지브리 음악 💎센과 치히로의 행방불명, 이웃집 토토로
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/B4TgFIn3DNY?si=yKjSAga2lD8Jhyy8">
                            BGM Totoro Studio 
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/B4TgFIn3DNY?si=yKjSAga2lD8Jhyy8">
                            조회수 239만회
                        </a></label></section>
                    </section>
                </li>



                <li>
                    <section><iframe width="560" height="315" src="https://www.youtube.com/embed/G_TJZ4KPqpA?si=t-kwMiHb3pYYkKwX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/G_TJZ4KPqpA?si=t-kwMiHb3pYYkKwX">
                            1시간 동안 집중력 최대치로 올려주는 재즈 노동요 | Work & Study Jazz | Relaxing Background Music
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/G_TJZ4KPqpA?si=t-kwMiHb3pYYkKwX">
                            WRG 우리가 듣고 싶어서 연주한 playlist 
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/G_TJZ4KPqpA?si=t-kwMiHb3pYYkKwX">
                            조회수 64만회
                        </a></label></section>
                    </section>
                </li>



                <li>
                    <section>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/q5KYHzrzojg?si=4cfKSB3-OathFdqk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/q5KYHzrzojg?si=4cfKSB3-OathFdqk"">
                            ☕️카페사장님들❗️오늘은 이 음악 틀어요😘😘𝘾𝘼𝙁𝙀&𝙅𝘼𝙕𝙕 l 카페재즈, 매장음악 l 𝙍𝙚𝙡𝙖𝙭𝙞𝙣𝙜 𝙅𝙖𝙯𝙯 𝙛𝙤𝙧 𝘾𝙖𝙛𝙚,𝘾𝙤𝙛𝙛𝙚𝙚 𝙎𝙝𝙤𝙥💖
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/q5KYHzrzojg?si=4cfKSB3-OathFdqk">
                                MONKEY BGM 
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/q5KYHzrzojg?si=4cfKSB3-OathFdqk">
                            조회수 57만회
                        </a></label></section>
                    </section>
                </li>



                <li>
                    <section>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/LAbDL2g2MII?si=GeOwSac8jps_lEOQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/LAbDL2g2MII?si=GeOwSac8jps_lEOQ">
                                𝚙𝚕𝚊𝚢𝚕𝚒𝚜𝚝 | 평화로운 마을
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/LAbDL2g2MII?si=GeOwSac8jps_lEOQ">
                                MONKEY BGM 
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/LAbDL2g2MII?si=GeOwSac8jps_lEOQ">
                            조회수 57만회
                        </a></label></section>
                    </section>
                </li>



                <li>
                    <section>
                        <iframe width="560" height="315" src="https://www.youtube.com/embed/ouGJhIK-occ?si=dj29XQvvL67HhjTm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></section>
                    <section class="algorithm-list">
                        <section class="list-title"><label>
                            <a href="https://www.youtube.com/embed/ouGJhIK-occ?si=dj29XQvvL67HhjTm">
                                𝑃𝑙𝑎𝑦𝑙𝑖𝑠𝑡 | 잔잔하고 아름다운 로맨스 판타지풍 플레이리스트
                        </a></label></section>
                    
                        <section class="list-user"><label>
                            <a href="https://www.youtube.com/embed/ouGJhIK-occ?si=dj29XQvvL67HhjTm">
                                찬사    
                        </a></label></section>

                        <section class="list-info"><label>
                            <a href="https://www.youtube.com/embed/ouGJhIK-occ?si=dj29XQvvL67HhjTm">
                            조회수 37만회
                        </a></label></section>
                    </section>
                </li>



                </ul>
            </section>
        </section>
    </main>
</body>
</html>

CSS

* {
    box-sizing: border-box;

    /* border: 1px solid black; */
}

body{
    margin: 0;
    margin-left: 33px;
    margin-right: 33px;
}

header {
    height: 100px;
    position:sticky;
    top:0;
    display: flex;
    background-color: white;
}

/* 상단 왼쪽 */
header > section:first-child{
    flex-basis: 10%;
    display: flex;
    flex-direction: row;
}

.head-buttons > section:first-child{
    flex-basis: 30%;
    display: flex;
   
}

#list-button {
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: none;
    font-size: 25px;
    margin-left: 40px;
    margin-bottom: 3px;
}

.head-buttons > section:last-child{
    flex-basis: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px;
}

#home-logo {
    width:145px;
    margin-left: 10px;
}

/* 빈 화면 */
header > section:nth-of-type(2){
    flex-basis: 20%;
}

header > section:nth-of-type(4){
    flex-basis: 20%;
}

/* 상단 가운데 */
header > section:nth-of-type(3){
    flex-basis: 40%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.search-area {
    width: 700px;
    display: flex;
    flex-direction: row;
    margin: 0;
    /* border: 1px solid black; */
   flex-basis: 95%;
}

.search-area fieldset {
    margin: 0;
    display: flex;
    border-radius: 100px;
    width: 700px;
    /* border: 1px solid black; */
}
.search-area section {
    flex-basis: 20%;
}

#query {
    border: none;
    font-size: 18px;
    font-weight: bold;
    outline: none;
    flex-basis: 92%;
    padding :3px;
    
}


.search-area button:first-child{
    flex-basis: 4%;
}

.search-area button:last-child{
    flex-basis: 4%;
}

#keyboard {
    border: transparent;
    background-color: transparent;
    font-size: 25px;
    cursor: pointer;
}


#search-btn {
    border:transparent;
    background-color:transparent;
    font-size: 25px;
    cursor: pointer;
}

.micro {
    margin-left: 35px;
    justify-content: center;
    align-items: center;
}

#microphone {
    margin: auto;
    margin-top: 3px;
    flex-basis: 5%;
    font-size: 35px;
    border-radius: 50%;
    border: transparent;
    background-color: rgb(230, 230, 227);
    cursor: pointer;
    /* background-size: 0px; */
}


/* 상단 오른쪽 */
header > section:last-child{
    flex-basis: 10%;
    display: flex;
}

.setting{
    flex-basis: 20%;
    display: flex;
}
#setting-btn {
    font-size: 25px;
    background-color: transparent;
    align-items: center;
    justify-content: center;
    margin: auto;
    border: transparent;
    cursor: pointer;
}
.login-icon {
    flex-basis: 80%;
    display: flex;
}

#login-btn{
    font-size: 25px;
    background-color: rgb(230, 230, 227);
    align-items: center;
    justify-content: center;
    margin: auto;
    border-radius: 30px;
    border: transparent;
    cursor: pointer;
}




/* content */

main {
    /* width: 1140px; */
    margin-left: 80px;
    margin-right: 80px;
    margin-top: 30px;
}
.content{
    display: flex;
    flex-direction: row;
}
.left {
    margin: 0;
    flex-basis: 75%;
    display: flex;
    flex-direction: column;
}
.right {
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    margin-top: 0;
    margin-left: 20px;
}


.screen {
    display: flex;
    margin: auto;

}

#mainscreen { 
    border-radius: 20px;
}

.left  iframe {
    margin-left: 20px;
}


.title > h1{
    font-size: 22px;
    font-weight: bold;
    margin-left: 35px;
}

.user {
    display: flex;
}

.subscriber{
    display: flex;
    flex-direction: column;
}

.user section:nth-of-type(1){
    flex-basis: 5%;
    display: flex;
    margin-left: 30px;
    justify-content: center;
    align-items: center;
}

.user section:nth-of-type(2){
    flex-basis: 17%;
    display: flex;
    margin-left: 30px;

}

.user section:nth-of-type(3){
    flex-basis: 5% ;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;
}

.user section:nth-of-type(4){
    flex-basis: 45%;
}

.user section:nth-of-type(5){
    flex-basis: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.user section:nth-of-type(6){
    flex-basis: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.user section:nth-of-type(7){
    flex-basis:5% ;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.user section:nth-of-type(8){
    flex-basis: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

.user section:nth-of-type(9){
    flex-basis:5% ;
    display: flex;
    justify-content: center;
    align-items: center;
}

#user-button {
    cursor: pointer;
    font-size: 50px;
    background-color: transparent;
    border: transparent;
}

.subscriber > section:first-child {
    margin-left: 0;
    display: flex;
    justify-content: start;
}
.subscriber > section:last-child {
    margin-left: 0;
  
}


.subscriber a {
    text-decoration: none;
    border: none;
    color: black;
    font-size: 20px;

}

#subscribe {
    border-radius: 25px;
    height: 45px;
    width:80px;
    font-size: 20px;
    line-height: 50%;
    background-color: black;
    color: white;
    cursor: pointer;
}

#thumbs-up {
    background-color: rgb(230, 230, 227);
    width: 85px;
    height: 30px;
    border-radius: 20px;
    cursor: pointer;
    border: transparent;
}

#thumbs-down {
    background-color: rgb(230, 230, 227);
    width: 40px;
    height: 30px;
    border-radius: 20px;
    cursor: pointer;
    border: transparent;
}


#share {
    background-color: rgb(230, 230, 227);
    width: 70px;
    height: 30px;
    border-radius: 20px;
    cursor: pointer;
    border: transparent;
}


#download {
    background-color: rgb(230, 230, 227);
    width: 70px;
    height: 30px;
    border-radius: 20px;
    cursor: pointer;
    border: transparent;
}

#more {
    background-color: rgb(230, 230, 227);
    width: 30px;
    height: 30px;
    border-radius: 100px;
    cursor: pointer;
    border: transparent;
}
    

.describe {
    display: flex;
    margin-top: 30px;
    margin-left: 30px;
     justify-content: center;
     align-items: center;
}

.describe  fieldset {
 background-color:rgb(230, 230, 227) ;
 border-radius: 20px;
 border: transparent;
 height: 100px;
 width: 1400px;
 text-align: start;
 line-height: 30px;

}

#describe-btn {
    border: transparent;
    background-color: transparent;
}

.describe fieldset:hover {
    background-color :rgb(209, 209, 207);
    cursor: pointer;
    outline: none;
}

.commentlist {
    display: flex;
    margin-top: 20px;
}

.commentlist > section:nth-of-type(1){
    font-size: 23px;
    margin-left: 30px;
    font-weight: bold;
    
}

.commentlist > section:nth-of-type(2){
    margin-left: 10px;
  

}

#sort-btn{
    background-color: transparent;
    border: transparent;
    font-size: 20px;
    margin-top: 4px;
    border-radius: 20px;
    outline: none;
}

.writer {
    display: flex ;
    margin-top: 30px;
}

.writer > section:first-child{
    margin-left: 30px;
    flex-basis: 5%;
}

.writer > section:last-child{
    flex-basis: 95%;
    display:flex;
    align-items: center;
}

#writer-btn {
    cursor: pointer;
    font-size: 50px;
    background-color: transparent;
    border: transparent;
}

#writer-input {
    margin-left: 3px;
    width: 1200px;
    outline: none;
    border: none;
    border-bottom: 1px solid black;
}
/* 댓글 작성 */
.comment {
    display: flex;
    margin-top: 60px;
}

.comment-left {
    margin-left: 30px;
    flex-basis: 5%;
    display: flex;
    align-items: start;
    /* margin-top: 0; */
   
}

#comment-writer-btn {
    cursor: pointer;
    font-size: 50px;
    background-color: transparent;
    border: transparent;
    margin-top: 0;
}

.comment-right{
    flex-basis: 95%;
    display: flex;
    flex-direction: column;
}

.comment-right > section:nth-of-type(1){
    flex-basis: 15%;
}

.comment-right > section:nth-of-type(2){
    flex-basis:35%;
    font-size: 20px;
}

.comment-right > section:nth-of-type(3){
    flex-basis: 50%;
}

.id-date{
    display: flex;
    margin-bottom: 10px;
}
/* 댓글작성자 아이디 */
.id-date > section:nth-of-type(1){
    flex-basis: 8%;
    font-weight: bold;
}
.id-date > section:nth-of-type(2){
    flex-basis: 8%;
}
.id-date  > section:nth-of-type(3){
    flex-basis: 84%;
}

.comment-bottom {
    display: flex;
    margin-top: 15px;
    flex-direction: row;
}

.comment-bottom > section:nth-of-type(1){
    flex-basis: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-bottom > section:nth-of-type(2){
    flex-basis: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-bottom > section:nth-of-type(3){
    flex-basis: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.comment-bottom > section:nth-of-type(4){
    flex-basis: 85%;
}

#comment-good {
    background-color: transparent;
    border: transparent;
    font-size: 17px;
    cursor: pointer;
    line-height: 50%;
}

#comment-bad {
    background-color: transparent;
    border: transparent;
    font-size: 19px;
    cursor: pointer;
}

#recomment {
    background-color: transparent;
    border: transparent;
    font-size: 17px;
    cursor: pointer;
}



/* right */
.right{
    display: flex;
   
}
.video-left{
    flex-basis: 40%;
    display: flex;
    
}

.algorithm-list{
    flex-basis: 60%;
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.video-list {
    display: flex;
    flex-direction: column;
    list-style: none;
    justify-content: flex-start;
    padding: 0;
    padding-top: 0;
    margin-top: 0;
    
}

.video-list > li{
    display: flex;
    margin-bottom: 15px;
}

.video-list iframe {
    width: 210px;
    height: 150px;
    border-radius: 20px;
  
}

.algorithm-list{
    display: flex;
    flex-direction: column;
}

.algorithm-list section:nth-of-type(1) {
    flex-basis: 40%;
    display: flex;
    margin-top: 10px;
}

.algorithm-list section:nth-of-type(2) {
    flex-basis: 25%;
    display: flex;
    
}

.algorithm-list section:nth-of-type(3) {
    flex-basis: 35% ;
    display: flex;
    margin-left: 0;
    margin-bottom: 10px;
    
}

.algorithm-list a {
    text-decoration: 0;
    color: black;
}
.algorithm-list> section:first-child{
    font-weight: bold;
}

.list-title {
    font-weight: bold;
    margin-top: 0;
    display: flex;
    align-items: center;
}

.list-user{
    font-size: 15px;
}

결과


아쉬운 점

  • Java script를 배우지 않아 아직 심화적인 기능이 없다
  • 코드가 왔다갔다하며 지저분한 느낌이 든다. ➡️ 연습해서 조금 더 깔끔하게 구현하기!
profile
hyunsoda
이전 포스트

23. [CSS]_(13) 시맨틱(Semantic) 태그

다음 포스트

25. [HTML, CSS]_(2) NETFLIX clone coding

0개의 댓글