유튜브 사이트 따라 만들기

Min Hyung Kim·2021년 7월 20일
CSShtml
0

프론트엔드 만들기!

목록 보기
2/4
post-thumbnail
post-custom-banner

시작하기전 기본 세팅

  • Google Fonts : 폰트 참고
  • Font Awesome : 아이콘 입력 확인(Kits에서 나에게 발급받은 코드 확인)
  • MDN : 각종 태그 및 속성 사용 확인
  • Color Tool : 어떤 색깔 조합으로 해야 디자인적으로 좋을지 확인

개발 방향

Mobile First

  • 모바일 버전으로 먼저 개발하고, 이후 웹사이트에 맞는 확장형으로 구현
  • 최근 기업들이 많이 추구하는 개발 방향

개발 순서

  1. 박스를 통해 나누면서 기본 틀 만들기
  2. 각 박스에 필요한 구성요소(아이콘, 폰트, 영상, 그림) 확인
  3. 태그를 박스에 하나씩 입력하면서 진행상황 확인

주의사항

  • div는 줄바꿈 O, span : 줄바꿈 X
  • ol과 ul 활용하기
  • class명을 잘 구분지어놓으면 나중에 한꺼번에 폰트 적용하기에 용이함 

index.html

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

<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">
    <script src="https://kit.fontawesome.com/3624917c4f.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <header>
        <div class="logo">
            <i class="fab fa-youtube"></i>
            <span class="title">Youtube</span>
        </div>
        <div class="icons">
            <i class="fas fa-search"></i>
            <i class="fas fa-ellipsis-v"></i>
        </div>
    </header>

    <!-- Video Player -->
    <section class="player">
        <video controls src="video/Sandiego.mp4"></video>
    </section>

    <!-- Video Info -->
    <div class="infoAndUpNext">
        <section class="info">
            <div class="metadata">
                <ul class="hashtags">
                    <li>#usa</li>
                    <li>#sandiego</li>
                    <li>#beach</li>
                </ul>
                <div class="titleAndButton">
                    <span class="title">2017년 3월말 샌디에고에 혼자 여행갔을때 찍은 영상입니다. 다시 보니 미국에 또 가고싶네요ㅠ 언제쯤 이 시국이 끝날지 아무도 모르는 상황에서
                        참으로
                        답답하네요 흑흑흑 미국말고 다른곳도 여행을 가고싶습니다!!!
                        I'm missing Cali life:(</span>
                    <button class="moreBtn">
                        <i class="fas fa-caret-down"></i>
                    </button>
                </div>
                <span class="views">조회수 43,081,279회 2021. 07. 20</span>
            </div>
            <!-- Actions -->
            <ul class="actions">
                <li>
                    <button>
                        <i class="active fas fa-thumbs-up"></i>
                        <span>19.9만</span>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fas fa-thumbs-down"></i>
                        <span>103</span>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fas fa-share"></i>
                        <span>공유</span>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fas fa-plus"></i>
                        <span>저장</span>
                    </button>
                </li>
                <li>
                    <button>
                        <i class="fab fa-font-awesome-flag"></i>
                        <span>신고</span>
                    </button>
                </li>
            </ul>
            <!-- Channel Description -->
            <div class="channel">
                <div class="metadata">
                    <img src="image/profile.jpg" alt="">
                    <div class="info">
                        <span class="name">민브로 코딩</span>
                        <span class="subscribers">206.8만명</span>
                    </div>
                </div>
                <button class="subscribe">구독</button>
            </div>
        </section>
        <section class="upNext">
            <span class="title">추천영상</span>
            <ul>
                <li class="item">
                    <div class="img">
                        <img src="image/Joker.jpg" alt="">
                    </div>
                    <div class="info">
                        <span class="title">조커가 거울을 본다?</span>
                        <span class="name">김조커</span>
                        <span class="views">조회수 10만</span>
                    </div>
                    <button class="moreBtn">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </li>
                <li class="item">
                    <div class="img">
                        <img src="image/MJ.jpg" alt="">
                    </div>
                    <div class="info">
                        <span class="title">마이클 조던은 하늘을 날았다</span>
                        <span class="name">박엠제이</span>
                        <span class="views">조회수 4만</span>
                    </div>
                    <button class="moreBtn">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </li>
                <li class="item">
                    <div class="img">
                        <img src="image/StrangerThings.jpg" alt="">
                    </div>
                    <div class="info">
                        <span class="title">기묘한 이야기는 이 세상에 없는 새로운 이야기라는걸 누구나 다 알고있겠지만..... 과연 그럴까요?</span>
                        <span class="name">맛있는 형제들</span>
                        <span class="views">조회수 54.7만</span>
                    </div>
                    <button class="moreBtn">
                        <i class="fas fa-ellipsis-v"></i>
                    </button>
                </li>
            </ul>
        </section>
    </div>
