close
프로필 배경
프로필 로고

왓누씨의 개발일기

DEVELOPMENT/HTML & CSS · 2024. 4. 23. fullscreen 넓게보기

[HTML/CSS] 사이트 디자인 클론 코딩

 

실행 결과 미리 보기

 

Today's

목표

1.  치지직(CHZZK) 웹 UI 클론코딩

 

치지직 CHZZK

지금, 스트리밍이 시작됩니다. 치지직-

chzzk.naver.com

2. 추가 기능은 다 빼고 HTML과 CSS만 이용해서 똑같이 코딩해보기 

기능 정의하기

1. 상단 배너/서치 바

  • 3구역 으로 구역 나누기
  • 아이콘은 Fontawesome에서 무료아이콘 가져오기
  • 아이콘, 텍스트 클릭시 마우스포인트 효과 넣기
  • search Bar 클릭 시 border 색상 변경하기

2. 사이드 바

  • 언더 바를 기준으로 3구역 으로 구역 나누기
  • 아이콘, 텍스트 클릭시 마우스포인트 효과 넣기
  • 추천 채널의 실시간시청자수(빨강색)으로 표기

3. 메인 화면

  •  메인 추천 방송 / 추천 스트리머 / 추천 방송 3구역으로 구역 나누기
  • 메일 추천방송화면에 왼쪽에 방송 Info 표기하기
  • 추천 스트리머구역에서 가로로 정렬
  • 추천 방송 구역에서는 가로 최대 Max item 갯수 제한해서 정렬하기

 

 

코드리뷰

01. 메인 상단 Bar

<header class="brand">
<div class="brand-info">
  <div class="brand-list-bar">
    <i class="fas fa-bars"></i>
  </div>
  <div class="brand-logo">
    <img class="logo" src="img/logo.png" alt="logo">
  </div>
</div>
 
<div class="search-bar">
  <input type="text" placeholder="스트리머, 게임 영상 검색">
  <i class="fas fa-search"></i>
</div>
 
<div class="header-icon">
  <i class="fas fa-ticket-alt"></i>
  <i class="fas fa-sun"></i>
  <input type="button" class="header-login-btn" value="로그인">
</div>
</header>

 

