Skip to content

KDT0_KimMinSeo 네이버 메인 페이지 클론코딩 제출#50

Open
minseokiim wants to merge 10 commits intomainfrom
KDT0_KimMinSeo
Open

KDT0_KimMinSeo 네이버 메인 페이지 클론코딩 제출#50
minseokiim wants to merge 10 commits intomainfrom
KDT0_KimMinSeo

Conversation

@minseokiim
Copy link

@minseokiim minseokiim commented Jul 28, 2023 •
edited
Loading

네이버 메인 페이지 클론코딩

실제 사이트

https://www.naver.com/

데모 사이트

https://regal-frangipane-f310c3.netlify.app/

구현한 내용

image

image

  • html과 css를 이용한 네이버 메인페이지 클론 코딩
  • 시맨틱 태그 활용
  • grid와 flex 활용
  • netlify를 이용한 배포

아쉬운 점

  • 멘토링때, 멘토님 피드백을 받고 스프라이트 이미지 형식에서 잘라서 하나씩 바꾸려고 했는데, 바꾸는 과정에서 문제가 생겨 결국 원래대로 스프라이트 이미지에 background-position을 주는 방식으로 구현했다.
  • css부분이 약하다고 생각하고 있었는데 자바스크립트 없이 html, css 로만 만드려니 초반에 어려움을 겪었다.
  • 시간이 부족해서 다 구현하지 못해서 아쉽다. 프로젝트 제출은 끝났지만 이후에 좀 더 수정할 예정이다.

@minseokiim minseokiim changed the title KDT0_KimMimSeo 네이버 메인 페이지 클론코딩 제출 KDT0_KimMinSeo 네이버 메인 페이지 클론코딩 제출 Jul 28, 2023
@minseokiim minseokiim self-assigned this Jul 28, 2023
@wkdtnqls0506
Copy link

wkdtnqls0506 commented Aug 1, 2023

실제 네이버 홈 화면과 흡사하게 잘 구현하신거 같습니다..!!👍👍 그리고 커밋메시지를 규칙성있게 작성하신거 보고 배워갑니다 ㅎㅎ! css를 섹션마다 구분해서 작성하신 것이 보기 편리하고 훨씬 간편하네요! 저도 활용해보겠습니다!!😁😁

@jongsujin
Copy link

jongsujin commented Aug 2, 2023

너무 잘하신 것 같아 많이 배워갑니다! position 주시면서 일일이 위치잡기 어려우셨을텐데 꼼꼼하게 잘 하셨고 고생 많으셨습니다!

@jinjoo-jung
Copy link

jinjoo-jung commented Aug 3, 2023

실제 사이트와 정말 비슷한 것 같아서 어려워보였는데 잘 구현하신 것 같아요!👏
flex와 grid를 잘 사용하신 것 같아서 배우고 갑니다!! 이미지도 잘 가져오신 것 같아요! 수고 하셨어요 :)

@syb0127
Copy link

syb0127 commented Aug 4, 2023

정말 꼼꼼하게 잘 하셨어요! Hyperlink 달고 버튼 색깔 바꾸는게 시간 많이 걸렸을거 같은데 정말 고생하셨습니다 :)

jungHyeonS
jungHyeonS reviewed Aug 5, 2023
View reviewed changes
Copy link

@jungHyeonS jungHyeonS left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

민서님 작업하시느라 고생하셨습니다~ 정말로 깔끔하게 구성해주신거 같습니다~
리뷰들린 내용들만 추후 작업할때 참고해주시고 혹시나 시간이 조금 되신다면 이미지 부분도 개선해주시면 좋을꺼같습니다~

index.html Outdated
Comment on lines +183 to +253
<header>
<a href="" > <strong>쇼핑 /</strong></strong></a>
<a href="" ><strong>&nbsp; 맨즈 /</strong></a>
<a href="" ><strong>&nbsp; 원쁠딜 /</strong></a>
<a href="" ><strong>&nbsp; 쇼핑라이브</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>
Copy link

@jungHyeonS jungHyeonS Aug 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 부분에 시맨틱 태크 활용이 조금 아쉬운거 같습니다 기본적으로 header 와 footer 는 페이지 단위로 생각해주시면 좋을꺼같습니다! 이부분을 개선한다면 header,footer 사용 대신 div 혹은 article 를 사용해주시면 좋을꺼같습니다~

Copy link
Author

@minseokiim minseokiim Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

피드백 주신대로 main안에 있는 footer들은 다 div태그로 수정했습니다. 감사합니다~

index.html Outdated
Comment on lines +302 to +331
<div id="footer-list">
<ul>
<li>
<a>회사소개&nbsp;&nbsp;</a>
</li>
<li>
<a>인재채용&nbsp;&nbsp;</a>
</li>
<li>
<a >제휴제안&nbsp;&nbsp;</a>
</li>
<li>
<a>이용약관&nbsp;&nbsp;</a>
</li>
<li>
<a><strong>개인정보처리방침&nbsp;&nbsp;</strong></a>
</li>
<li>
<a>청소년보호정책&nbsp;&nbsp;</a>
</li>
<li>
<a>네이버 정책&nbsp;&nbsp;</a>
</li>
<li>
<div>고객센터&nbsp;&nbsp;</div>
</li>
<li>
<strong> ⓒ NAVER Corp.</strong>
</li>
</ul>
Copy link

@jungHyeonS jungHyeonS Aug 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

해당 부분에 코드가 ul 과 li가 같은 레벨에 있어 가독성이 많이 떨어집니다! 추후에는 코드 정렬부분도 한번 고민해주시면 좋을꺼같습니다~

Copy link
Author

@minseokiim minseokiim Aug 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 코드정렬 해서 수정했습니다!

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>
Copy link

@jungHyeonS jungHyeonS Aug 5, 2023

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 를 지향 해주시면 좋을꺼같습니다~

Copy link
Author

@minseokiim minseokiim Aug 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네 감사합니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jungHyeonS jungHyeonS jungHyeonS left review comments

Assignees

@minseokiim minseokiim

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@minseokiim @wkdtnqls0506 @jongsujin @jinjoo-jung @syb0127 @jungHyeonS