</body>
</html>
style.css

:root {
    /* Color */
    --white-color: #fff;
    --black-color: #140a00;
    --blue-color: #045fd4;
    --red-color: #ff0000;
    --grey-dark-color: #909090;
    --grey-light-color: #e0e0e0;

    /* Size */
    --padding: 12px;
    --avatar-size: 36px;

    /* Font Size */
    --font-large: 18px;
    --font-medium: 14px;
    --font-small: 12px;
    --font-micro: 10px;
}

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

body {
    font-family: Roboto;
}

ul {
    list-style: none;
}

button,
button:focus {
    border: none;
    cursor: pointer;
    outline: none;
    background-color: #00ff0000;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    padding: var(--padding);
    background-color: var(--black-color);
    color: var(--white-color);
}

header .logo {
    font-size: var(--font-large);
}

header .logo i {
    color: var(--red-color);
}

header .icons .fa-search {
    margin-right: var(--padding);
}

/* Video Player */
.player {
    text-align: center;
    background-color: var(--black-color);
    position: sticky;
    top: 0;
}

.player video {
    width: 100%;
    height: 100%;
    max-width: 1000px;
}

.infoAndUpNext > .info {
    padding: var(--padding);
}

.info .metadata .hashtags {
    display: flex;
    font-size: var(--font-small);
    color: var(--blue-color);
}

.info .metadata .hashtags li {
    margin-right: var(--padding);
}

.info .metadata .titleAndButton {
    display: flex;
}

.info .metadata .titleAndButton .title {
    font-size: var(--font-medium);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-right: var(--padding);
}

.info .metadata .titleAndButton .moreBtn {
    height: 100%;
}

.infoAndUpNext > .info .views {
    font-size: var(--font-small);
    color: var(--grey-dark-color);
}

.info .actions {
    display: flex;
    justify-content: space-around;
    font-size: var(--font-small);
}

.info .actions button {
    display: flex;
    flex-direction: column;
    margin: var(--padding) 0;
    color: var(--grey-dark-color);
}

.info .actions button i {
    margin: 0 auto;
    margin-bottom: calc(var(--padding )/ 2);
    font-size: 16px;
}

.info .actions button i.active {
    color: var(--blue-color);
}

/* Channel Description */
.channel {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--grey-light-color);
    border-bottom: 1px solid var(--grey-light-color);
}

.channel .metadata {
    display: flex;
    align-items: center;
}

.channel .metadata img {
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
}

.channel .metadata .info {
    display: flex;
    flex-direction: column;
}

.channel .metadata .info .name {
    font-size: var(--font-medium);
}

.channel .metadata .info .subscribers {
    font-size: var(--font-small);
    color: var(--grey-dark-color);
}

.channel .subscribe {
    color: var(--red-color);
    font-size: var(--font-medium);
}

/* Up Next */
.upNext {
    padding: 0 var(--padding);
}

.upNext > .title {
    font-size: var(--font-medium);
    color: var(--grey-dark-color);
    margin-bottom: calc(var(--padding)/2);
}

.upNext .item {
    display: flex;
    margin-top: var(--padding);
}

.upNext .item .img{
    flex: 1 1 35%;
    margin-right: var(--padding);
}

.upNext .item .img img{
    width: 100%;
}

.upNext .item .info{
    flex: 1 1 60%;
}

.upNext .item .moreBtn{
    flex: 1 1 5%;
}

.upNext .item .info {
    display: flex;
    flex-direction: column;
}

.upNext .item .info .name,
.upNext .item .info .views {
    font-size: var(--font-small);
}

.infoAndUpNext {
    display: flex;
    flex-direction: column;

}

@media screen and (min-width: 768px)  {
    .infoAndUpNext {
        flex-direction: row;
        margin: var(--padding);
    }
}
profile
Min Hyung Kim
지금은 갈팡질팡하지만 점차 바르게 걷게될지어다
이전 포스트

반응형 헤더 만들기

다음 포스트

쇼핑몰 미니게임 클론 코딩(Dream Coding by 엘리)

post-custom-banner

0개의 댓글