Conversation
|
스프린트 미션1 코드 리뷰 요청드립니다. |
There was a problem hiding this comment.
수영님 고생 많으셨습니다~!
html tag 활용도 너무 적절하고 스타일 정의도 굉장히 숙련도가 높으신 거 같습니다 👍
심화 요구사항에서 clamp, %, vh 등 다양한 단위를 적용해보시면 더욱 좋을 거 같습니다 :)
작업에서 공통으로 만들 수 있는 부분이 있을까요?
-> 아직은 단일 페이지라 많이 없지만, 컴포넌트 단위 (버튼, 텍스트 등)로 스타일을 정의 하거나 자주 쓰이는 유틸리티 클래스를 미리 정의해보실 수 있을 거 같네요!
ex ) .center { 가운데 정렬 스타일 }
마크업에서 부족함을 많이 느끼는데, 조언해주실 부분이 있는지
-> 어떤 부분에서 부족함을 느끼셨나요!? 충분히 잘 해주시고 계십니다! 시맨틱 태그도 잘 신경써 주셨고, html 구조도 군더더기 없고 공통 스타일 정의도 잘 해주셨습니다 :) (반응형은 지금 너무 신경 쓰지 않으셔도 괜찮습니다!)
클래스명을 지을 때, _를 사용해서 작업을 하는 편인데, 카멜 케이스를 적용하지 않아도 괜찮을까요?
-> html, css는 케밥케이스를 많이 사용하긴 하는데, 지금은 크게 상관 없습니다 :) 보통은 협업 하실 경우 팀내에서 컨벤션을 정하게 될 거에요. 맞춰서 쓰시면 됩니다! ㅎ
심화 버전 작업을 하면서 미디어 쿼리를 사용했는데, 사용하지 않고도 구현이 가능할까요?
-> %, vw, vh, clamp 등 유동적인 단위를 쓰시거나 flex등을 활용하신다면 미디어 쿼리와 관계 없이 유동적으로 크기를 조절하실 수 있습니다 :)
브라우저 사이즈에 따른 유동적인 화면 작업을 할 때(반응형 작업), 막막할 때가 많은데, 어떤 방식으로 풀어가야하는건지 궁금합니다.
-> 특별히 방법이 있다기 보다는 몇 가지 팁을 공유 드리자면,
1. mobile-first로 작은 화면을 먼저 구현
2. 레이아웃 -> 세부 요소 순서로 구현
3. 유동적인 레이아웃 ex) width 보다는 min-width나 max-width
정도 우선 있을 거 같네요! 🤔
미션 3에서 더 구체적으로 학습하실 예정입니다 :)
심화 작업을 한 부분이 많이 부족한 것 같은데, 더 좋은 방법이 있을까요?
부족한 부분이 있다면 조언 부탁드립니다.
-> 일단 모든 단위에 vw가 쓰였는데, 해당 단위는 브라우저 너비 기준이므로 너비에 따라 요소가 너무 작아지거나 너무 커질 수 있습니다. 각각 용도에 맞게 단위를 써주셔야 합니다.
모든 px 단위를 vw로 바꿔주셨는데, line-height, border-radius 등 정말 모든 속성을 반응형으로 구현하는 경우는 매우 드문 일 입니다.
심화 요구 사항의 경우 설정 값이 자유로 주어진만큼, 특정한 UI 목적을 달성하기보다는 유동적인 단위를 충분히 경험해보시라는 의도인 거 같은데, 이는 충분히 달성하신 거 같습니다!
| @@ -0,0 +1,87 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="ko"> | |||
| <body> | ||
| <header id="header" class="header"> | ||
| <div class="main_inner"> | ||
| <h1 class="logo"><a href="/"><img src="images/logo.png" alt="판다마켓"/></a></h1> |
| <header id="header" class="header"> | ||
| <div class="main_inner"> | ||
| <h1 class="logo"><a href="/"><img src="images/logo.png" alt="판다마켓"/></a></h1> | ||
| <a href="/login" class="btn-blue small48">로그인<span></span></a> |
| <div class="main_inner"> | ||
| <div class="text_box"> | ||
| <h2 class="main_text">일상의 모든 물건을<br>거래해 보세요</h2> | ||
| <a href="/items" class="btn-blue large">구경하러 가기<span></span></a> |
There was a problem hiding this comment.
앗 여기도 span tag가 들어갔군요..!?
| <section id="section2" class="section section2"> | ||
| <div class="main_inner"> | ||
| <div class="center_box"> | ||
| <img src="images/img_home_01.png" alt=""/> |
| </main> | ||
| <footer id="footer" class="footer"> | ||
| <div class="main_inner"> | ||
| <p class="copyright">©codeit - 2024</p> |
There was a problem hiding this comment.
P는 문단을 나타내기 위해 사용됩니다! 여기서는 부적절한 거 같네요!
|
|
||
| /* button */ | ||
| .btn-blue { min-width:88px; width:88px; height:48px; padding:14px 10px; background-color:#3692FF; text-align:center; border-radius:8px; line-height:20px; font-weight: 600; font-size:16px; color:#fff; box-sizing: border-box; } | ||
| .btn-blue.small48 { width:128px; height:48px; } |
There was a problem hiding this comment.
width를 정해 놓으면 내부 콘텐츠를 유연하게 대응하기 힘들 수 있습니다 :)
| @@ -0,0 +1,129 @@ | |||
| @charset "UTF-8"; | |||
| /* reset */ | |||
|
|
||
| /* 브라우저 사이즈에 따른 사이즈 조절 */ | ||
| @media (max-width: 1120px) { | ||
| .btn-blue { min-width:7.8571vw; width:7.8571vw; height:4.2857vw; padding:1.2500vw 0.8929vw; border-radius:0.7143vw; line-height:1.7857vw; font-size:1.4286vw; } |
There was a problem hiding this comment.
vw가 많이 사용되고 있는데 해당 단위에 대해 다시 한 번 고민해보시면 좋을 거 같습니다!
vw는 창의 너비를 기준으로 계산 됩니다. 과도하게 사용되면 화면 너비에 따라 부자연스럽게 사이즈가 조절됩니다 :)
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게