Conversation
|
수고 하셨습니다 한샘님 ! 위클리 미션 하시느라 수고 많으셨습니다 ! |
commit message가 중구난방일 때commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
| .text1 { | ||
| font-family: pretendard; | ||
| font-weight: 700; | ||
| font-size: 18px; | ||
| line-height: 25.2px; | ||
| color: #3692ff; | ||
| margin-bottom: 12px; | ||
| } | ||
| .text2 { | ||
| font-family: pretendard; | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| line-height: 56px; | ||
| letter-spacing: 2%; | ||
| color: #374151; | ||
| margin-bottom: 24px; | ||
| } | ||
| .text3 { | ||
| font-family: pretendard; | ||
| font-weight: 500; | ||
| font-size: 24px; | ||
| line-height: 28.8px; | ||
| letter-spacing: 8%; | ||
| color: #374151; | ||
| } |
There was a problem hiding this comment.
class/id를 단순히 숫자를 열거하는 것보다 어떤 "목적"인지 작성하는게 어떨까요?
다음은 *BEM 컨벤션을 따른 목적을 내포한 네이밍 예시입니다:
| .text1 { | |
| font-family: pretendard; | |
| font-weight: 700; | |
| font-size: 18px; | |
| line-height: 25.2px; | |
| color: #3692ff; | |
| margin-bottom: 12px; | |
| } | |
| .text2 { | |
| font-family: pretendard; | |
| font-weight: 700; | |
| font-size: 40px; | |
| line-height: 56px; | |
| letter-spacing: 2%; | |
| color: #374151; | |
| margin-bottom: 24px; | |
| } | |
| .text3 { | |
| font-family: pretendard; | |
| font-weight: 500; | |
| font-size: 24px; | |
| line-height: 28.8px; | |
| letter-spacing: 8%; | |
| color: #374151; | |
| } | |
| <section class="landing-section__image--left"> |
만약, 1, 2와 같은 순서가 숫자로 들어가야 한다거나 디자인을 보았을 때 직관적으로 재사용 가능한 패턴들로 보이는데 각자 다른 고유한 스타일이 들어가야한다면, 스타일 구성이 잘못되었는지도 확인해보면 좋습니다.
BEM: CSS 클래스/아이디 네이밍 컨벤션 중 하나예요. 더 알아보기
| .section1, | ||
| .section2, | ||
| .section3 { | ||
| display: flex; | ||
| justify-content: left; | ||
| align-items: center; | ||
| gap: 64px; | ||
| height: 720px; | ||
| } | ||
| .banner_top .text_box, | ||
| .banner_bottom .text_box { | ||
| position: relative; | ||
| top: -170px; | ||
| left: 40px; | ||
| } |
| font-family: pretendard; | ||
| font-weight: 400; | ||
| font-size: 16px; | ||
| line-height: 19.09px; |
There was a problem hiding this comment.
헙.. 혹시 어쩌다 19.09px이 되었을까요..?
.09 단위까지 가게 될 일은 없을 것 같아요 😅
| <div class="text_box"> | ||
| <div class="text1">일상의 모든 물건을<br> | ||
| 거래해 보세요</div> | ||
| <button class="watch button" onclick="location.href='/items'">구경하러 가기</button> |
There was a problem hiding this comment.
<a> 태그로 작성해보시는게 어떨까요?
단순 페이지 이동의 경우 <a />가 더욱 목적성에 맞습니다 !
버튼일 경우 브라우저가 "링크 이동"으로 인식하지 않기에, 접근성이 떨어집니다 ! 😊
만약, 새 창으로 띄우고 싶으셨던거라면 <a href="" target="_blank">라고 작성하시는게 어떨까요?
| </a> | ||
| </div> | ||
| <div class="footer_nav_right"> | ||
| <a href="https://www.facebook.com/" target="_blank"><img src="images/ic_facebook.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.
| @@ -0,0 +1,89 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="kr"> | |||
There was a problem hiding this comment.
lang="ko" 속성을 사용해보는건 어떨까요?
| <html lang="kr"> | |
| <html lang="ko"> |
lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊
lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기
SEO 마케팅 관련 기사
tl;dr
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
요구사항
스프린트 미션 1 시안 확인
아래 링크를 통해 강의 학습 후 만들어봐야 할 실습 과제 디자인을 확인해 보세요.
스프린트 미션 1 Figma 디자인 확인하러 바로가기
기본 요구사항
UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
체크리스트 [기본]
체크리스트 [심화]
주요 변경사항
스크린샷
멘토에게