[전유진] sprint1 #29
[전유진] sprint1 #29
Conversation
GANGYIKIM
left a comment
GANGYIKIM
left a comment
There was a problem hiding this comment.
유진님 첫번째 PR 제출 고생하셨습니다!
리뷰 드린 코멘트는 모두 필수 반영사항은 아니고 코드에 정답은 없으니
보고 마음에 드시는 방향으로 수정하시면 좋겠습니다!
다음 주차 제출시에는 질문도 멘토에게 섹션에 같이 적어주세요~
-
반응형 디자인과 관련하여 화면 크기에 따른 사진 크기 조정 및 글자 깨짐 방지를 위해 어떻게 수정하는 것이 좋을 지 궁금해요!:
구현해야하는 반응형 디자인에 따라 다를 것 같습니다~ 일반적으로는 반응형 작업을 위해 이미지나 container에 절대 단위인 px대신 반응형 단위를 사용하며 기초를 만듭니다. 이건 말로 들으시는 것보다 반응형 디자인을 구현하시다보면 감이 오실 것 같아요! -
class 사용 시에 반복되는 부분을 최소화해서 적으려고 노력했는데 잘 반영되어있는 지 궁금하고 특정 태그 아래의 값을 접근하기 위해 상위 태그에 별도의 class를 넣어주고 작업하였는데 이러한 방식이 괜찮은지 궁금해요!:
"괜찮다" 혹은 "안 괜찮다"는 것의 기준은 다 다를 것 같아요~ 저는 요구사항을 충족시킬 수 있고, 성능상 큰 문제가 없다면 괜찮다고 생각합니다. 이런것처럼 "잘"의 기준도 다 다르겠지요. 또한 반복을 줄이기 위해 어떤 노력을 하셨는지 더 자세히 알려주셔야 반영여부를 판단할 수 있을 것 같습니다~
특정 태그의 하위 태그에 접근하기 위해 상위 태그를 선택하고 하위 태그로 접근하셔도 되고, 아니면 바로 선택하고 싶은 태그에 classname을 통해서 접근해도 됩니다. 다만 저는 더 좋은 방식은 원하는 태그에 바로 접근하는 것이라고 생각합니다. 상위 태그를 통해 하위 태그로 접근하게 되면, 말씀해주신 구조상.classname tag의 구조인데 이렇게 되면 불필요하게 우선순위가 높아지게 되니까요~ -
class 명을 적절하게 지어 주었는 지 궁금해요.:
이름을 지으실때는 명확한 이유가 있지 않는한 태그, 위치와 같이 변경될 수 있는 요소를 기반으로 네이밍하지 않는 것이 좋습니다. 그보다 변하지 않을 요소나 역할에 대해 설명할 수 있는 이름이 좋습니다. -
시맨틱 태그를 최대한 사용하려고 했는데 적절히 사용했는 지 궁금해요.:
시멘틱하다는 것은 스펙트럼에 가깝고 정답이 없는지라 명확하게 답변드리기 어렵습니다~ 다만 특정 부분에 관한것들은 코멘트를 통해 답변드렸습니다~ -
rem 단위로 줄 때 소수점 3자리보다 커지지 않도록 해야 하는 지 궁금해요.:
rem은 결과적으로 px 로 계산되어 적용됩니다. 물론 소수점으로 css를 작성하는 것이 단위와 관계없이 이해하기 어렵기 때문에 지양하는 것이 좋습니다만 px로 변환된 값이 정수라면 괜찮습니다. -
최대한 figma의 디자인과 비슷하게 하기 위해 태그를 여러 번 감싸다 보니 div태그의 사용이 잦은 것 같은데 디자인과 조금 다르더라도 코드가 정갈한 것이 좋을 지 궁금해요.:
디자인과 같은 것이 중요합니다~ 어떤 부분을 말씀하신 것처럼 작업하신지 모르겠어 자세히 답변드리기 어렵습니다만 html 태그 구조가 불필요하게 작성된 것도 좋진 않습니다. 다만 대부분의 경우 html 구조가 복잡해지지 않고, css로 구현이 가능하니 우선 이를 고려해보시고 안되시면 html 구조가 복잡한 것이 디자인과 다른 것보다 좋다고 생각합니다~
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="block"></section> |
There was a problem hiding this comment.
💊 제안
디자인 구현을 위한 태그 사용은 지양하시는 것을 추천드립니다.
특정 영역을 차지해야한다면 css를 통해 구현하시는 것이 더 접근성에 좋습니다~
There was a problem hiding this comment.
.bottom.banner::before { /* 배경색 */
content: "";
display: block;
width: 100%;
height: 19.2rem;
background-color: var(--gray);
position: absolute; /* relative에서 absolute로 변경 */
top: 0; /* 밀리지 않도록 변경 */
left: 0;
}
를 사용해서 수정하였더니 밑의 .bottom.banner의 내용들도 같이 아래로 밀려 내려가서
css로 어떻게 수정해야할 지 모르겠습니다 ㅜㅜ
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
yuj2n
left a comment
yuj2n
left a comment
There was a problem hiding this comment.
자세하고 유용한 코멘트를 많이 남겨주셔서 코드를 수정하는 데에 많은 도움이 되었습니다! 😊👍
다음 번에 PR 날릴 때에는 코드와 묶어서 같이 질문을 해서 더 알아보기 쉽게 하도록 해야겠다는 생각이 들었습니다.
| <a href="/" | ||
| ><img src="images/pandamarket.png" width="153" height="51" | ||
| /></a> |
There was a problem hiding this comment.
Vscode의 Prettier 에서 자동으로 만들어주어서 어떻게 해야할 지 모르겟습니다! ㅠㅠ
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="block"></section> |
There was a problem hiding this comment.
.bottom.banner::before { /* 배경색 */
content: "";
display: block;
width: 100%;
height: 19.2rem;
background-color: var(--gray);
position: absolute; /* relative에서 absolute로 변경 */
top: 0; /* 밀리지 않도록 변경 */
left: 0;
}
를 사용해서 수정하였더니 밑의 .bottom.banner의 내용들도 같이 아래로 밀려 내려가서
css로 어떻게 수정해야할 지 모르겠습니다 ㅜㅜ
|
수정 내용 중에 section태그에 block 클래스를 주어서 구현한 부분을 삭제하고
그리고 화면 줌을 최소로 해서 footer 밑의 공간에 공백이 들어가는데 원래 생기는 걸까요? 아니라면 어떻게 없애야 할 지 모르겠습니다
|
2 participants
📚요구사항
기본
✔체크리스트[기본]
📝체크리스트[심화]
💭궁금한 점
🔍스크린샷
🙇♀️멘토에게