[이나경] Sprint1 #35
[이나경] Sprint1 #35
Conversation
- Styled the header with a navbar and login button - Applied responsive layout for the banner section - Designed the main section with proper spacing and alignment - Added consistent font styles and colors across sections - Improved overall layout for better readability and visual appeal
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
나경님 고생 많으셨습니다~!
코드를 구조화 하시려는 노력이 너무 좋습니다 👍
Bem 방법론을 처음 알게 되고 최대한 적용해보려 노력했는데 이렇게 하는게 맞는지 궁금합니다.
->리뷰랑 같이 코멘트 드렸습니다!
제가 display:flex로 배치하는 방식이 익숙해서 아직 position:absolute나 display:block 같은 방식은 최대한 사용을 안하고 있는데 그냥 이렇게만 css를 짜도 문제가 없는건지 궁금하고, 현업에서는 주로 섞어서 사용하는지 궁금합니다.
-> 요구 사항에 잘 맞는다면 어떤 방법이든 선호하시는 방법을 사용 하시면 됩니다~! :) 현업에서도 개인차에 따라 많이 갈릴 거 같네요~! 다만, flex나 position, display는 목적이나 용도가 다르다보니 해당 개념들을 잘 익히시고 상황에 맞게 선택하실 수 있으셔야 합니다!
그리고 class랑 id 또한 class로 코드 짜는 방식이 익숙해서 주로 class만 사용했는데, 그냥 이렇게 class만 사용해도 되는지 아니면 두가지 적절히 섞어서 사용하는 것이 좋은지 궁금합니다.
-> class만 쓰셔도 괜찮습니다~ id는 유일한 요소에 접근할 때 사용되는데, 필요한 경우가 아니라면 일부러 쓰실 필요는 없습니다!
최대한 중복으로 사용할 수 있는 것들은 묶어서 하려고 노력했는데, 더 효율적으로 코드를 짤 수 있는 부분이 있다면 알려주시면 감사하겠습니다.
-> 충분히 잘하셨습니다 👍👍 이후에 유틸리티 클래스를 정의해보거나 컴포넌트 단위로 스타일을 정의해보셔도 좋을 거 같아요 :)
| @@ -0,0 +1,284 @@ | |||
| * { | |||
There was a problem hiding this comment.
공통 스타일은 파일을 따로 만들어서 관리하셔도 좋습니다 :)
|
|
||
| .header__login-button { | ||
| border-radius: 8px; | ||
| background: var(--Primary-100, #3692ff); |
There was a problem hiding this comment.
아직 변수 정의가 안되어 있는 거 같습니다~! :)
| @@ -0,0 +1,164 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="ko"> | |||
| <title>판다마켓</title> | ||
| <link | ||
| rel="stylesheet" | ||
| as="style" |
There was a problem hiding this comment.
as는 preload를 지정했을 때만 사용됩니다 :) 다시 한 번 확인해주세요!
https://developer.mozilla.org/ko/docs/Web/HTML/Element/link#%ED%8A%B9%EC%84%B1
| <li> | ||
| <a | ||
| href="https://www.facebook.com" | ||
| class="footer__icon footer__icon--facebook" |
There was a problem hiding this comment.
백그라운드 이미지의 경우 시각적인 역할만 하게 됩니다! 접근성을 위해 alt랑 같이 img를 쓰시거나 aria-label을 추가로 붙여주시면 좋아요~!
| margin-top: 12px; | ||
| } | ||
|
|
||
| .align-right { |
| align-items: flex-end; | ||
| } | ||
|
|
||
| .banner__container--bottom { |
There was a problem hiding this comment.
modifier의 경우 상태나 변형을 나타내는데, bottom은 위치 혹은 요소를 나타내는 거 같아 부적절한 거 같습니다~! 🤔
.banner__container--spaced, .banner__container-bottom
등이 될 수도 있겠네요~
There was a problem hiding this comment.
Bem 방법론을 처음 알게 되고 최대한 적용해보려 노력했는데 이렇게 하는게 맞는지 궁금합니다.
-> 질문 주신 거 추가로 남겨드리자면, 전반적으로 잘 적용하고 계십니다~! 👍 👍 BEM의 경우 css를 구조적으로 나누고자 하지만, 사실 보는 관점에 따라 조금씩 달라질 수 있기 때문에 100% 정답은 찾기 힘들어요! 제가 위에 달아드린 것도 의견일뿐 정답은 아닙니다! 충분히 자신감 가지셔도 될 거 같아요~
2 participants
요구사항
UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
기본
심화
주요 변경사항
스크린샷
멘토에게