21.08.26

136237 단어 대구AI스쿨COPYCATTILCOPYCAT

Today I Learned

game.html

<!-- GAME Main Left -->
<div class="left">
  <!-- Left Banner -->
  <div class="left-banner game-shadow">
    <a href="#"><img src="https://via.placeholder.com/900x120" /></a>
  </div>

  <!-- GAME Section 1 -->
  <div id="game-section-1" class="game-section">
    <div class="section-title-wrap">
      <h2 class="font-19 font-400">게임 라운지 인기글</h2>
      <div class="section-btn-wrap">
        <a href="#" class="active">전체</a>
        <a href="#">Joined</a>
      </div>
    </div>

    <nav class="section-middle-nav">
      <ul>
        <li><a href="#" class="active">공략</a></li>
        <li><a href="#">커뮤니티</a></li>
      </ul>
    </nav>

    <ol>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
      <li>
        <a href="#" class="game-flex-start">
          <img src="https://via.placeholder.com/38" class="game-thumbnail" />
          <div class="txt-info">
            <h3>롤 패치</h3>
            <div class="source-wrap">
              <span class="game">리그 오브 레전드</span>
              <span class="author">김인권</span>
              <span class="level">LV8</span>
              <span class="rank">3</span>
            </div>
          </div>
          <img src="https://via.placeholder.com/90x50" class="blog-thumbnail" />
        </a>
      </li>
    </ol>

    <a href="#" class="btn-circle icon-arrow"></a>
  </div>

  <!-- GAME Section 2 -->
  <div id="game-section-2" class="game-section">
    <div class="section-title-wrap">
      <h2 class="font-19 font-400">생성 주요 게임 뉴스</h2>
      <a href="#" class="more">더보기</a>
    </div>

    <div class="section-body-wrap">
      <div class="image-txt-wrap">
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
      </div>

      <ul>
        <li>
          <a href="#" class="game-flex-between">
            <h3 class="title">
              라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇
              게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈
            </h3>
            <span class="source">인벤</span>
          </a>
        </li>
        <li>
          <a href="#" class="game-flex-between">
            <h3 class="title">
              라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇
              게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈
            </h3>
            <span class="source">인벤</span>
          </a>
        </li>
        <li>
          <a href="#" class="game-flex-between">
            <h3 class="title">
              라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇
              게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈
            </h3>
            <span class="source">인벤</span>
          </a>
        </li>
        <li>
          <a href="#" class="game-flex-between">
            <h3 class="title">
              라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇
              게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈라이엇게임즈
            </h3>
            <span class="source">인벤</span>
          </a>
        </li>
      </ul>
    </div>
  </div>

  <!-- GAME Section 3 -->
  <div id="game-section-3" class="game-section">
    <div class="section-title-wrap">
      <h2 class="font-19 font-400">오리지널 시리즈</h2>
    </div>

    <div class="section-body-wrap">
      <div class="image-txt-wrap">
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <span class="category">에픽뷰</span>
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <span class="category">에픽뷰</span>
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
      </div>
      <div class="image-txt-wrap game-m-t-20">
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <span class="category">에픽뷰</span>
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <span class="category">에픽뷰</span>
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
      </div>
      <div class="image-txt-wrap game-m-t-20">
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <span class="category">에픽뷰</span>
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
        <div class="image-txt game-flex-start">
          <img src="https://via.placeholder.com/180x100" />
          <div class="txt">
            <span class="category">에픽뷰</span>
            <h3 class="title">라이엇게임즈 블라블라블라 칼 빼든 엔비디아 보상지급</h3>
            <span class="source">인벤</span>
          </div>
        </div>
      </div>
    </div>

    <a href="#" class="btn-circle icon-plus"></a>
  </div>

  <!-- GAME Section 4 -->
  <div id="game-section-4" class="game-section">
    <div class="section-title-wrap">
      <h2 class="font-19 font-400">인기게임 영상</h2>
    </div>

    <div class="section-body-wrap">
      <ol>
        <li>
          <a href="#">
            <div class="image-wrap">
              <img src="https://via.placeholder.com/263x148" />
              <i class="icon-play"></i>
              <span class="time">01:06:26</span>
              <!-- 01:50:23부터 -->
            </div>
          </a>
        </li>
      </ol>
    </div>
  </div>
</div>

style.css

/* 08-06 */
#game-main .left .left-banner {
    overflow: hidden;
    width: 900px;
    height: 120px;
    border-radius: 12px;

    margin-bottom: 24px;
}

#game-main .left .left-banner a {
    display: block;
    width: 100%;
    height: 100%;
}

#game-main .left .left-banner img {
    width: 100%;
    height: 100%;
}

