21.08.19

Today I Learned

twitch website

index.html

<!-- Top Nav -->
<nav id="top-nav">
  <div class="nav-wrap flex-between">
    <!-- Nav Left -->
    <div class="nav-left flex-start">
      <h1 class="logo">
        <a href="#">
          <img src="https://via.placeholder.com/24x28" alt="nav logo" />
        </a>
      </h1>
      <ul class="flex-start">
        <li><a href="#">탐색</a></li>
        <li><a href="#">e스포츠</a></li>
        <li><a href="#">음악</a></li>
      </ul>
      <div class="more">
        <a href="#">더보기</a>
      </div>
    </div>

    <!-- Nav Center -->
    <div class="nav-center">
      <div class="search-wrap flex-between">
        <input type="text" placeholder="검색" />
        <button class="btn-search"></button>
      </div>
    </div>

    <!-- Nav Right -->
    <div class="nav-right flex-end">
      <div class="mark-wrap">
        <i class="icon-mark">
          <span class="alarm">44</span>
        </i>
      </div>
      <a href="#" class="btn-login">로그인</a>
      <a href="#" class="btn-purple">회원가입</a>
      <button class="btn-profile"></button>
    </div>
  </div>
</nav>

<!-- Main -->
<div class="main-container">
  <div class="left-area">
    <!-- Channel Wrap -->
    <div class="channel-wrap">
      <div class="channel-header flex-between">
        <h3>추천채널</h3>
        <i class="icon-arrow"></i>
      </div>
      <div class="channel-body">
        <ul>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
          <li>
            <a href="#">
              <img src="https://via.placeholder.com/30" alt="channel thumbnail" />
              <div class="txt-wrap">
                <h4>기발자(gi_balja)</h4>
                <p class="source">Just Chatting</p>
              </div>
              <span class="count">10,000</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- Join Wrap -->
    <div class="join-wrap">
      <div class="txt-wrap">
        <h2><span class="font-purple">Twitch</span> 커뮤니티와 함께하세요!</h2>
        <p>어디서나 최고의 생방송을 즐겨보세요.</p>
        <button class="btn-purple">회원가입</button>
      </div>
    </div>

    <!-- Info Wrap -->
    <div class="info-wrap">
      <p>상호명: 동해물과 백두산이</p>
      <p>대표자명: 동해물</p>
      <p>동해물과 백두산이 마르고 닳도록 하나님이 보우하사 우리나라만세</p>
      <ul class="flex-between">
        <li><a href="#">지원팀에 문의</a></li>
        <li><a href="#">판매약관</a></li>
        <li><a href="#">사업자 정보</a></li>
      </ul>
    </div>
  </div>
  <div class="content"></div>
</div>

style.css

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #0e0e10;
}

ol,
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

img {
    vertical-align: top;
}

input {
    outline: none;
    border: none;
}

button {
    outline: none;
    border: none;
    background-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
input,
button,
a {
    color: #fff;
}

.btn-purple {
    background-color: #9147ff;
    color: #fff;
}

.font-purple {
    color: #9147ff;
}

.flex-between {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.flex-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.main-container {
    width: 100%;
    min-width: 1340px; /* 특정 지점에서 더이상 줄어들지 않게 하기 위함 */
    /* padding-top: 50px; */
}

/* Top Nav */
#top-nav {
    /* fixed를 적용하면 크기가 제대로 잡히지 않기 때문에 width 값이 필요하다. */
    position: fixed;
    width: 100%;
    height: 50%;
    background-color: #0e0e10;
    padding: 0 15px;
    min-width: 1340px;
}

/* Nav Left */
#top-nav .nav-wrap .nav-left .log a img {
    width: 24px;
    height: 28px;
}

#top-nav .nav-wrap .nav-left ul li {
    height: 50px;
    font-size: 20px;
    padding: 0 20px;
}

#top-nav .nav-wrap .nav-left ul li:first-child {
    padding-right: 0;
}

#top-nav .nav-wrap .nav-left ul li:first-child a::after {
    position: relative;
    top: 8px;
    content: '';
    display: inline-block;
    width: 1px;
    height: 30px;
    background-color: gray;

    margin-left: 20px;
}

#top-nav .nav-wrap .nav-left ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 50px;
}

#top-nav .nav-wrap .nav-left .more span {
    display: block;
    height: 50px;
    font-size: 20px;
    line-height: 50px;
    padding-left: 20px;
}

