Conversation
|
제대로 된건지 잘 모르겠네요 ㅜㅜ |
|
수고하셨습니다 광조님 !! |
commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
| @@ -0,0 +1 @@ | |||
| https://frabjous-palmier-b2136e.netlify.app | |||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <!-- 페이지 제목 (SEO에 매우 중요) --> | ||
| <title>판다마켓 - 믿을 수 있는 온라인 쇼핑몰</title> |
There was a problem hiding this comment.
훌륭합니다 ! 페이지 제목도 빠트리지 않고 꼼꼼히 작성하셨군요 👍👍
| <meta name="twitter:card" content="summary_large_image" /> | ||
| <meta | ||
| name="twitter:title" | ||
| content="판다마켓 - 믿을 수 있는 온라인 쇼핑몰" | ||
| /> | ||
| <meta | ||
| name="twitter:description" | ||
| content="판다마켓에서 다양한 상품을 만나보세요!" | ||
| /> | ||
| <meta | ||
| name="twitter:image" | ||
| content="https://fe-sprint-mission-2.vercel.app/images/logo/logo.png" | ||
| /> |
There was a problem hiding this comment.
와우. 깔끔한 메타 태그 처리네요.
트위터까지 처리하셨군요?
| <a href="/" class="logo-button" | ||
| ><img | ||
| src="https://fe-sprint-mission-2.vercel.app/images/logo/logo.svg" | ||
| alt="판다마켓 홈" |
There was a problem hiding this comment.
alt는 이미지를 설명하듯이 작성하는게 어떨까요?
alt는 스크린 리더 사용자에 대한 보조 텍스트가 될 수 있으므로 "어떠한 이미지 인지"를 작성해주는 것이 좋아요 ! 예를 들어서 판다마켓 로고 와 같은 값은 어떨까요?
alt의 목적
- 인터넷 연결이 끊겼을 때 대체되는 이미지
- 스크린 리더 사용자를 위한 대체 텍스트
- 이미지를 볼 수 없는 환경에서 이미지를 대체하기 위한 텍스트
등 목적을 알게 된다면 alt를 어떻게 사용하시면 될지 알 수 있을 것 같아요.
다음은 하버드 에듀케이션에서 제안하는 alt 규칙입니다:
tl;dr
- Write Good Alt Text
- Add alt text all non-decorative images.
- Keep it short and descriptive, like a tweet.
- Don’t include “image of” or “photo of”.
- Leave alt text blank if the image is purely decorative
- It's not necessary to add text in the Title field.
| </header> | ||
|
|
||
| <main> | ||
| <section class="first-section"> |
| </div> | ||
| </section> | ||
| </main> | ||
| <footer> |
| </main> | ||
| <footer> | ||
| <div class="footer-menu"> | ||
| <div style="height: 19px; width: 112px">@codeit - 2024</div> |
There was a problem hiding this comment.
여기는 style을 태그에 직접 작성하셨군요?
혹시 class 선택자를 사용하지 않은 이유가 있나요 ?
|
|
||
| /* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmainㅡㅡㅡㅡㅡㅡㅡㅡㅡ */ | ||
| main { | ||
| width: 100vw; |
There was a problem hiding this comment.
혹시 100vw가 필요할까요?
| width: 100vw; |
어차피 main은 dsiplay:block이므로 width는 자동으로 100%가 될 것으로 예상됩니다 !
| /* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡmainㅡㅡㅡㅡㅡㅡㅡㅡㅡ */ | ||
| main { | ||
| width: 100vw; | ||
| margin-top: 70px; |
There was a problem hiding this comment.
혹시 header 때문에 여백을 준걸까요?
| margin-top: 70px; |
만약 그렇다면 header를 fixed가 아닌 sticky로 변경해볼 수 있습니다 !
이렇게되면 header가 변경이 있을 때 main을 height를 변경해야 하는 번거로움을 줄일 수 있겠죠 ?
| width: 1920px; | ||
| height: 160px; | ||
|
|
||
| background-color: #111827; |
There was a problem hiding this comment.
컬러 팔레트를 사용해보시는건 어떨까요?
컬러는 따로 선언해두시고 재사용 해보시는건 어떨까요?
컬러 팔레트는 color.css 혹은 global.css에서 정의하는게 일반적입니다 !
컬러 팔레트는 다음과 같이 정의할 수 있습니다:
* {
--primary: #6D6AFE;
--red: #FF5B56;
--black: #111322;
--white: #FFFFFF;
--gray-100: #3E3E43;
--gray-200: #9FA6B2;
--gray-300: #CCD5E3;
--gray-400: #E7EFFB;
--gray-500: #F0F6FF;
}
|
굳굳 ! 훌륭합니다 광조님. 멋지게 과제를 수행하셨네요 ㅎㅎㅎ |
요구사항
기본
랜딩 페이지의 url path는 루트('/')로 설정합니다.
title은 "판다마켓"로 설정합니다.
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
"판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
'로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
"구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
"Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
주요 변경사항
스크린샷
멘토에게