header{
  width: 100%;
  height: 50px;
  padding-bottom: 10px;
 
  background-color: #141517;
 
  position: fixed;
  z-index: 1;
}
.brand{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 
/* header 첫번째 브랜드 로고 */
.brand-info{
  display: flex;
  justify-content: start;
  align-items: center;
}
.brand-list-bar{
  width: 30px;
  height: 50px;
  margin-right: -25px;
 
  font-size: 25px;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.brand-logo{
  width: 180px;
  height: 50x;
 
  position: relative;
}
.brand-logo > img{
  width: 100%;
 
  position: absolute;
  top: 50%;
  left: 50%;
/* x축과 y축으로 지정한 값만큼 이동 */
  transform: translate(-50%, -50%);
}
 
 
/* header 두번째 서칭바 */
.search-bar{
  position: relative;
}
.search-bar input{
  width: 400px;
  height: 35px;
  padding: 2.5px 10px;
 
  font-size: 15px;
  border-radius: 30px;
  border: solid 1px #313133;
  background-color: #141517;
  color: #DFE2EA;
}
.search-bar i{
  font-size: 20px;
 
  position: absolute;
  top: 10px;
  right: 15px;
}
 
 
/* header 세번째 기타 아이콘 */
.header-icon{
  width: 200px;
  height: 40px;
 
  padding: 0px 10px 0px 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.header-icon i{
  font-size: 20px;
  margin-right: 20px;
}
.header-login-btn{
  width: 70px;
  height: 30px;
  margin-right: 20px;
  
  border-radius: 10px;
  border: solid 1px #313133;
  background-color: #141517;
  color: #DFE2EA;
 
  font-size: 13px;
  text-align: center;
  line-height: 30px;
}
  • 기억 해야하는 내용
    transform: translate(-50%, -50%); /* x축과 y축으로 지정한 값만큼 이동 */

02. Side Bar

<aside class="side-bar">
<div class="bar-first">
  <div class="fir">
    <div class="icon">
      <i class="fas fa-video"></i>
    </div>
    <div class="text">전체 라이브</div>
  </div>
  <div class="sec">
    <div class="icon">
      <i class="fas fa-redo-alt"></i>
    </div>
    <div  class="text">다시보기</div>
  </div>
  <div class="thi">
    <div class="icon">
      <i class="fas fa-th-large"></i>
    </div>
    <div class="text">카테고리</div>
  </div>
</div>
 
<div class="wrap"></div><!-- 줄 나눔 -->
 
<div class="bar-sceond">
  <div class="bar-title">
    <div>추천채널</div>
    <div class="bar-sceond-btn">
      <i class="fas fa-redo-alt"></i>
      <i class="fas fa-chevron-up"></i>
    </div>
  </div>
  <ol class="recommended-ch">
    <li class="re-ch-info">
      <div class="ch-profile">
        <img src="img/profile-icon.png" alt="prifile-img">
      </div>
      <div class="ch-info">
        <div>스트리머</div>
        <div class="game-nm">게임이름</div>
      </div>
      <div class="ch-cnt">+15898</div>
    </li>
    <li class="re-ch-info">
      <div class="ch-profile">
        <img src="img/profile-icon.png" alt="prifile-img">
      </div>
      <div class="ch-info">
        <div>스트리머</div>
        <div class="game-nm">게임이름</div>
      </div>
      <div class="ch-cnt">+1256</div>
    </li>
    <li class="re-ch-info">
      <div class="ch-profile">
        <img src="img/profile-icon.png" alt="prifile-img">
      </div>
      <div class="ch-info">
        <div>스트리머</div>
        <div class="game-nm">게임이름</div>
      </div>
      <div class="ch-cnt">+302</div>
    </li>
    <li class="re-ch-info">
      <div class="ch-profile">
        <img src="img/profile-icon.png" alt="prifile-img">
      </div>
      <div class="ch-info">
        <div>스트리머</div>
        <div class="game-nm">게임이름</div>
      </div>
      <div class="ch-cnt">+207</div>
    </li>
  </ol>
  <div class="recomand-ch more">
    <div>더보기</div>
    <i class="fas fa-chevron-down"></i>
  </div>
</div>
 
<div class="wrap"></div><!-- 줄 나눔 -->
<div class="bar-third">
  <div class="bar-title">
    <div>서비스 바로가기</div>
    <i class="fas fa-share-square"></i>
  </div>
  <ul class="last-menu">
    <li class="Shortcut">
      <i class="fas fa-th"></i>
      <div>네이버 게임</div>
    </li>
    <li class="Shortcut">
      <i class="fas fa-trophy"></i>
      <div>e스포츠</div>
    </li>
    <li class="Shortcut">
      <i class="fas fa-crown"></i>
      <div>오리지널 시리즈</div>
    </li>
    <li class="Shortcut">
      <i class="fas fa-desktop"></i>
      <div>PC 게임</div>
    </li>
    <li class="Shortcut">
      <i class="fas fa-bolt"></i>
      <div>치지직 라운지</div>
    </li>
  </ul>
</div>
</aside>

 

ul,ol{
  list-style-type: none;
}
 
aside{
  margin-top: 50px;
  overflow-y: scroll;
  position: fixed;
}
::-webkit-scrollbar {
  display: none;
}
.side-bar{
  width: 180px;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
}
 
.bar-first > .fir, .sec, .thi{
  width: 180px;
  height: 50px;
 
  margin-bottom: -18px;
 
  font-size: 15px;
  
  display: flex;
  justify-content: start;
  align-items: start;
}
 
.icon{
  width: calc(100% - 160px);
  height: 100%;
 
  display: flex;
  justify-content: center;
  align-items: center;
}
.text{
  height: 100%;
  margin-left: 10px;
  flex-grow: 1;
 
  display: flex;
  justify-content: start;
  align-items: center;
}
/* 줄 나눔 줄 */
.wrap{
  width: 180px;
  border: solid 0.1em #313133;
 
  margin: 20px 0px 20px 0px;
}
 
.bar-sceond{
  margin-bottom: 20px;
}
.bar-title{
  width: 180px;
 
  font-size: 14px;
 
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bar-sceond-btn > i{
  margin-left: 5px;
}
.recommended-ch{
  width: 180px;
  padding-left: 0px;
 
  display: flex;
  flex-direction: column;
  align-items: center;
 
  position: relative;
}
.re-ch-info{
  width: 180px;
  margin-bottom: 10px;
}
 
.ch-profile{
  width: 30px;
  height: 30px;
 
  background-color: #DFE2EA;
  border: solid 2px #00F8A1;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #141517;
 
  position: relative;
}
.ch-profile > img{
  width: 100%;
 
  position: absolute;
  top: 50%;
  left: 50%;
/* x축과 y축으로 지정한 값만큼 이동 */
  transform: translate(-50%, -50%);
}
.ch-info{
  width: 100px;
  margin-left: 5px;
}
.ch-info .game-nm{
  font-size: 13px;
  color: #86868b;
  margin-left: 3px;
}
.re-ch-info > .ch-cnt{
  flex-grow: 1;
  color: #C8322F;
  font-size: 12px;
 
  text-align: end;
}
.re-ch-info{
  display: flex;
  align-items: center;
}
.bar-sceond .more{
  width: 80px;
  height: 30px;
 
  border: solid 0.1em #313133;
  border-radius: 15px;
 
  font-size: 12px;
  color: #86868b;
 
  display: flex;
  justify-content: center;
  align-items: center;
 
  position: absolute;
  left: 70px;
}
 
/*  */
.bar-third .bar-title{
  font-size: 13px;
  display: flex;
  justify-content: start;
}
.bar-third .bar-title div{
  margin-right: 5px;
}
.last-menu{
  padding-left: 0;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}
.last-menu > .Shortcut{
  font-size: 17px;
  display: flex;
  justify-content: start;
  align-items: center;
}
.Shortcut{
  margin-bottom: 15px;
}
.Shortcut i{
  width: 20px;
  text-align: center;
  padding-right: 10px;
}

 

 

03. Main Video : 메인 추천 방송

<div class="main-video">
  <div class="main-video__info">
    <div class="live-video">
      <div class="live-header__info">
        <div class="live-btn">
          <div>LIVE</div>
        </div>
        <div class="ch-cnt">26명 시청</div>
      </div>
      <div class="ch-title">나는 OZ 코딩왕</div>
    </div>
 
    <div class="live-profile-info">
      <div class="ch-profile"><!--스트리머 이미지-->
        <img src="img/profile-icon.png" alt="profile-img">
      </div>
      <div class="ch-info">
        <div class="ch-owner__nm">코딩왕</div>
        <div class="play-game__nm">Html/Css</div>
      </div>
    </div>
  </div>
  <div class="main-video-play">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/oHXN6zJ_7l8?si=EeSxaCCdmpJDf6IH" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  </div>
</div>
  • 동영상은 Youtube에서 가져왔음 
    HTML < iframe >태그 이용

 

/* 메인 비디오 */
.main-video-play{
  height: 400px;
  width: 100%;
  text-align: center;
}
.main-video-play iframe{
  height: 400px;
  width: 100%;
 
  object-fit:cover;
}
 
.live-header__info{
  display: flex;
}
.live-header__info > .ch-cnt{
  color: #C8322F;
  font-weight: 900;
}
.live-video > .ch-title{
  margin: 10px 0 20px 0;
  font-size: 25px;
  color: #FFFFFF;
}
 
.main-video{
  position: relative;
}
.main-video__info{
  height: calc(100% - 40px);
  width: 25%;
  padding: 20px 0 20px 20px;
 
  background-color: rgba(30, 32, 34, 0.902);
  overflow-y: hidden;
 
  position: absolute;
 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
 
.main-video__info > .live-profile-info{
  height: 80px;
 
  position: relative;
}
 
.live-profile-info > .ch-profile{
  width: 60px;
  height: 60px;
}
.live-profile-info > .ch-info{
  width: auto;
  margin-left: 10px;
}
.live-profile-info > .ch-info :nth-child(1){
  color: #FFFFFF;
  font-size: 20px;
}
.live-profile-info > .ch-info :nth-child(2){
  font-size: 18px;
  color: #00F8A1;
}
.live-profile-info{
  display: flex;
  align-items: center;
  
}

 

 

마무리

보완해야 할 점

1. 메인 Video 부분 왼쪽 소개페이지에서 동영상재생시 검은색 Bar 가 사라지게 수정하기
2. Div 뿐만 아니라 다양한 태그도 사용하기(button 등)

추후 공부 할 내용

1. transform - CSS

 

 

티스토리툴바