/* Nav Center */
#top-nav .nav-center {
    /* 중앙에 위치하려면 flex의 영향을 받지 않게 해야 한다. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

#top-nav .nav-center .search-wrap {
    width: 380px;
    height: 36px;
    background-color: yellow;
    overflow: hidden;
    border-radius: 5px;
}

#top-nav .nav-center .search-wrap input {
    width: calc(100% - 34px);
    height: 100%;
    background-color: gray;
}

#top-nav .nav-center .search-wrap .btn-search {
    width: 34px;
    height: 100%;
    background-color: darkgray;
}

/* Nav Right */
#top-nav .nav-right .mark-wrap {
    position: relative;
}

#top-nav .nav-right .mark-wrap .icon-mark {
    display: block;
    width: 20px;
    height: 20px;
    background-color: yellow;
    cursor: pointer;
}

#top-nav .nav-right .mark-wrap .alarm {
    position: absolute;
    border-radius: 15px;
    background-color: red;
    color: #fff;
    font-size: 14px;

    padding: 4px 8px 4px;

    top: -12px;
    right: -20px;
}

#top-nav .nav-right .btn-login {
    width: 53px;
    height: 30px;
    background-color: gray;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    margin-left: 20px;
    font-size: 12px;
}

#top-nav .nav-right .btn-purple {
    width: 53px;
    height: 30px;
    border-radius: 5px;
    margin-left: 10px;
    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

#top-nav .nav-right .btn-profile {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #fff;
    margin-left: 10px;
}

/* Left Area */
.left-area {
    position: fixed;
    width: 240px;
    background-color: #202024;
    top: 50px; /* top nav 높이만큼 내림 */
    bottom: 0; /* height 100% */
    left: 0;
    overflow-y: auto; /* 스크롤 */
}

.left-area .channel-wrap .channel-header {
    padding: 10px;
}

.left-area .channel-wrap .channel-header h3 {
    font-size: 15px;
}

.left-area .channel-wrap .channel-header .icon-arrow {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #fff;
}

.left-area .channel-wrap .channel-body {
}

.left-area .channel-wrap .channel-body ul {
}

.left-area .channel-wrap .channel-body li {
}

.left-area .channel-wrap .channel-body a {
    display: flex;
    flex-wrap: wrap;
    padding: 5px 10px;
    align-items: flex-start;
}

.left-area .channel-wrap .channel-body img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.left-area .channel-wrap .channel-body .txt-wrap {
    width: 110px;
    margin-left: 10px;
}

.left-area .channel-wrap .channel-body .txt-wrap h4 {
    font-size: 13px;
}

.left-area .channel-wrap .channel-body .txt-wrap .source {
    font-size: 12px;
    color: gray;
}

.left-area .channel-wrap .channel-body .count {
    display: block;
    width: 50px;
    font-size: 12px;
}

.left-area .channel-wrap .channel-body .count::before {
    position: relative;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;

    margin-right: 5px;
    top: 1px;
}

/* Join Wrap */
.left-area .join-wrap {
    margin: 10px;
}

.left-area .join-wrap .txt-wrap {
    padding: 20px;
    background-color: #18181a;
}

.left-area .join-wrap .txt-wrap .h2 {
    font-size: 24px;
}

.left-area .join-wrap .txt-wrap h2 span {
}

.left-area .join-wrap .txt-wrap p {
    margin-top: 10px;
    font-size: 13px;
}

.left-area .join-wrap .txt-wrap .btn-purple {
    margin-top: 10px;
    width: 53px;
    height: 30px;
    border-radius: 5px;

    line-height: 30px;
    text-align: center;
    font-size: 12px;
}

.left-area .info-wrap {
    font-size: 12px;
    margin: 0 10px 10px 10px;
}

.left-area .info-wrap p {
    color: gray;
}

.left-area .info-wrap ul {
    margin-top: 10px;
}

.left-area .info-wrap li {
}

.left-area .info-wrap li a {
    color: gray;
}

.left-area .info-wrap li a::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 10px;
    background-color: gray;

    margin: 0 5px;
}

.left-area .info-wrap li:last-child a::after {
    content: none;
}

Review

오늘은 트위치 웹사이트 상단 영역과 메인 왼쪽 영역을 카피캣했다. 외국 사이트라 그런지 최신 기술로 작성되어 있어서 카피캣하기가 조금 까다로웠다.
3차원 요소일때 top, left, right, bottom 속성으로 hieght를 100% 채울 수 있다는 사실을 알게 되었다.