210726 네이버 웹툰 카피캣(2)

학습내용

webtoon.html

<!-- 07-26 -->
<!-- Webtoon Main Right -->
<div class="webtoonMain__Right">
  <!-- Webtoon Challenge Wrap -->
  <div class="webtoonChallengeWrap webtoonBorder">
    <h3><span>새로운</span>베스트 도전만화</h3>
    <img src="https://via.placeholder.com/202x110">
    <div class="webtoonInfo">
      <div class="titleWrap">
        <h4><a href="#">돈벌다 만난사이</a></h4>
        <a href="#">twinee2018</a>
      </div>
      <p>
        <a href="#">회사에서 돈 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a>
      </p>
    </div>
  </div>
  <!-- Webtoon Banner Type 1-->
  <div class="webtoonBanner bannerTypeOne webtoonBorder"></div>
  <!-- Webtoon Popular 인기급상승 만화 -->
  <div class="webtoonPopular webtoonBorder">
    <div class="webtoonPopular__Header">
      <h2>인기급상승 만화</h2>
    </div>
    <ul class="webtoonPopular__Taps">
      <li class="tab active">
        <span>인기순</span>
      </li>
      <li class="tab">
        <span>업데이트순</span>
      </li>
    </ul>
    <div class="webtoonPopular__Ranking">
      <ol>
        <li>
          <div class="rankContent">
            <span class="rank">1</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusStay"></div>
            <span class="number">0</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">2</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusUp"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">3</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">2</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusUp"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">3</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">2</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusUp"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">3</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">3</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">3</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank">3</span>
            <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
      </ol>
    </div>
  </div>
  <!-- Webtoon Popular 30대 실시간 인기 만화 -->
  <div class="webtoonPopular webtoonBorder">
    <div class="webtoonPopular__Header">
      <h2>30대 실시간 인기 만화</h2>
    </div>
    <ul class="webtoonPopular__Taps">
      <li class="tab active">
        <span>남자</span>
      </li>
      <li class="tab">
        <span>여자</span>
      </li>
    </ul>
    <div class="webtoonPopular__Ranking">
      <ol>
        <li>
          <div class="rankContent">
            <span class="rank rankCustom">1</span>
            <div class="imageWrap">
              <img src="https://via.placeholder.com/30x33">
              <div class="webtoonInfo">
                <a href="#">헬퍼 2 : 킬베로스</a>
                <span class="author"></span>
              </div>
            </div>

          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank rankCustom">1</span>
            <div class="imageWrap">
              <img src="https://via.placeholder.com/30x33">
              <div class="webtoonInfo">
                <a href="#">헬퍼 2 : 킬베로스</a>
                <span class="author"></span>
              </div>
            </div>

          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank rankCustom">1</span>
            <div class="imageWrap">
              <img src="https://via.placeholder.com/30x33">
              <div class="webtoonInfo">
                <a href="#">헬퍼 2 : 킬베로스</a>
                <span class="author"></span>
              </div>
            </div>

          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank rankCustom">1</span>
            <div class="imageWrap">
              <img src="https://via.placeholder.com/30x33">
              <div class="webtoonInfo">
                <a href="#">헬퍼 2 : 킬베로스</a>
                <span class="author"></span>
              </div>
            </div>

          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
        <li>
          <div class="rankContent">
            <span class="rank rankCustom">1</span>
            <div class="imageWrap">
              <img src="https://via.placeholder.com/30x33">
              <div class="webtoonInfo">
                <a href="#">헬퍼 2 : 킬베로스</a>
                <span class="author"></span>
              </div>
            </div>

          </div>
          <div class="rankBox">
            <!-- statusStay, statusUp, statusDown -->
            <div class="status statusDown"></div>
            <span class="number">1</span>
          </div>
        </li>
      </ol>
    </div>
  </div>
  <div class="webtoonBanner bannerTypeTwo webtoonBorder"></div>
</div>

</div>

</section>
<!-- Webtoon Footer -->
<footer id="webtoonFooter">
  <div class="webtoonContainer">
    <div class="webtoonFooterWrap">
      <div class="webtoonFooter__Left">
        <ul>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
        </ul>
        <!-- HTML 특수문자 사용 -->
        <span>&copy; naver corps</span>
      </div>
      <div class="webtoonFooter__Right">
        <ul>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
          <li><a href="#">이용약관</a></li>
        </ul>
        <span>&copy; naver webtoon corps</span>
      </div>
    </div>
    <p class="webtoonFooter__Paragraph">
      본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 법적 책임을 질 수 있습니다.
    </p>
  </div>
</footer>코드를 입력하세요