/* GAME Section Default */
.game-section {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 30px 0 rgb(0, 0, 0 / 6%);
    border-radius: 12px;

    padding: 27px 30px 40px;
    margin-bottom: 40px;
}

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

.game-section .section-title-wrap h2 {
    font-size: 19px;
    font-weight: 400;
}

.game-section .section-middle-nav {
}

.game-section .section-middle-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: solid 1px rgba(0, 0, 0, 0.07);
}

.game-section .section-middle-nav li {
}

.game-section .section-middle-nav a {
    display: block;
    padding: 14px;
    border-bottom: solid 3px transparent;
    color: #777;
}

.game-section .section-middle-nav a.active {
    border-bottom: solid 3px #7776ff;
    font-weight: 700;
    color: #7776ff;
}

.game-section .section-body-wrap {
    margin-top: 18px;
}

.game-section .section-body-wrap .image-txt-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.game-section .section-body-wrap .image-txt {
    width: 407.5px;
}

.game-section .section-body-wrap img {
    width: 180px;
    height: 100px;
    border-radius: 8px;
    border: solid 1px rgba(0, 0, 0, 0.06);

    margin-right: 15px;
}

.game-section .section-body-wrap .txt {
    width: 212px;
}

/* 
li 태그 안에 있는 title요소와 source요소에도 적용하기 위함
*/
.game-section .section-body-wrap .title {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;

    margin-bottom: 3px;
}

.game-section .section-body-wrap .source {
    font-size: 13px;
    color: #999;
}

.game-section .btn-circle {
    position: absolute;
    width: 55px;
    height: 55px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 30px 0 rgb(0, 0, 0 / 6%);

    bottom: -27.5px;

    left: 50%;
    transform: translateX(-50%);
}

.game-section .btn-circle.icon-arrow {
    background-color: gray;
}

.game-section .btn-circle.icon-plus {
    background-color: blue;
}

/* 
game section 영역의 css 속성을 디폴트 값으로 설정하고 
게임 섹션마다 id값을 부여해 커스텀한다.
실무에서 많이 사용된다.
*/
/* GAME Section 1 */
#game-section-1 .section-btn-wrap a {
    font-size: 14px;
    color: #9da5b6;
    font-weight: 700;
}

#game-section-1 .section-btn-wrap a.active {
    color: #7776ff;
}

#game-section-1 .section-btn-wrap a:last-child {
    margin-left: 14px;
}

#game-section-1 ol {
}

#game-section-1 ol li {
    padding: 10px 0;
    border-bottom: solid 1px rgba(0, 0, 0, 0.03);
}

#game-section-1 ol li a {
}

#game-section-1 ol li .game-thumbnail {
    border-radius: 8px;
    margin-right: 10px;
}

#game-section-1 ol li .txt-info {
    width: 690px;
    margin-right: 10px;
}

#game-section-1 ol li .txt-info h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 3px;
}

#game-section-1 ol li .txt-info .source-wrap {
    font-size: 13px;
    color: #858894;
}

#game-section-1 ol li .txt-info .source-wrap .game {
    margin-right: 5px;
}

#game-section-1 ol li .txt-info .source-wrap .author {
    margin-right: 5px;
}

#game-section-1 ol li .txt-info .source-wrap .level {
    margin-right: 5px;
}

#game-section-1 ol li .txt-info .source-wrap .rank {
}

#game-section-1 ol li .blog-thumbnail {
    border-radius: 8px;
}

/* GAME Section 2 */
#game-section-2 {
}

#game-section-2 .section-title-wrap .more {
    font-size: 13px;
    font-weight: 400;
}

#game-section-2 .section-body-wrap {
}

#game-section-2 .section-body-wrap ul {
    margin-top: 25px;
}

#game-section-2 .section-body-wrap li {
    margin-bottom: 11px;
}

#game-section-2 .section-body-wrap li:last-child {
    margin-bottom: 0;
}

#game-section-2 .section-body-wrap a {
}

#game-section-2 .section-body-wrap ul .title {
    width: 776px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* GAME Section 3 */
#game-section-3 .section-body-wrap .image-txt-wrap .category {
    display: block; /* span태그는 상하배치 작업이 안되기 때문에 block 요소로 변경해줌 */
    font-size: 13px;
    color: #7776ff;
    margin-bottom: 3px;
}

Review

오늘은 네이버 게임 페이지 메인 왼쪽 영역을 카피캣했다. CSS 속성값들이 중복되는 요소들을 묶어서 클래스화시키니 각 섹션들마다 조금씩만 커스텀 작업을 하면 레이아웃을 완성시킬 수 있었다. 디폴트 클래스를 만들어 작업을 하도록 해야겠다.

디자인 모델 의 공장 모델 학습
파이썬에서 목록이 비어 있는지 확인하는 방법은 무엇입니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage