Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
airman5573
reviewed
Mar 17, 2024
There was a problem hiding this comment.
안녕하세요 승현님, 미션 진행하느라 수고하셨습니다.
전반적으로 코드가 잘 짜여져있네요 👍
QnA
중간에 content 부분의 height를 넣었더니 기존의 body와 html을 넘어가서 footer부분이 maincontent보다 올라가는 상황이 있었는데 어쩌다 보니 해결이 되었습니다. body나 html이라는 태그는 원래 content의 크기를 따라가는 auto 상태로 생각하고 있었는데 아니였던 것 같습니다. 어떤 질문으로 찾아야 할지가 너무 애매해서 멘토님께 질문 드려요..
- body, html은 내부 요소의 높이를 따라서 그 높이가 지정됩니다. 왠지 position (absolute, relative) 관련 이슈가 아니었을까 싶네요.
문제상황을 재현해주시면 살펴보겠습니다!
제 코드에서는 판다 그림 처리를 position으로 가운데에서 오른쪽으로 밀려있는 상태를 구현했는데 어떤 방법으로 하면 더 좋을지 궁금합니다.
- flexbox를 활용하시면 구현 가능할것 같습니다 :D
CSS를 작성하는 순서가 궁금합니다. 최대한 큰 구조 부터 먼저 짠 후 각 구조에 해당하는 세세한 부분을 짜는 식으로 작성해왔는데 어떻게 하면 효율적일지 궁금합니다.
| <a href="/" class="link mainLogo"><img src="./image/판다마켓.jpg" alt="Panda Market Logo"></a> | ||
| </div> | ||
| <div class="loginContainer"> | ||
| <a href="/signin"><button class="blueButton" type="button">로그인</button></a> |
There was a problem hiding this comment.
button의 타입을 button으로 잘 설정해 주셨군요 👍
| </div> | ||
| </figure> | ||
| <figure> | ||
| <div class="content reverse"> |
There was a problem hiding this comment.
content와 reverse를 조합하셔서 코드 중복을 줄이셨군요 👍
| <a href="/faq" class="link">FAQ</a> | ||
| </div> | ||
|
|
||
| <nav class="footerContent"> |
There was a problem hiding this comment.
semantic tag를 잘 활용하셨네요 👍
| @@ -0,0 +1,202 @@ | |||
| *{ | |||
| box-sizing: border-box; | |||
There was a problem hiding this comment.
공통으로 border-box를 지정해주셨군요 👍
| } | ||
|
|
||
| header { | ||
| position: fixed; |
There was a problem hiding this comment.
fixed로 스크롤시 헤더가 따라오도록 하셨네요 👍
| cursor: pointer; | ||
| } | ||
|
|
||
| .blueButton:hover{ |
| } | ||
|
|
||
| #mainContent figure { | ||
| display: grid; |
|
|
||
| #mainContent { | ||
| width: 1200px; | ||
| margin-inline: auto; |
There was a problem hiding this comment.
wow margin-inline을 사용해주셨네요 👍
There was a problem hiding this comment.
계속 혼자 해와서 코드리뷰라는 걸 처음 경험해보는데 눈물나네요 하핳.. 좋은 말씀 감사합니다. CSS 관련해서는 늘 고민이 있었는데 제가 어려운 길로 가고 있었던 거였네요. 추천해주신 영상 보고 구조에 대한 고민을 조금 더 해봐야할 것 같습니다. 꼼꼼히 봐주셔서 감사합니다.
airman5573
merged commit 235a573
into
codeit-bootcamp-frontend:part1-이승현
1 check passed
codefug
pushed a commit
to codefug/6-Sprint-Mission
that referenced
this pull request
Mar 27, 2024
…-sprint1 [이승현] Sprint1
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
심화
주요 변경사항
스크린샷
header와 topContent 모습
footer와 bottomContent 모습
멘토에게
중간에 content 부분의 height를 넣었더니 기존의 body와 html을 넘어가서 footer부분이 maincontent보다 올라가는 상황이 있었는데 어쩌다 보니 해결이 되었습니다. body나 html이라는 태그는 원래 content의 크기를 따라가는 auto 상태로 생각하고 있었는데 아니였던 것 같습니다. 어떤 질문으로 찾아야 할지가 너무 애매해서 멘토님께 질문 드려요..
제 코드에서는 판다 그림 처리를 position으로 가운데에서 오른쪽으로 밀려있는 상태를 구현했는데 어떤 방법으로 하면 더 좋을지 궁금합니다.
CSS를 작성하는 순서가 궁금합니다. 최대한 큰 구조 부터 먼저 짠 후 각 구조에 해당하는 세세한 부분을 짜는 식으로 작성해왔는데 어떻게 하면 효율적일지 궁금합니다.