[조인성] Sprint1 #11
[조인성] Sprint1 #11
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
인성님 첫번째 PR 제출 고생하셨습니다!
리뷰 드린 코멘트는 모두 필수 반영사항은 아니고 코드에 정답은 없으니
보고 마음에 드시는 방향으로 수정하시면 좋겠습니다!
다음 주차도 화이팅입니다~
-
기본 요구사항에 맞게 했는지 확인 받고 싶습니다!:
1주차 요구사항을 잘 구현하셨다고 생각합니다. -
이번에 px 단위 외의 다른 단위(%, em, rem, vw, vh 등)를 사용을 해봤는데 px 단위에 익숙해지다 보니까 어떻게 사용해야 좋을지 궁금합니다:
말씀하신 단위들은 결국 px 단위로 계산되어 렌더링됩니다~ 다만 고정값인 px가 아니라 상대값이 필요할때 언급해주신 단위들을 사용하는 것이지요. 정답은 없고, 각 단위가 어떤 의미인지 알고 계시다가 필요한 경우 사용하시면 됩니다. 정답은 없으니 우선 각 단위에 대해 이해하시고 다양하게 써보시길 추천드릴께요. -
보통 코드를 작성할 때 단위를 어떤 것으로 쓰는지 생각을 하고 작성 하는지 궁금합니다!:
제가 잘 이해한건지 모르겠습니다만 특정 단위를 정해두고 구현하냐는 질문으로 이해하고 답변을 드리자면, 구현해야 하는 디자인에 따라, 팀에서 정한 룰에 따를 것 같습니다. -
지금은 하나의 스타일 시트로만 작업을 했는데 만약 분리한다면 기준을 어떻게 잡은 후에 분리해야 할지 궁금합니다!:
인성님이 생각하기에 각자 역할에 따라 CSS 파일을 분리하시면 좋습니다!
어떻게 분리할지 한 번 찾아보셔도 좋고, 프로젝트 규모가 커지면 자연스럽게 "이렇게 분리하면 좋겠다"는 감이 오실 거예요~ 예를 들어, 페이지가 늘어나면 페이지별 CSS로 분리할 수도 있고, 브라우저 기본 스타일을 초기화하는 CSS 파일을 따로 관리할 수도 있겠죠. 어떤 방식이 더 효율적일지 고민해 보면서 시도해 보시면 좋을 것 같아요! -
display나 position같은 경우 명시적으로 써 놔야 하는지 궁금합니다!:
어떤 질문인지 모르겠습니다 🧐 css에서 작성되어 있는 속성에 주석을 통해 강조해야하냐는 질문이라면 그러지 않아도 될 것 같습니다. -
심화 요구사항을 진행할 때 따로 디자인 시안 없이 작업을 하다 보면 개발자 도구를 통해 실시간으로 확인해보고 화면에서 봤을 때 괜찮다 싶은 수치로 CSS에 반영하는 방식으로 진행 했는데. 이렇게 작업하는 방향성이 맞는지 궁금합니다!:
추후 스프린트 미션이 진행되면서 반응형 디자인이 존재하니 지금은 말씀하신 방향으로 하셔도 됩니다~ -
만약 반응형 웹페이지를 제작할 때 크기를 바꾸지 않아도 될 경우 미디어 쿼리 부분에서 명시적으로 정의해야 하는지 아니면 명시를 안 해도 되는지 궁금합니다!:
크기를 바꾸지 않아도 된다는 말이 어떤 의미인지 잘 이해한 것인지 모르겠습니다만 특정 화면에서 디자인이 변경될 필요가 없다는 의미라면 css문 작성이 불필요한 경우이므로 작성하지 않는 것이 더 좋을 것 같습니다~ -
스타일 중에 전체 적용이 되는 클래스나 요소는 가독성을 위해 코드 윗부분에 작성하게 되었는데 cascading 규칙을 생각했을 때 위에 배치를 하는 게 좋은지 아니면 아래에 배치하는 게 괜찮을지 궁금합니다!:
좋은 질문입니다. 한번 아래에 배치하는 것의 장점과 위의 배치하는 것의 장점에 대해 생각해보시면 좋을 것 같습니다. 말씀하신 전체 적용이 되는 css 문의 경우 태그 선택자를 이용해 덮어쓰기 쉽게 작성해주셨기때문에 상하단 둘다 영향은 없을 겁니다. 다만 클래스 문의 경우 하단으로 오게 되면 동일 css 선택자의 경우 하단의 있는 css 문이 우선순위를 가지게 되고, 의도치 않게 동작될 가능성이 큽니다. 따라서, 일반적인 스타일은 상단에 두고, 세부적인 클래스 스타일은 하단에 배치하는 게 안전할 것 같습니다.
There was a problem hiding this comment.
❗️ 수정요청
text logo를 위해 해당 폰트를 사용하신 것 같아요! 다만 이미지보다 폰트 파일의 크기가 훨씬 큽니다.
이렇게 사용처가 적고, 이미지로 대체가 가능한 경우 폰트 파일은 지우시고 이미지로 사용하시는 것을 추천드려요!
There was a problem hiding this comment.
💊 제안
한 레포안에서는 동일한 룰을 따르는 것이 좋습니다.
따라서 images/icon으로 변경하시는 것과 img_home_01.png와 같은 식으로 통일성있는 구조를 잡으시는 것을 추천드려요~
| @@ -0,0 +1,92 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
❗️ 수정요청
html lang 속성은 스크린리더, 검색 엔진등에게 해당 사이트가 어떤 언어 기반으로 작성되었는지 설명하는 속성입니다.
en은 english라는 의미이니 ko로 변경해주세요!
| <html lang="en"> | |
| <html lang="ko"> |
| <body> | ||
| <header> | ||
| <nav class="herader-nav"> | ||
| <a class="header__logo-box": href ="/"> |
There was a problem hiding this comment.
❗️ 수정요청
| <a class="header__logo-box": href ="/"> | |
| <a class="header__logo-box" href ="/"> |
| <section class="banner-section"> | ||
| <div class="banner"> | ||
| <div class="banner__title"> | ||
| <h1 class="banner__text">일상의 모든 물건을 <sapn class="text-wrap"> 거래해 보세요</sapn></h1> |
There was a problem hiding this comment.
❗️ 수정요청
h1 태그는 heading 1이라는 의미의 태그입니다. 이러한 h1~h6까지의 태그들은 시멘틱한 작성에 중요한 역할을 합니다.
그중 h1 태그는 제목에 해당하는 친구입니다.
목차나 영화를 생각해보시면 제목은 늘 1개입니다. 그래서 h1 태그는 한 페이지에 한번만 사용하는 것이 좋습니다.
따라서 다른 태그로 수정하시는 것을 추천드려요.
다만 이는 접근성을 위한 권고사항일 뿐 필수사항은 아니며, 다양한 방법으로 구현이 가능합니다.
There was a problem hiding this comment.
👍 칭찬
BEM 방식처럼 네이밍 방법론을 적용해서 클래스명을 작성하신점이 좋아요~
CSS 작성법과 네이밍 방법론은 다양하게 있으니 이것저것 시도해보시고 마음에 드는 방식을 찾으시면 좋겠네요~
| } | ||
|
|
||
|
|
||
| /*herader section*/ |
There was a problem hiding this comment.
👍 칭찬
파악하기 쉽게 관련된 css 들을 모아두시고 주석으로 구분해주신점 좋습니다!
|
|
||
| /*Laptop Version*/ | ||
| @media (max-width: 1024px) { | ||
|
|
There was a problem hiding this comment.
❗️ 수정요청
불필요한 공백은 없는것이 좋습니다~
| a { | ||
| cursor: pointer; | ||
| 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 를 구글에 검색해보시면 다양한 파일이 나오니
확인해보시고 마음에 드는 것을 참고하시면 좋을 것 같습니다.
| .card__img { | ||
| width: 60%; | ||
| } |
There was a problem hiding this comment.
❗️ 수정요청
화면크기가 줄어들때, width가 줄어들고, height는 100%로 유지되니 이미지가 왜곡되어 보여요~
이미지는 최대한 기존 비율을 유지하는 것이 좋으니 height를 다른 값으로 변경하시는 것을 추천드려요.
| .card__img { | |
| width: 60%; | |
| } | |
| .card__img { | |
| width: 60%; | |
| height: auto; | |
| } |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게