HTML/CSS 실습 #1. 무지성! 네이버 메인 페이지 클론

코딩/Frontend2022. 5. 14. 15:32

HTML/CSS 1독을 마치고 JS로 넘어가려다가

내가 그래서 과연 아는 것이 무엇인가? 의문이 들어 실습을 한번 해보고 넘어가기로 했다.

얼마나 걸릴지는 모르겠지만 한번 천천히 해보자.

네이버 메인 페이지를

빨간색 박스로 크게 나누면 다음과 같은 구조를 갖음을 알 수 있다.

해당 소스를 무지성으로 큰 줄기만 나누어 작성해보면,

<!DOCTYPE html>
<html lang="ko">
<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">
  <title>NAVER</title>
  <style>
    header, nav, section, aside, footer {
      border: red 2px solid;
      margin: 5px 0px;
    }
    div {
      border: orange 2px solid;
      margin: 5px 0px;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">NAVER image</div>
    <div class="searchbar">검색창</div>
    <div class="set_homepage">네이버를 시작페이지로 쥬니어네이버 해피빈</div>
  </header>
  <nav>
    이미지 메일 카페 블로그 지식iN 쇼핑 쇼핑LIVE Pay 이미지 TV 사전 뉴스 증권 부동산 지도 VIBE 책 웹툰 더보기
  </nav>
  <section></section>
    <div class="news_ticker">연합뉴스>푸틴 군홧발에...  뉴스홈 연예 스포츠 지방선거</div>
    <div class="news_stand">뉴스스탠드> 구독한 언론사 * 전체언론사</div>
    <div class="todays_article">오늘 읽을만한 글
      <div class="news_article">뉴스들</div>
      <div class="news_video">뉴스 동영상들</div>
      <div class="news_article">뉴스들</div>
      <div class="news_video">뉴스 동영상들</div>
    </div>
  <aside>
    <div class="login">로그인 창</div>
    <div class="issue">이슈</div>
    <div class="trend_shopping">트렌드쇼핑
      <div class="shopping_top">쇼핑 1</div>
      <div class="play_fun">PLAY FUN</div>
      <div class="today_special">오늘의 특가ZONE</div>
      <div class="onepldeal">원쁠딜 전 상품 무료배송!</div>
    </div>
  </aside>
  <footer>
    <div class="notice">공지사항 서비스 전체보기</div>
    <div class="CPD">
      <div class="creators">크리에이터 스몰비즈니스</div>
      <div class="partners">SME 풀케어 시스템 비즈니스 광고 스토어 개설 지역업체 등록 엑스퍼트 등록</div>
      <div class="developers">네이버 개발자 센터 오픈 API 오픈소스 네이버 D2 네이버D2SF 네이버 랩스</div>
    </div>
    <div class="bottom_list">
      회사소개 인재채용 제휴제안 이용약관 개인정보처리방침 청소년보호정책 네이버 정책 고객센터 cNAVER Corp.
    </div>
  </footer>
</body>
</html>

그 결과는 다음과 같이 나온다.