webtoon-detail.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>네이버 웹툰</title>
<link rel="stylesheet" href="css/webtoon.css" />
</head>
<body>
    <!-- Webtoon Header -->
    <header id="webtoonHeader">
        
            <!-- Wetoon Header Top -->
            <div class="webtoonHeader__Top">
                <div class="webtoonContainer">
                    <!-- Webtoon Header Top Left -->
                    <div class="left">
                        <h2><a href="#">만화</a></h2>
                        <em class="bar"></em>
                        <h3><a href="#">웹소설</a></h3>
                        <div class="inputWrap">
                            <input type="text" />
                            <button class="btnSearch"></button>
                        </div>
                    </div>
                    <!-- Webtoon Header Top Right -->
                    <div class="right">
                        <a href="#" class="btnLogin">로그인</a>
                        <button class="btnMenu"></button>
                    </div>
                </div>
            </div>

            <!-- Webtoon Header Nav -->
            <div class="webtoonHeader__Nav">
                <div class="webtoonContainer">
                    <nav>
                        <ul>
                            <li><a href="webtoon.html"></a></li>
                            <li class="on"><a href="webtoon-detail.html">웹툰</a></li>
                            <li><a href="#">베스트 도전</a></li>
                            <li><a href="#">도전만화</a></li>
                        </ul>
                    </nav>
                    <div class="linkWrap">
                        <i class="iconExMark"></i>
                        <a href="#">온천마을 판타지 로맨스 <모락모락 왕세자님></a>
                    </div>
                </div>
            </div>

    </header>

    <!-- Webtoon Main -->
    <section id="webtoonMain" class="webtoonDetail">
        <nav class="navOne">
            <div class="webtoonContainer">
                <ul>
                    <li><a href="#">요일별</a></li>
                    <li><a href="#">장르별</a></li>
                    <li><a href="#">작품별</a></li>
                    <li><a href="#">작가별</a></li>
                </ul>
            </div>
        </nav>

        <div class="webtoonContainer">
            <!-- Webtoon Main Left -->
            <div class="webtoonMain__Left">
                <!-- Nav -->
                <nav class="navTwo">
                    <ul>
                        <li class="on"><a href="#">요일전체</a></li>
                        <li><a href="#">월요웹툰</a></li>
                        <li><a href="#">화요웹툰</a></li>
                        <li><a href="#">수요웹툰</a></li>
                        <li><a href="#">목요웹툰</a></li>
                    </ul>
                </nav>
                <div class="webtoonThisMonth">
                    <h2>이달의 신규 웹툰</h2>
                    <ul class="webtoonThisLists">
                        <li class="webtoonThisList">
                            <div class="thisImageWrap webtoonBorder">
                                <img src="https://via.placeholder.com/150">
                                <sapn class="newMark">new</sapn>
                            </div>
                            <h3>아찔한 전남편</h3>
                            <span class="author">별규, 기뭉 / 여백</span>
                            <p>국민 여배우 하은설. 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
                        </li>
                        <li class="webtoonThisList">
                            <div class="thisImageWrap webtoonBorder">
                                <img src="https://via.placeholder.com/150">
                                <sapn class="newMark">new</sapn>
                            </div>
                            <h3>아찔한 전남편</h3>
                            <span class="author">별규, 기뭉 / 여백</span>
                            <p>국민 여배우 하은설. 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
                        </li>
                        <li class="webtoonThisList">
                            <div class="thisImageWrap webtoonBorder">
                                <img src="https://via.placeholder.com/150">
                                <sapn class="newMark">new</sapn>
                            </div>
                            <h3>아찔한 전남편</h3>
                            <span class="author">별규, 기뭉 / 여백</span>
                            <p>국민 여배우 하은설. 여배우 전성기 시절 남편과 첫눈에 반해서 결혼했고</p>
                        </li>
                    </ul>
                </div>
                <!-- Webtoon Banner -->
                <div class="webtoonBanner"></div>
                <!-- Webtoon Total Day -->
                <div id="webtoonTotalDay">
                    <div class="webtoonTotal__TitleWrap">
                        <h2>요일별 전체 웹툰</h2>
                        <ul>
                            <li><a href="#">인기순</a></li>
                            <li><a href="#">업데이트순</a></li>
                            <li><a href="#">조회순</a></li>
                            <li><a href="#">별점순</a></li>
                        </ul>
                    </div>
                    <ul class="webtoonDay__Lists">
                        <li class="webtoonDayList">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                        <li class="webtoonDayList active">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                        <li class="webtoonDayList">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                        <li class="webtoonDayList">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                        <li class="webtoonDayList">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                        <li class="webtoonDayList">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                        <li class="webtoonDayList">
                            <span>월요웹툰</span>
                            <ul class="webtoonLists">
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                                <li class="webtoonList">
                                    <img src="https://via.placeholder.com/84x90">
                                    <h3>참교육</h3>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Webtoon Main Right -->
            <div class="webtoonMain__Right">
                <!-- Webtoon Challenge Wrap -->
                <div class="webtoonChallengeWrap webtoonBorder">
                    <h3><span>새로운</span>베스트 도전만화</h3>
                    <img src="https://via.placeholder.com/202x110">
                    <div class="webtoonInfo">
                        <div class="titleWrap">
                            <h4><a href="#">돈벌다 만난사이</a></h4>
                            <a href="#">twinee2018</a>
                        </div>
                        <p>
                            <a href="#">회사에서 돈 벌다 만나서 함께하는 서로 다른 성향의 두 여자 이야기</a>
                        </p>
                    </div>
                </div>
                <!-- Webtoon Banner Type 1-->
                <div class="webtoonBanner bannerTypeOne webtoonBorder"></div>
                <!-- Webtoon Popular 인기급상승 만화 -->
                <div class="webtoonPopular webtoonBorder">
                    <div class="webtoonPopular__Header">
                        <h2>인기급상승 만화</h2>
                    </div>
                    <ul class="webtoonPopular__Taps">
                        <li class="tab active">
                            <span>인기순</span>
                        </li>
                        <li class="tab">
                            <span>업데이트순</span>
                        </li>
                    </ul>
                    <div class="webtoonPopular__Ranking">
                        <ol>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">1</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusStay"></div>
                                    <span class="number">0</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">2</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusUp"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">3</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">2</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusUp"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">3</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">2</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusUp"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">3</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">3</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">3</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank">3</span>
                                    <a href="#">급식아빠-18화 죽은지 얼마나 됐어요?</a>
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
                <!-- Webtoon Popular 30대 실시간 인기 만화 -->
                <div class="webtoonPopular webtoonBorder">
                    <div class="webtoonPopular__Header">
                        <h2>30대 실시간 인기 만화</h2>
                    </div>
                    <ul class="webtoonPopular__Taps">
                        <li class="tab active">
                            <span>남자</span>
                        </li>
                        <li class="tab">
                            <span>여자</span>
                        </li>
                    </ul>
                    <div class="webtoonPopular__Ranking">
                        <ol>
                            <li>
                                <div class="rankContent">
                                    <span class="rank rankCustom">1</span>
                                    <div class="imageWrap">
                                        <img src="https://via.placeholder.com/30x33">
                                        <div class="webtoonInfo">
                                            <a href="#">헬퍼 2 : 킬베로스</a>
                                            <span class="author"></span>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank rankCustom">1</span>
                                    <div class="imageWrap">
                                        <img src="https://via.placeholder.com/30x33">
                                        <div class="webtoonInfo">
                                            <a href="#">헬퍼 2 : 킬베로스</a>
                                            <span class="author"></span>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank rankCustom">1</span>
                                    <div class="imageWrap">
                                        <img src="https://via.placeholder.com/30x33">
                                        <div class="webtoonInfo">
                                            <a href="#">헬퍼 2 : 킬베로스</a>
                                            <span class="author"></span>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank rankCustom">1</span>
                                    <div class="imageWrap">
                                        <img src="https://via.placeholder.com/30x33">
                                        <div class="webtoonInfo">
                                            <a href="#">헬퍼 2 : 킬베로스</a>
                                            <span class="author"></span>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                            <li>
                                <div class="rankContent">
                                    <span class="rank rankCustom">1</span>
                                    <div class="imageWrap">
                                        <img src="https://via.placeholder.com/30x33">
                                        <div class="webtoonInfo">
                                            <a href="#">헬퍼 2 : 킬베로스</a>
                                            <span class="author"></span>
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="rankBox">
                                    <!-- statusStay, statusUp, statusDown -->
                                    <div class="status statusDown"></div>
                                    <span class="number">1</span>
                                </div>
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="webtoonBanner bannerTypeTwo webtoonBorder"></div>
            </div>

        </div>
    </section>
    <!-- Webtoon Footer -->
    <footer id="webtoonFooter">
        <div class="webtoonContainer">
            <div class="webtoonFooterWrap">
                <div class="webtoonFooter__Left">
                    <ul>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                    </ul>
                    <!-- HTML 특수문자 사용 -->
                    <span>&copy; naver corps</span>
                </div>
                <div class="webtoonFooter__Right">
                    <ul>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                        <li><a href="#">이용약관</a></li>
                    </ul>
                    <span>&copy; naver webtoon corps</span>
                </div>
            </div>
            <p class="webtoonFooter__Paragraph">
                본 콘텐츠의 저작권은 저자 또는 제공처에 있으며, 이를 무단 이용하는 경우 저작권법 등에 법적 책임을 질 수 있습니다.
            </p>
        </div>
    </footer>
</body>
</html>

학습소감 및 문제해결

태그를 입력 할 때에 반복해서 같은 오타를 많이 범하는 것 같다. 주의 한다고 했지만 이미 조금 습관이 되어버린 것 같다. 틀렸다는 것을 인지를 하기 어려웠다. 시간이 되면 자주 틀리는 태그명을 정리해 두면 습관을 고치는데 좀 도움이 될 지도 모르겠다.

좋은 웹페이지 즐겨찾기