Conversation
naseungyeop
added
bug
naseungyeop
assigned naseungyeop and hoody-jellybean and unassigned hoody-jellybean and naseungyeop
There was a problem hiding this comment.
벡터 이미지로 표현할 수 있는 아이콘, 로고 이미지 등은 SVG 확장자로 사용해 주세요!
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>판다마켓</title> | ||
| <link rel="stylesheet" href="스프린트미션.css" /> |
There was a problem hiding this comment.
명확한 이유가 있는게 아니면 파일 명은 영문으로 사용해 주세요~
| <img src="Group 22.png" id="panda" /> | ||
| <a href="index.html" id="pandamarket_p" | ||
| ><p id="pandamarket">판다마켓</p></a | ||
| > |
There was a problem hiding this comment.
로고 + 로고 텍스트 모두 링크가 걸려 있어야 할 것 같네요~!
그리고 텍스트는 브라우저마다 노출 방식에 다소 차이가 있어, 로고 이미지는 SVG 이미지로 사용하시는게 나을 것 같습니다.
| <nav> | ||
| <p>일상의 모든 물건을</p> | ||
| <p>거래해보세요</p> | ||
| <div class="visit"> | ||
| <a href="/items" id="go"><span>구경하러 가기</span></a> | ||
| </div> | ||
| <img src="Img_home_top.png" id="nav_panda" /> | ||
| </nav> |
There was a problem hiding this comment.
네비게이션과 관련없는 영역에 해당 태그가 사용된 것 같네요.
| <div class="main_container1"> | ||
| <div class="item1"> | ||
| <img src="Img_home_01.png" /> | ||
| <div class="main_content1"> | ||
| <p id="blue_p">Hot item</p> | ||
| <p class="main_p">인기 상품을</p> | ||
|
|
||
| <p class="main_p">확인해 보세요</p> | ||
|
|
||
| <span id="main_span" | ||
| >가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</span | ||
| > | ||
| </div> | ||
| </div> | ||
| </div> |
There was a problem hiding this comment.
각 섹션에 <section/> 태그 사용하시고, 섹션의 타이틀 요소는 <h1> - <h6> 헤딩 태그 사용하시면 더 좋을 것 같습니다. :)
| <a href="/privacy" class="footer_link">Privacy Policy</a> | ||
| <a href="/faq" class="footer_link">FAQ</a> | ||
| <a href="https://www.facebook.com" target="_blank"> | ||
| <img src="ic_facebook (1).png" /> | ||
| </a> | ||
| <a href="https://www.twitter.com" target="_blank"> | ||
| <img src="ic_twitter.png" /> | ||
| </a> | ||
| <a href="https://www.youtube.com" target="_blank"> | ||
| <img src="ic_youtube.png" /> | ||
| </a> | ||
| <a href="https://www.instagram.com" target="_blank"> | ||
| <img src="ic_instagram.png" /> |
There was a problem hiding this comment.
이미지만 있는 버튼 또는 링크 요소는 유의미한 대체 텍스트 제공해주세요~!
| <label class="label">비밀번호</label> | ||
| <input | ||
| type="password" | ||
| class="input" | ||
| placeholder="비밀번호를 입력해주세요" | ||
| /> |
There was a problem hiding this comment.
각 필드의 브라우저가 제공하는 접근성을 충분히 활용하시려면 다음 중 하나를 선택하여 반영해 주시면 더 좋을 것 같네요~!
- input 요소를 label 요소로 감싸기
- input의 id 속성과 label의 for 속성을 연결하기
There was a problem hiding this comment.
Reset CSS 잘 적용하셨습니다! 👍
There was a problem hiding this comment.
전반적으로 시멘틱 태그를 적절하게 잘 사용하셨네요. 👍
| #a_tag { | ||
| text-decoration: none; | ||
| } | ||
| #a_tag:visited { | ||
| color: #3692ff; | ||
| } | ||
| #login_box { |
There was a problem hiding this comment.
클래스 대신 ID를 사용하신 이유가 있을까요?
ID는 해당 페이지 내 고유한 요소에 사용됩니다.
| #main_header { | ||
| display: flex; | ||
| font-weight: 700; | ||
| width: 266px; |
There was a problem hiding this comment.
너비가 고정 치수로 들어가면 반응형 대응이 어려울 것 같은데 확인 부탁드려요~
| font-weight: 700; | ||
| font-size: 18px; | ||
| line-height: 26px; | ||
| color: #1f2937; |
There was a problem hiding this comment.
색상 변수는 위클리 과제 피그마에서 컬러 디자인 토큰을 제공 중인 것으로 알고 있는데요.
CSS Custom Properties를 사용해서 변수로 적용하시면 더 좋을 것 같습니다~!
| background-color: #cfe5ff; | ||
| } | ||
| p { | ||
| font-family: pretendard; |
There was a problem hiding this comment.
font-family는 상위 요소로부터 상속 가능한 inherited property에 해당합니다.
body 태그에 기본 글꼴을 지정하셨으면, 별도로 명시하지 않아도 상속하여 사용할 수 있습니다.
|
PR 올리시고 나서 assignee가 아니라 reviewer에 태그 걸어주셔야 올리셨는지 확인 가능합니다! 참고해 주세요. |
요구사항
UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
기본
랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
title은 “판다마켓”로 설정합니다.
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
“판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
'로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
“구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
“Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요
주요 변경사항
배포
https://66b769a4a3dcf142d9b48578--chipper-gnome-555a52.netlify.app/
멘토에게