[양지선] sprint1 #25
[양지선] sprint1 #25
Conversation
| <div> | ||
| <img src="images/img_main2.png" alt="하단이미지" class="main2"> | ||
| </div> | ||
| <footer> |
There was a problem hiding this comment.
a태그를 눌러서 링크로 연결되지 않아요 혹시 확인부탁드립니다.
There was a problem hiding this comment.
코멘트를 달아주신 부분은 footer 태그이지만 해당 페이지의 a 태그가 왜 동작이 안되는지에 대한 질문이라 이해하고 답변드리겠습니다~
현재 페이지에서 link는 걸어주셨지만 해당하는 페이지가 없어 그 페이지로 이동했을시 notFound 에러가 나는 것입니다.
우선 각 링크에 해당하는 페이지들-privacy.html, login.html 등-을 만들어주시고 이를 연결해주시면 됩니다.
다만 주의할 점은 현재 단계에서 href에 입력해주실때, 확장자를 포함하셔야 한다는 것입니다.
따라서 파일 만드시고 아래처럼 작성해주시면 잘 동작할거에요~
<a href='/login.html' /> // 입력한 파일의 주소가 맞는지 확인하셔야해요.
There was a problem hiding this comment.
지선님 첫번째 PR 제출 고생하셨습니다!
어려우셨다고 말씀주셔서 자세하게 코멘트 남겨 드렸어요~ 만약 읽어보시고
이해안가는 부분이 있다면 DM으로 알려주세요.
또한 제가 말씀드린대로 이미지로 작업한 부분을 html로 작성하시면 구조가 많이 바뀌실 것 같아요.
디자인의 경우 말씀하신 것처럼 1920px 기준으로 작업하신 것을 감안하고 확인했습니다~
+어렵다고 말씀하셧지만 html 구조도 스스로 잘 작성하셨어요! 처음에는 다 어려운 법이니 즐겁게 작업하시면 좋겠습니다.
There was a problem hiding this comment.
❗️ 수정요청
지선님 해당 파일은 mac에서 작업하실 때 생성되는 파일입니다.
해당 폴더에 대한 정보를 가지고 있는 파일로, 이러한 파일들은 git repo에 올라갈 이유가 없습니다~
git repo에는 공유할필요가 있는 파일들만 올라가면 되기 때문에 이러한 파일들은 git에 올라가지 않도록 관리하는 것이 좋습니다.
관련한 블로그 글이 있으니 읽어보시고, 제거하시는 것을 추천드릴께요~
There was a problem hiding this comment.
❗️ 수정요청
해당 이미지를 사용하지 않는 것으로 확인되네요~ 불필요한 파일들은 없는것이 관리측면에서 좋습니다~
There was a problem hiding this comment.
❗️ 수정요청
ic는 icon의 의미로 해당 이미지는 icon이 아니니 logo.png로 변경하시는 것을 추천드려요~
There was a problem hiding this comment.
❗️ 수정요청
해당 이미지에서 아래 부분만 이미지로 쓰시고 나머지는 html로 작성하시는 것이 좋아요.
이미지는 추후 반응형 디자인시 변경하기가 어렵기 때문에 Hot item, 인기 상품을 확인해 보세요 등을 html로 작성하시고 css를 통해 디자인을 바꿔주시는 방식으로 하셔야합니다~
There was a problem hiding this comment.
❗️ 수정요청
해당 이미지 파일의 크기를 보면 988 × 444로 되어 있습니다.
저희는 반응형 사이트를 만들고 있고, 이런 이미지들은 모바일에서도 사용할 것이기 때문에 추출하실때, 1배수가 아닌 2배수로 추출해주셔야 해상도가 더 높은 모바일에서도 잘 나옵니다.
아래처럼 figma export 탭에서 2x 로 설정하고 추출해주세요~
현재 파일 크기입니다.
아래는 위에서 말씀드린 이미지 영역을 2x 추출했을 시 크기입니다.
| <div> | ||
| <img src="images/img_main2.png" alt="하단이미지" class="main2"> | ||
| </div> | ||
| <footer> |
There was a problem hiding this comment.
코멘트를 달아주신 부분은 footer 태그이지만 해당 페이지의 a 태그가 왜 동작이 안되는지에 대한 질문이라 이해하고 답변드리겠습니다~
현재 페이지에서 link는 걸어주셨지만 해당하는 페이지가 없어 그 페이지로 이동했을시 notFound 에러가 나는 것입니다.
우선 각 링크에 해당하는 페이지들-privacy.html, login.html 등-을 만들어주시고 이를 연결해주시면 됩니다.
다만 주의할 점은 현재 단계에서 href에 입력해주실때, 확장자를 포함하셔야 한다는 것입니다.
따라서 파일 만드시고 아래처럼 작성해주시면 잘 동작할거에요~
<a href='/login.html' /> // 입력한 파일의 주소가 맞는지 확인하셔야해요.| width: 128px; | ||
| height: 48px; | ||
| border-radius: 8px; | ||
|
|
There was a problem hiding this comment.
💊 제안
의도가 있는 공백이 아니라면 없는 것이 가독성 측면에서 더 좋습니다~
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 56px; | ||
| font-family: Pretendard; |
There was a problem hiding this comment.
❗️ 수정요청
font-famliy 속성은 해당 요소들에 모두 공통 적용되므로 body 태그나 html 태그자체에 적용해주시고 나머지는 지우시는게
반복을 줄이고 관리하기도 좋습니다.
| font-family: Pretendard; | |
| html { | |
| font-family: Pretendard; // html 요소의 자식들은 해당 속성을 물려받음 | |
| } |
| .headline-content a { | ||
| text-decoration: none; | ||
| } |
There was a problem hiding this comment.
💊 제안
브라우저 마다 자체적으로 스타일을 가지고 있습니다.
위의 코드에서 a 태그의 text-decoration: none을 적용해주신건, 이미 text-decoration: underline 속성을 가지고 있기 때문이죠~
이런식으로 이미 가지고 있는 스타일을 없애 원하는 스타일을 적용하기 위한 작업이 필요합니다.
주로 이러한 역할을 하는 css 파일을 reset.css 혹은 normalize.css 라는 이름으로 만들어서 관리합니다.
지선님께서는 지금 필요한 태그의 스타일만 초기화하고 사용하셨지만 reset.css 같은 파일을 만드셔서
다른 태그들의 기본 스타일도 초기화하고 작업하시는 것이 예상치 못한 동작도 방지하고 코드 반복을 줄일 수 있어 추천드려요!
혹시 어떤 내용들이 들어가는지 궁금하시다면 reset.css, normalize.css 를 구글에 검색해보시면 다양한 파일이 나오니
확인해보시고 마음에 드는 것을 참고하시면 좋을 것 같습니다.
| .wrap{ | ||
| display: flex; | ||
| justify-content: center; | ||
| width: 1920px; | ||
| height: 2160px; | ||
| position: relative; | ||
| top: 610px; | ||
| padding: 138px 466px; | ||
| gap: 10px; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .content{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 988px; | ||
| height: 444px; | ||
| border-radius: 12px; | ||
| gap: 138px; | ||
| margin: 0 auto; | ||
| } |
There was a problem hiding this comment.
❗️ 수정요청
해당 .wrap 요소가 html 흐름을 벗어나 띄워져 있고 특정 height를 가지고 있기 때문에
footer의 privacyPolicy, FAQ, SNS 링크들을 가려 클릭할 수 없게 합니다.
또한 특정 요소들을 position 속성을 이용해 배치하는 것은 css 작성을 어렵게하므로 추천드리지 않습니다.
따라서 내부 요소에 의해 자연스럽게 width, height값을 가지게 되므로 아래의 값만 남겨두시는 것을 추천드려요.
| .wrap{ | |
| display: flex; | |
| justify-content: center; | |
| width: 1920px; | |
| height: 2160px; | |
| position: relative; | |
| top: 610px; | |
| padding: 138px 466px; | |
| gap: 10px; | |
| margin: 0 auto; | |
| } | |
| .content{ | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| width: 988px; | |
| height: 444px; | |
| border-radius: 12px; | |
| gap: 138px; | |
| margin: 0 auto; | |
| } | |
| .wrap{ | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| // content 요소도 height 값이 너무 작게 입력되어 있어 디자인대로 나오지 않아 height, width값을 제거해주었습니다. | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| border-radius: 12px; | |
| gap: 138px; | |
| } |
2 participants
요구사항
HTML, CSS 파일을 Netlify로 배포해 주세요.
(링크: https://peppy-melba-cce5ef.netlify.app/)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
기본
심화
멘토에게
-자세하게 리뷰 부탁드립니다. 처음이라 모르는게 너무 많았어요...