Conversation
|
수고 하셨습니다 서영님 ! 위클리 미션 하시느라 수고 많으셨습니다 ! |
|
Q. 상단과 하단에 있는 판다의 위치가 가로 넓이가 1920px보다 작아지거나 커져도 위치를 고정할 수 법이 궁금합니다. 또한 하단의 경우는 확실히 어렵네요 ! 저였다면 부모 엘리먼트에 |
commit message가 중구난방일 때commit 단위를 더욱 자주, 작게 해보시는건 어떠실까요?git을 다룰 때 commit은 "언제 해야 하는가"를 생각해보신 적 있으신가요?
그럼 커밋을 언제 해야 할까요?저는 다음과 같은 룰을 지키며 커밋을 하는걸 권장 드립니다:
관련하여 읽으시면 좋은 아티클을 추천드릴게요:tl;dr관련 변경 사항 커밋 자주 커밋 미완성 작업을 커밋하지 마십시오 커밋하기 전에 코드를 테스트하세요 또한 깃 커밋 메시지 컨벤션도 함께 읽어보세요:tl;dr:커밋 메시지 형식 type: Subject
body
footer기본적으로 3가지 영역(제목, 본문, 꼬리말)으로 나누어졌다. 메시지 type은 아래와 같이 분류된다. 아래와 같이 소문자로 작성한다. feat : 새로운 기능 추가 |
| @@ -0,0 +1,122 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
lang="ko" 속성을 사용해보는건 어떨까요?
| <html lang="en"> | |
| <html lang="ko"> |
lang 속성은 Search bot이 탐색할 때 해당 문서가 어떠한 언어로 작성되어있는지 파악할 때 사용될 수 있습니다.
따라서 적절한 lang을 설정하시는걸 권장드립니다. 😊
lang의 기본 값은 '알 수 없음'입니다. 따라서 적절한 값의 lang 속성을 꼭 꼭 ! 설정해주시는걸 권장합니다 !
lang에 대해서 자세히 보기
SEO 마케팅 관련 기사
tl;dr
lang 속성은 다음을 포함하여 다양한 목적으로 사용됩니다.
- 검색 엔진은 lang 속성을 사용하여 올바른 언어로 웹 페이지를 색인화합니다. 이를 통해 특정 언어로 검색하는 사용자에게 더 관련성이 높은 결과를 반환할 수 있습니다.
- 화면 판독기는 lang 속성을 사용하여 언어 프로필을 전환하여 올바른 악센트와 발음을 제공합니다. 이는 시각 장애가 있는 사용자가 선호하는 언어로 웹 콘텐츠에 액세스하는 데 도움이 됩니다.
- lang 속성을 사용하여 번역해야 하는 텍스트를 식별할 수 있습니다. 이는 다국어 웹사이트를 만들거나 사용자 생성 콘텐츠를 번역하는 데 유용할 수 있습니다.
<html> 요소 자체를 포함하여 텍스트 콘텐츠를 포함하는 모든 HTML 요소에 lang 속성을 지정해야 한다는 점에 유의하는 것이 중요합니다. 이렇게 하면 전체 웹페이지의 언어가 올바르게 식별됩니다.
원문 보기
| <main> | ||
| <!-- 1 --> | ||
| <section> | ||
| <img src="img/Img_home_01.png" href="메인 이미지1" class="main-img" /> |
There was a problem hiding this comment.
오타가 있는 것 같아요 😊
| <img src="img/Img_home_01.png" href="메인 이미지1" class="main-img" /> | |
| <img src="img/Img_home_01.png" alt="메인 이미지1" class="main-img" /> |
| <img | ||
| src="img/Img_home_top.png" | ||
| alt="상단 베너 판다 이미지" | ||
| class="home-top-img" | ||
| /> |
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.
| .home-top-btn:hover { | ||
| cursor: pointer; | ||
| } |
| .items-btn { | ||
| text-decoration: none; | ||
| color: white; | ||
| font-size: 20px; |
There was a problem hiding this comment.
font-size는 em 혹은 rem 단위를 고려해보시는 것도 좋습니다 =)
- EM은 상대적인 단위 곧, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식
- REM은 Root + em = rem도 상대적인 단위 단, 부모요소의 폰트 사이즈에 의해 자식요소의 폰트 사이즈가 결정되는 방식이 아니라 Root의 폰트 사이즈에 의해 결정되는 방식(Root란 html이라는 선택자 또는 body 선택자를 말함, body를 Root로 잡아도 되지만 일반적으로 body 보다는 더 상위 선택자인 html 선택자를 Root로 사용합니다.)
요구사항
기본
랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
title은 “판다마켓”로 설정합니다.
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
“판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
'로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
“구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
“Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
주요 변경사항
스크린샷
배포링크
https://part1-sprint1-seo02.netlify.app/
멘토에게
상단과 하단에 있는 판다의 위치가 가로 넓이가 1920px보다 작아지거나 커져도 위치를 고정할 수 법이 궁금합니다.
상단의 경우 글자와 이미지 각각 마진 left와 right을 주었고, 이 경우 브라우저 크기가 커지면 요소 간 간격이 넓어집니다.
하단의 경우 글자는 가운데에 고정하기 위해 1200px 크기의 div를 만들어 그 안에 위치시켜 브라우저 크기를 바꾸어도 고정되는 걸로 해결했습니다. (글자를 고정시키는 방법은 알 거 같아요)
그치만 여전히 판다 이미지의 위치를 고정하는 방법은 모르겠습니다ㅜㅜ
