[강한솔] Sprint1

[engdawn]

요구사항

기본

• 랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.[x]
• title은 “판다마켓”로 설정합니다.[x]
• 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.[]
• 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.[]
• 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.[x]
• “판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.[x]
• '로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)[x]
• “구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)[x]
• “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)[]
• 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.[]

심화

• palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.[]

주요 변경사항

• 기본 틀 작성

스크린샷

멘토에게

• 이미지도 같이 commit해서 push했는데 코드만 push 해야 했을까요?
• 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

[lhc0506]

안녕하세요 한솔님!
1주간 너무 고생하셨고, 과제도 열심히 해주신점 너무 고생하셨습니다👍
리뷰 확인 부탁드리며, 작은 수정 필요사항 몇 가지 있는데 참고하여 수정해주세요. 😄

전체적으로 리뷰가 필요한 부분은 여기서 추가로 알려드릴게요!

1. 현재 이미지 파일들의 네이밍 컨벤션이 다소 아쉽습니다. (Group 19.png, Img_home_01.png등 통일이 안되어있네요🥲) 보통 파일명들은 케밥케이스 혹은 스네이크 케이스를 선호한답니다. 개인적으로 앞에 Img는 뒤의 확장자로 이미지 파일인지 알 수 있으므로 중복이라고 생각됩니다!
2. global로 font-family와 palette를 적용을 해보시면 css코드를 짜실 때 조금 더 중복없이 작성이 가능할 것같아요! 한번 시도해보시는것은 어떨까요?
3. 시맨틱 태그들을 적절히 넣어주신점 👍 입니다.
4. 현재 id가 너무 specific하게 사용중인것 같습니다. HTML의 태그에서 하나가 여러개의 class를 가질 수 있고, 이를 css에서 적용을 할 수 있습니다. 예를들어, login button의 경우, class에 'small' 과 'button'을 갖게 하면 같은 모양의 a태그들을 또다시 사용할 수 있게 됩니다. 이부분을 한번 참고해보세요!!
5. 이미지도 같이 commit해서 push했는데 코드만 push 해야 했을까요? -> 이미지도 같이 push해주시는게 맞습니다! 만약 image가 없다면 어떻게 될지 고민해보시고, 그렇다면 현업에서는 모든이미지를 git에 올리는 것일까? 도 고민해보시면 더 좋을 것 같아요!!

이번 한주간 너무 고생하셨고 이번주도 화이팅입니다!!

[lhc0506]

HTMLElement.lang속성은 요소의 특성값과 텍스트 내용의 기본언어를 가져오거나 설정합니다!
한국어 사용자 대상으로 하는 사이트이므로 "en"이 아닌 "ko"가 되어야 할것 같아요! 😄
추가로 특별히 지역특성을 강조하고자 할 때는 '언어-지역(대문자)' 로 설정을 한답니다!

MDN과 이부분참고부탁드릴게요!

[lhc0506]

현재 filechanged를 보시면 아래 사진처럼 하나의 오류가 나오게 됩니다.
이는 "End Of Line(EOL)" 이 없다는 경고입니다. 이를 없애려면 파일 내 코드 마지막 줄 뒤에 개행을 해주셔야 해요.

이 블로그를 보시면서 왜 마지막 줄에 개행이 없을 때 깃헙에서 오류를 보여주는지 확인해보시고, 사용하시는 코드에디터에서 설정을 해보시는 것을 추천드립니다! (물론 해결을 안해도 코드상에선 문제가 없지만, 코드리뷰할 때 불필요하게 이것에 한번 더 눈이 가는것을 줄일 수 있습니다!)

[lhc0506]

클래스명을 가독성 있도록 잘 지어주셨어요👍
여기에 BEM방법론도 참고하셔서 추가해보는것도 더 좋을 것 같습니다!

[lhc0506]

Suggested change

현재 안보이는 인덴트(띄어쓰기)가 존재하네요!
저는 이런 부분을 확인하기 위해 TrailingSpaces라는 익스텐션을 vsc에서 사용하고 있습니다. 또한 설정에서도 저장 시 자동으로 불필요한 띄어쓰기는 삭제 처리를 해주고 있답니다~

한솔님도 이런 부분은 설정을 셋팅해서 자동으로 삭제하게 한다면 신경쓰지 않고 코딩할 수 있을 것 같아요!

[lhc0506]

css파일을 확인해보면section2는 순서를 바꿔주고 있어요. css를 따로 적용하기 보단 html안에서 순서를 바꾸는게 더 직관적일 것 같습니다!

Suggested change

	<section id="section2" class="white-container">
	<img class="white-container-img" alt="돋보기 이미지" src="Img_home_02.png"/>
	<div id="explain2" class="explains">
	<div class="small-text">
	Search
	</div>
	<div class="text">
	구매를 원하는 <br>
	상품을 검색하세요
	</div>
	<div class="middle-text">
	구매하고 싶은 물품은 검색해서<br>
	쉽게 찾아보세요
	</div>
	</div>
	</section>
	<section class="white-container">
	<div id="explain2" class="explains">
	<div class="small-text">
	Search
	</div>
	<div class="text">
	구매를 원하는 <br>
	상품을 검색하세요
	</div>
	<div class="middle-text">
	구매하고 싶은 물품은 검색해서<br>
	쉽게 찾아보세요
	</div>
	</div>
	<img class="white-container-img" alt="돋보기 이미지" src="Img_home_02.png"/>
	</section>

[lhc0506]

개인 차이 그리고 팀별 컨벤션으로 다르지만 저는 보통 줄임말은 지양하는 편이랍니다! 참고만 부탁드릴게요!

Suggested change

	<a id="go-to" class="btn" href="items.html">구경하러 가기</a>
	<a id="go-to" class="botton" href="items.html">구경하러 가기</a>