[이지은]Sprint14 #56
[이지은]Sprint14 #56
Conversation
LeeJiEuns
requested review from
dongqui
and removed request for
bootcampCodeit
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
지은님 미션 하시느냐 고생 많으셨습니다 :)
클래스도 잘 정의해주셨고, 대체로 기본에 충실히 잘 구현해 주셨습니다! 👍
다만 전반적으로 vw가 너무 너무 남용 되었습니다..! vw는 정말 뷰포트 크기에 직접적으로 영향을 받아야 할 때만 쓰는 게 좋습니다. 폰트 크기랑 패딩 같은 건 rem, clamp 등을 쓰면 유지보수가 편하고, 전체적인 배치는 %나 max-width 등을 활용할 수 있습니다.
제대로 보이는지 글씨가 깨지지 않는지 궁금합니다.
14인치 노트북에서 실습해 업무용 컴퓨터 화면에서 어떻게 보이는지 궁금합니다.
->
보통은 개발자 도구에서 스크린샷에 표시된 아이콘을 눌러 반응형UI를 확인합니다!
현재는 화면 크기에 따라 UI가 어색해집니다!
거의 모든 단위를 vw를 사용해주셨는데, vw는 화면의 너비에 따라 크기가 달라지 게 됩니다. 이 경우, 화면에 따라 크기가 너무 작아지거나 커질 수 있기 때문에 유지보수하기 어렵고 예측 불가능한 레이아웃이 될 수 있습니다 😢 각각 용도에 맞게 단위를 써주셔야 합니다.
가령 10.42vw; 이런 값들은 어떤 수치가 나올지 알 수가 없죠..!
또한 line-height, border-radius 등 정말 모든 속성을 반응형으로 구현하는 경우는 매우 드문 일 입니다.
우선은 피그마를 참고하셔서 px이나 rem으로 모두 바꿔 주시고 미션 3 때 다시 반응형을 구현해 보시면 좋을 거 같습니다 :) 어려움을 느끼신다면 DM 주세요! 저랑 같이 하셔도 좋습니다~~
| @@ -0,0 +1,108 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
<html lang="ko"> lang에 신경써주세요.
SEO, 접근성에 도움이 됩니다!
| <div class="main_background"> | ||
| <div class="bg_text_and_image"> | ||
| <div class="bg_text"> | ||
| <h2>일상의 모든 물건을</h2> |
There was a problem hiding this comment.
h tag 는 계층 구조로 사용하시는 것이 접근성에 좋습니다! :)
https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading_Elements#사용_일람
| <div class="contents_detail"> | ||
| <img src="../img/Img_home_01.png" class="home_img"> | ||
| <div class="contents_text"> | ||
| <p class="blue_text">Hot item</p> |
There was a problem hiding this comment.
P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요!
| <body> | ||
| <header> | ||
| <div class="icon"> | ||
| <img src="../img/panda_icon.png" class="image_icon"> |
There was a problem hiding this comment.
img를 쓰실 때 alt를 넣어주시는 것이 접근성에 좋습니다! :)
| } | ||
|
|
||
| a{ | ||
| box-sizing: border-box; |
There was a problem hiding this comment.
box-sizing: border-box; 는 기본 값으로 설정하는 경우가 많습니다.
이런 경우 아래처럼 모든 요소에 공통으로 스타일을 넣을 수 있습니다! :)
* {
box-sizing: border-box;
}
| font-style: normal; | ||
| } | ||
|
|
||
| @media (max-width: 100.00vw) { |
There was a problem hiding this comment.
�미디어 쿼리 조건이 100vw 이하, 그리고 아래쪽에 100vw 이상으로 되어있어서 조건이 겹치게 됩니다 😢
피그마(미션3)를 참고하여 적절한 breakpoint(예: 767px, 1199px)를 사용해 주세요!
| cursor: pointer; | ||
| } | ||
|
|
||
| p{ |
There was a problem hiding this comment.
지금은 css 파일이 하나라 괜찮지만, 태그에 직접 스타일을 주게 되면 페이지 전체에 영향을 주기 때문에 지양하시는 것이 좋습니다!! 되도록 클래스를 이용해주세요~ :)
| </div> | ||
| <div class="contents"> | ||
| <div class="contents_detail"> | ||
| <div class="contents_text right_text"> |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게