[김치영] Sprint1 #14
[김치영] Sprint1 #14
Conversation
addiescode-sj
left a comment
addiescode-sj
left a comment
There was a problem hiding this comment.
수고하셨습니다!
주요 리뷰 포인트
- heading 위계 수정
- 접근성 향상
- 코드 중복 제거
index.html
Outdated
| @@ -0,0 +1,126 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
| <html lang="en"> | |
| <html lang="ko"> |
언어 설정을 "ko"로 변경하시면, 한국어 사용자에 맞춰 스크린리더가 사용될수있고 검색엔진에서도 페이지의 언어를 한국어 콘텐츠로 인식하게끔 만들어줄 수 있습니다. 웹 접근성을 생각했을때 스크린리더를 사용한다면 lang="en" 상태에서는 한국어 콘텐츠를 영어 발음으로 읽을 가능성이 있기때문에, 한국어 사용자를 대상으로한다면 "ko"로 변경하시는게 옳습니다 :)
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> |
There was a problem hiding this comment.
meta 태그 사용이 조금 아쉽네요!
이런식으로 title, description, image등을 활용하시면 SEO에 도움이 되고, 소셜 미디어등에 공유 링크를 생성할때도 좀 더 나은 프리뷰를 제공해줄수있어요.
<meta
name="description"
content="판다마켓 - 일상의 모든 물건을 거래하는 중고거래 플랫폼"
/>
<meta property="og:title" content="판다마켓" />
<meta
property="og:description"
content="일상의 모든 물건을 거래하는 중고거래 플랫폼"
/>
<meta property="og:image" content="/image/판다 얼굴.png" />
index.html
Outdated
| <header> | ||
| <nav> | ||
| <div class="container"> | ||
| <a class="logo" href="/"> |
There was a problem hiding this comment.
접근성 향상을 위해 관련있는 속성들에 aria-label 이나 role 속성 추가를 해볼까요?
이 아티클 참고해보시면 좋을것같습니다!
index.html
Outdated
| </h1> | ||
| <a href="/items" class="btn">구경하러 가기</a> | ||
| </div> | ||
| <img src="/image/Img_home_top.png" alt="image_landing" /> |
There was a problem hiding this comment.
접근성 향상을 위해 alt 텍스트를 더 구체적으로 사용해주세요 :)
애플 공식 웹사이트를 참고해보시면 아래와 같이 정말 구체적으로 사용해주고있습니다!
<img src="/v/macbook-air/u/images/overview/design/color/design_top_skyblue__eepkvlvjzcia_large.jpg" onload="__lp(event)" alt="스카이 블루 색상 MacBook Air를 정면에서 바라본 모습과 위에서 내려다본 모습">
index.html
Outdated
| <h1 class="header">Search</h1> | ||
| <h1 class="big"> | ||
| 구매를 원하는<br /> | ||
| 상품을 검색하세요 | ||
| </h1> | ||
| <h1 class="small"> | ||
| 구매하고 싶은 물품은 검색해서<br /> | ||
| 쉽게 찾아보세요 | ||
| </h1> |
There was a problem hiding this comment.
모두 h1태그를 사용하셨네요! 올바른 heading 위계를 사용해주세요.
예시)
<div class="content">
<h2 class="header">Hot item</h2>
<h3 class="big" id="hot-item-title">
인기 상품을<br />
확인해보세요
</h3>
<p class="small">
가장 HOT한 중고거래 물품을<br />
판다마켓에서 확인해보세요
</p>
index.html
Outdated
| <a href="/faq">FAQ</a> | ||
| </div> | ||
| <div class="icon"> | ||
| <a href="https://www.facebook.com/?locale=ko_KR" target="blank"> |
There was a problem hiding this comment.
보안을 위해 rel="noopener noreferrer" 를 추가해볼까요?
style.css
Outdated
| } | ||
|
|
||
| .btn { | ||
| background-color: #3692ff; |
There was a problem hiding this comment.
자주 사용하는 값들은 이런식으로 변수 처리해주면 중복도 줄이고 재사용성도 올라가겠죠?
예시)
:root {
/* Colors */
--color-primary: #3692ff;
--color-primary-dark: #1967d6;
--color-text: #374151;
--color-text-light: #9ca3af;
--color-background: #ffffff;
--color-background-alt: #fcfcfc;
--color-background-landing: #cfe5ff;
--color-background-footer: #111827;
--color-text-light: #f3f4f6;
--color-text-lighter: #f9fafb;
/* Typography */
--font-family-base: pretendard, sans-serif;
--font-family-heading: "ROKAFSansMedium", sans-serif;
/* Spacing */
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 64px;
--spacing-xxl: 138px;
/* Layout */
--container-max-width: 1520px;
--container-content-width: 1120px;
--container-section-width: 988px;
/* Border Radius */
--border-radius-sm: 8px;
--border-radius-lg: 40px;
}
style.css
Outdated
| @@ -0,0 +1,216 @@ | |||
| * { | |||
There was a problem hiding this comment.
이렇게 전역으로 처리해줘야하는 스타일 규칙들은 따로 용도를 명확히 구분한 파일을 만들어 관리해보면 어떨까요?
- reset.css (스타일 초기화)
- common.css (전역 스타일)
style.css
Outdated
| font-weight: normal; | ||
| font-style: normal; |
There was a problem hiding this comment.
이런건 디폴트라서 따로 명시해주지않으셔도됩니다.
CSS 초기값이 궁금하시다면 어떤 값이 초기값인지 찾아보시면서 코딩해보세요 :)
질문에 대한 답변아래의 내용을 제대로 이해한 게 맞는지 궁금합니다.화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다. 확인해보니 잘 적용하셨는데, width: 100%; /* max-width 제거하고 전체 너비 사용 */
grid-template-columns: 200px 1fr 200px; /* minmax 대신 고정 값과 1fr 사용 */ |
2 participants
요구사항
기본
심화
주요 변경사항
스크린샷
배포
https://sprint-mission-kcy.netlify.app/
멘토에게
아래의 내용을 제대로 이해한 게 맞는지 궁금합니다.