KDT0_KimMinSeo 네이버 메인 페이지 클론코딩 제출 #50
Open
Conversation
This file contains 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
minseokiim
changed the title
|
실제 네이버 홈 화면과 흡사하게 잘 구현하신거 같습니다..!!👍👍 그리고 커밋메시지를 규칙성있게 작성하신거 보고 배워갑니다 ㅎㅎ! css를 섹션마다 구분해서 작성하신 것이 보기 편리하고 훨씬 간편하네요! 저도 활용해보겠습니다!!😁😁 |
|
너무 잘하신 것 같아 많이 배워갑니다! position 주시면서 일일이 위치잡기 어려우셨을텐데 꼼꼼하게 잘 하셨고 고생 많으셨습니다! |
|
실제 사이트와 정말 비슷한 것 같아서 어려워보였는데 잘 구현하신 것 같아요!👏 |
|
정말 꼼꼼하게 잘 하셨어요! Hyperlink 달고 버튼 색깔 바꾸는게 시간 많이 걸렸을거 같은데 정말 고생하셨습니다 :) |
jungHyeonS
reviewed
Aug 5, 2023
index.html
Outdated
Comment on lines
183
to
253
| <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> |
There was a problem hiding this comment.
해당 부분에 시맨틱 태크 활용이 조금 아쉬운거 같습니다 기본적으로 header 와 footer 는 페이지 단위로 생각해주시면 좋을꺼같습니다! 이부분을 개선한다면 header,footer 사용 대신 div 혹은 article 를 사용해주시면 좋을꺼같습니다~
There was a problem hiding this comment.
피드백 주신대로 main안에 있는 footer들은 다 div태그로 수정했습니다. 감사합니다~
index.html
Outdated
Comment on lines
302
to
331
| <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> |
There was a problem hiding this comment.
해당 부분에 코드가 ul 과 li가 같은 레벨에 있어 가독성이 많이 떨어집니다! 추후에는 코드 정렬부분도 한번 고민해주시면 좋을꺼같습니다~
index.html
Outdated
Comment on lines
17
to
25
| <button id="header-hamburger"> | ||
| <div></div> | ||
| </button> | ||
| <button id="header-naverpay"> | ||
| <div></div> | ||
| </button> | ||
| <button id="header-notice"> | ||
| <div></div> | ||
| </button> |
There was a problem hiding this comment.
html 과 css 작업하실때는 id 로 작성하시는것은 최대한 지양 해주시면 좋을꺼같습니다~
id는 고유해서 개별 요소 별로 선택할때는 편하지만 추후 유지보수할때는 힘들어서 css 작업할때는 class 를 지향 해주시면 좋을꺼같습니다~
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
네이버 메인 페이지 클론코딩
실제 사이트
https://www.naver.com/
데모 사이트
https://regal-frangipane-f310c3.netlify.app/
구현한 내용
아쉬운 점