KDT0_KimMinSeo 네이버 메인 페이지 클론코딩 제출 #50
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,18 @@ | ||
| ## 네이버 메인 페이지 클론코딩 | ||
|
|
||
| https://regal-frangipane-f310c3.netlify.app/<br/> | ||
|
|
||
| ## 원본 페이지 | ||
|
|
||
| 실제 사이트 : https://www.naver.com/<br/> | ||
|
|
||
| ## 사용 기술 | ||
|
|
||
| 1. HTML<br/> | ||
| 2. CSS<br/> | ||
|
|
||
| ## 구현한 내용 | ||
|
|
||
| html과 css를 이용한 네이버 메인페이지 클론 코딩 | ||
|
|
||
| <br/> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,338 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.ico" /> | ||
| <title>NAVER</title> | ||
| <link rel="stylesheet" href="styles/header.css" /> | ||
| <link rel="stylesheet" href="styles/nav.css" /> | ||
| <link rel="stylesheet" href="styles/main.css" /> | ||
| <link rel="stylesheet" href="styles/footer.css" /> | ||
| </head> | ||
| <body> | ||
| <div id="wrap"> | ||
| <div id="wrap-center"> | ||
| <div id="header"> | ||
| <button id="header-hamburger"> | ||
| <div></div> | ||
| </button> | ||
| <button id="header-naverpay"> | ||
| <div></div> | ||
| </button> | ||
| <button id="header-notice"> | ||
| <div></div> | ||
| </button> | ||
| </div> | ||
| <div id="search"> | ||
| <form action=""> | ||
| <a id="search-svg" href="#"> | ||
| <svg | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M16.273 12.845 7.376 0H0v24h7.727V11.155L16.624 24H24V0h-7.727v12.845z" | ||
| /></svg></a> | ||
| <input | ||
| id="search-input" | ||
| type="text" | ||
| placeholder="검색어를 입력해 주세요." | ||
| /> | ||
| <div id="search-right"> | ||
| <button href="#" id="search-keyboard"> | ||
| </button> | ||
| <button href="#" id="search-recent"> | ||
| </button> | ||
| <button id="search-button"> | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
|
|
||
| <nav id="nav"> | ||
| <ul> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>메일</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>카페</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>블로그</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>쇼핑</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>뉴스</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>증권</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>부동산</span> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>지도</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| <span>웹툰</span> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a href=""> | ||
| <div></div> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
|
|
||
|
|
||
| <main id="main"> | ||
| <div id="main-left"> | ||
| <img id="main-left-ad" src="./assets/left-ad.jpg"></img> | ||
|
|
||
| <section id="main-news"> | ||
| <div id="main-news-top"> | ||
| <header> | ||
| <a href="" ><strong>뉴스스탠드 </strong></a> | ||
| <a href="" > <strong>• 언론사편집 /</strong></a> | ||
| <a href="" ><strong> 엔터 /</strong></a> | ||
| <a href="" ><strong> 스포츠 /</strong></a> | ||
| <a href="" ><strong> 경제</strong></a> | ||
| </header> | ||
|
|
||
| <div id="main-news-stand"> | ||
| <span> | ||
| <a href="">전체언론사 ▼</a> | ||
| <a href=""> | 연합뉴스</a> | ||
| <a href=""> "'위험' 청주시 신고만 10번"…"수많은 기회 살린 기관 없었다"</a> | ||
|
|
||
| <span id="main-news-right"> | ||
| <a href="">뉴스스탠드</a> | ||
| <a href="">| <strong>뉴스홈</strong></a> | ||
| </span> | ||
| </div> | ||
|
|
||
| <div id=main-news-grid> | ||
| <div><img src="./assets/news/1.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/2.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/3.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/4.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/5.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/6.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/7.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/8.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/9.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/10.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/11.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/12.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/13.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/14.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/15.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/16.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/17.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/18.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/1.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/20.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/21.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/22.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/23.png" id="main-news-image"></div> | ||
| <div><img src="./assets/news/24.png" id="main-news-image"></div> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <footer id="main-news-footer"> | ||
| <img id="main-before" src="./assets/before.png"></img> | ||
| <strong id="main-news-page"><span>언론사</span> 더보기 1/4</strong> | ||
| <img id="main-before" src="./assets/after.png"></button> | ||
| </footer> | ||
| </section> | ||
|
|
||
| <section id="main-shopping"> | ||
|
|
||
| <div id="main-shopping-top"> | ||
| <header> | ||
| <a href="" > <strong>쇼핑 /</strong></strong></a> | ||
| <a href="" ><strong> 맨즈 /</strong></a> | ||
| <a href="" ><strong> 원쁠딜 /</strong></a> | ||
| <a href="" ><strong> 쇼핑라이브</strong></a> | ||
| </header> | ||
|
|
||
| <div id="main-shopping-stand"> | ||
| <span> | ||
| <a href=""> <strong>오늘의 혜택</strong></a> | ||
| <a href=""> <img src="./assets/we.png" id="main-shopping-sm-image"></a> | ||
| <a href=""> 매일 00시, 슈퍼투데이특가 놓치면 후회할 <span>역대급할인!</span></a> | ||
| </span> | ||
| </div> | ||
|
|
||
| <div id="main-shop-box"> | ||
| <div id="main-shopping-grid"> | ||
| <div><img src="./assets/shopping/1.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">만원대~여름코디<br/><br/>심플하고착한가격</div></div> | ||
| <div><img src="./assets/shopping/2.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">상반기 결산SALE<br/><br/>BEST 최대71%↓</div></div> | ||
| <div><img src="./assets/shopping/3.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">단정한핏~인기!<br/><br/>최대80%SALE시작</div></div> | ||
| <div><img src="./assets/shopping/4.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">TIME SALE<br/><br/>바스락~ 롱원피스</div></div> | ||
| <div><img src="./assets/shopping/5.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">아침에 광이나요<br/><br/> | ||
| 붙이고 자버려요</div></div> | ||
| <div><img src="./assets/shopping/6.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">1일1포 챙겨먹어<br/><br/> 1+1일때 쟁여</div></div> | ||
| <div><img src="./assets/shopping/7.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">우유베개 1&1<br/><br/> 1만원 쿠폰!</div></div> | ||
| <div><img src="./assets/shopping/8.jpg" id="main-shopping-image"> | ||
| <div class="main-shopping-text">역대급 50%특가<br/><br/> 인형키링 곰빵이!</div></div> | ||
| </div> | ||
| <div id=main-shop-left> | ||
| <div id="shop-first-box"> | ||
| <a href=""><strong>쿠팡</strong></a> | ||
| <a href="">G마켓</a> | ||
| <a href="">옥션</a> | ||
| <a href="">11번가</a><br/> | ||
| <a href=""><strong>SSG닷컴</strong></a> | ||
| <a href="">올리브영</a> | ||
| <a href="">위메프</a> | ||
| <a href="">GS샵</a><br/> | ||
| <a href="">CJ온스타일</a> | ||
| <a href="">패션플러스</a> | ||
| <a href=""><strong>CJ더마켓</strong></a> | ||
| </div> | ||
| <div id="shop-second-box"> | ||
| <div><div></div><a href="">N쇼핑홈</a></div> | ||
| <div><div>MY</div><a href=""><br/>MY홈</a></div> | ||
| <div><div></div><a href="">주문배송</a></div> | ||
| <div><div></div><a href=""><br/>N장바구니</a></div> | ||
|
|
||
| </div> | ||
|
|
||
| <div id="shop-third-box"> | ||
| <img id="shop-third-left" src="./assets/shopping/ad1.jpg"></img> | ||
| <img id="shop-third-right" src="./assets/shopping/ad2.png"></img> | ||
| </div> | ||
|
|
||
| <div id="shop-last-text">#몽제 #1,250억돌파 #7월한정특가 | ||
| 바닥에서도 허리 완전 편해~</div> | ||
| </div> | ||
| </div> | ||
| <footer id="main-shopping-footer"> | ||
| <img id="main-before" src="./assets/before.png"></img> | ||
| <strong id="main-news-page"><span>쇼핑아이템</span> 더보기 1/18</strong> | ||
| <img id="main-before" src="./assets/after.png"></button> | ||
| </footer> | ||
|
||
| </section> | ||
| </div> | ||
|
|
||
| <div id="main-right"> | ||
| <section id="main-login"> | ||
| <div>네이버를 더 안전하고 편리하게 이용하세요.</div> | ||
| <a href="" id="main-login-button"><img/>로그인</a> | ||
| <div><a href="" >아이디 찾기</a> | ||
| <a href="">비밀번호 찾기</a> | ||
| <a href="">회원가입</a></div> | ||
| </section> | ||
|
|
||
| <img id="main-right-ad" src="./assets/right-ad.png" /> | ||
| <img id="main-weather" src="./assets/weather.png"/> | ||
| <img id="main-stock" src="./assets/stock.png"/> | ||
| </div> | ||
| </main> | ||
|
|
||
| <footer id="footer-main" > | ||
| <div id="footer-ad"> | ||
|
|
||
|
|
||
| <div><img id='footer-ad-image' src="./assets/footer/1.png"></div> | ||
| <div id="footer-big-box"> | ||
| <div id="footer-box"><strong>네이버 커넥트 재단</strong></div> | ||
| <strong id="footer-text">유치원 여름방학, 뭐하세요?</strong> | ||
| <div id=footer-intro>무료교육앱 쥬니버스쿨과 놀면서 수학, 코딩 공부해요!</div> | ||
|
|
||
| </div> | ||
|
|
||
|
|
||
| <div><img id='footer-ad-image' src="./assets/footer/2.png"></div> | ||
| <div id="footer-big-box"> | ||
| <div id="footer-box"><strong>쥬니버</strong></div> | ||
| <strong id="footer-text">차징탑스피너 채널 오픈 이벤트</strong> | ||
| <div id=footer-intro>피젯스피너와 팽이가 하나로!<br/>최애 영상 댓글 달면 선물로!</div> | ||
| </div> | ||
|
|
||
|
|
||
|
|
||
| <div><img id='footer-ad-image' src="./assets/footer/3.png"></div> | ||
| <div id="footer-big-box"> | ||
| <div id="footer-box"><strong>네이버 개인정보 보호</strong></div> | ||
| <strong id="footer-text">정보보호의 달 릴레이 특강</strong> | ||
| <div id=footer-intro>7월 매주 수요일 11시<br/> 프라이버시TV에서 만나요!</div> | ||
|
|
||
| </div> | ||
| </div> | ||
| <div id="footer-list"> | ||
| <ul> | ||
| <li> | ||
| <a>회사소개 </a> | ||
| </li> | ||
| <li> | ||
| <a>인재채용 </a> | ||
| </li> | ||
| <li> | ||
| <a >제휴제안 </a> | ||
| </li> | ||
| <li> | ||
| <a>이용약관 </a> | ||
| </li> | ||
| <li> | ||
| <a><strong>개인정보처리방침 </strong></a> | ||
| </li> | ||
| <li> | ||
| <a>청소년보호정책 </a> | ||
| </li> | ||
| <li> | ||
| <a>네이버 정책 </a> | ||
| </li> | ||
| <li> | ||
| <div>고객센터 </div> | ||
| </li> | ||
| <li> | ||
| <strong> ⓒ NAVER Corp.</strong> | ||
| </li> | ||
| </ul> | ||
|
||
| </footer> | ||
| </div></div> | ||
|
|
||
|
|
||
| </div> | ||
| </body> | ||
| </html> | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
html 과 css 작업하실때는 id 로 작성하시는것은 최대한 지양 해주시면 좋을꺼같습니다~
id는 고유해서 개별 요소 별로 선택할때는 편하지만 추후 유지보수할때는 힘들어서 css 작업할때는 class 를 지향 해주시면 좋을꺼같습니다~
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네 감사합니다!