[박수연] Sprint 1 #44
[박수연] Sprint 1 #44
Conversation
[Fix] delete merged branch github action
|
스프리트 미션 하시느라 수고 많으셨어요. |
| :root { | ||
| /* color */ | ||
| --primary-100: #3692ff; | ||
| --primary-200: #1967d6; | ||
| --primary-300: #1251aa; | ||
|
|
||
| --error-color: #f74747; | ||
|
|
||
| --gray-900: #111827; | ||
| --gray-800: #1f2937; | ||
| --gray-700: #374151; | ||
| --gray-600: #4b5563; | ||
| --gray-500: #6b7280; | ||
| --gray-400: #9ca3af; | ||
| --gray-200: #e5e7eb; | ||
| --gray-100: #f3f4f6; | ||
| --gray-50: #f9fafb; | ||
|
|
||
| /* font */ | ||
| --font-weight-bold: 700; | ||
| --font-weight-semibold: 600; | ||
| --font-weight-medium: 500; | ||
| --font-weight-regular: 400; | ||
| } | ||
|
|
There was a problem hiding this comment.
굿굿 ! 컬러 팔레트를 정의하셨네요.
앞으로 컬러와 관련된 내용들은 재사용하여 처리될 수 있겠어요. 👍👍
There was a problem hiding this comment.
크으 global.css가 정말 유용하겠군요 !
훌륭합니다 ! 이제 서비스 전반적으로 사용되는 스타일은 global.css에 적용하면 되겠군요 ! 👍
| .btn { | ||
| display: block; | ||
| font-weight: var(--font-weight-semibold); | ||
| text-align: center; | ||
| color: var(--gray-100); | ||
| background-color: var(--primary-100); | ||
| } | ||
| .btn--large { | ||
| width: 357px; | ||
| height: 56px; | ||
| line-height: 56px; | ||
| border-radius: 40px; | ||
| } | ||
| .btn--medium { | ||
| width: 240px; | ||
| height: 48px; | ||
| line-height: 48px; | ||
| border-radius: 40px; | ||
| } | ||
| .btn--small_40 { | ||
| width: 88x; | ||
| height: 42px; | ||
| line-height: 42px; | ||
| border-radius: 8px; | ||
| } | ||
| .btn--small_48 { | ||
| width: 88px; | ||
| height: 48px; | ||
| line-height: 48px; | ||
| border-radius: 8px; | ||
| } | ||
| .btn--white { | ||
| background-color: var(--gray-50); | ||
| border: 1px solid var(--primary-100); | ||
| } |
There was a problem hiding this comment.
크으 깔끔하고 재사용하기 좋은 클래스입니다 ! 👍👍
There was a problem hiding this comment.
벡터 이미지는 svg로 저장하시는걸 추천드려요 !
이하 MDN
SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는XML기반의 마크업 언어입니다.SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다
이미지 파일은 최소 단위가 픽셀로 되어있으며 확대했을 때 이미지가 깨질 수 있어요 !
피그마에서 export하실 때에 svg로 export할 수 있습니다 😊
There was a problem hiding this comment.
또한, 현재 크기 별로 이미지를 저장하셨습니다.
사용되지 않는 이미지들은 제거하시는게 좋을 것 같아요 ㅎㅎㅎ
There was a problem hiding this comment.
해당 아이콘들도 svg로 사용하시는걸 권장드립니다 ! 👍
There was a problem hiding this comment.
해당 섹션의 이미지들은 필요 없을 것 같아요 !
해당 섹션의 이미지들은 html과 css로 만드는 것이 미션의 목표입니다 !
There was a problem hiding this comment.
크으 reset.css까지 적용하셨군요 !
이제 수연님의 제품은 대부분의 디바이스와 브라우저에서 같은 UI를 보여줄 수 있겠군요 ! 👍
| <section class="sec1"> | ||
| <div class="sec__wrapper"> | ||
| <div class="img_box"></div> | ||
| <div class="text_box"> | ||
| <p class="tag">Hot item</p> | ||
| <p class="title oneline">인기 상품을 확인해 보세요</p> | ||
| <p class="title twolines">인기 상품을</p> | ||
| <p class="title twolines">확인해 보세요</p> | ||
| <p class="text"> | ||
| 가장 HOT한 중고거래 물품을<br /> | ||
| 판다 마켓에서 확인해 보세요 | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </section> |
There was a problem hiding this comment.
(생각해보기)해당 섹션 내 모든 내용이 "문구"로 되어있군요 !
현재:
단락: 인기 상품을 확인해보세요.
단락: 인기 상품을
단락: 확인해 보세요
단락: 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
라는 의미를 가지고 있어요.
(제안) 다음과 같은 의미를 가질 수 있도록 내용을 변경해보시는건 어떨까요?
제목2: 인기 상품을 확인해 보세요
단락: 가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요
|
수고 하셨습니다 수연님 ! 즐겁게 코드리뷰 하였습니다 ! 다음 미션도 기대가 됩니다 ! 👍 |
4 participants
요구사항
기본
심화
멘토에게