Conversation
| <div class="hi"> | ||
| <div class="wrap"> | ||
| <img src="logo.svg"> | ||
| <button class="login_button"><span class="login_font">로그인</span></button> |
There was a problem hiding this comment.
button태그를 사용할 때는 기본적으로 type 속성을 작성해야합니다. 용도에 맞는 type을 찾아 지정해주세요! 참고
| <header> | ||
| <div class="hi"> | ||
| <div class="wrap"> | ||
| <img src="logo.svg"> |
There was a problem hiding this comment.
img 태그의 alt 속성에 의미 있는 텍스트를 넣어주세요!
스크린 리더기에 읽히는 것을 고려하여 작성해주시면 네이밍하시는데 도움이 되실 거에요.
| <header> | ||
| <div class="hi"> | ||
| <div class="wrap"> | ||
| <img src="logo.svg"> |
There was a problem hiding this comment.
img를 사용하실 때는 width, height 값을 추가해주어야 합니다.
브라우저 렌더링 시 레이아웃의 크기를 미리 계산할 수 있어서 성능에도 유리합니다.
| <main> | ||
| <div class="main_title"><span class="colorful1">세상의 모든 정보</span>를<br>쉽게 저장하고 관리해 보세요</div> | ||
| <button class="link_button"><span class="link_font">랑크 추가하기</span></button> | ||
| <div class="main_box"> |
There was a problem hiding this comment.
main 박스 직접 구현하시느라 시간 많이 소요하셨을 것 같네요!
직접 구현하시면서 고민하는 것도 도움이 되셨을 거에요.
요런 부분은 피그마에 있는 이미지 그대로 사용하시면 되니 다음 작업부터는 참고해주세요!
(이미지로 교체 해주시면 될 것 같습니다!)
| <ol class="stations"> | ||
| <li class="station"> | ||
| <img src=""> | ||
| <img class="star" src="star.svg"> |
There was a problem hiding this comment.
svg, png를 각각 어떤 상황에서 사용하면 좋을 고민해 보시면 좋을 것 같아요!
보통 svg는 css를 사용해서 크기나 색상을 변경하기 쉬우니 아이콘이나 로고 같은 부분에서 많이 사용합니다.
색상을 변경할 수 있으니 다크모드를 대응할 때 이미지를 교체하지 않고도 색상만 변경해서 대응할 수 있겠죠? 참고
| .stations { | ||
| display: grid; | ||
| grid-template: 320px 320px / repeat(3, 320px); | ||
| gap: 36px; |
There was a problem hiding this comment.
무조건 축약형을 쓰기 보다는 필요한 값만 사용하는 것이 유지보수에 도움이 된답니다!
gap 속성이 어떤 속성의 축약형인지 알아보시면 좋을 것 같아요!
| gap: 8px; | ||
| } | ||
|
|
||
| .hi { |
There was a problem hiding this comment.
hi 보다는 좀 더 의미있는 클래스명이 좋을 것 같습니다~! (e.g. header_wrap)
| width: 350px; | ||
| padding: 16px 20px; | ||
| justify-content: center; | ||
| align-items: center; |
There was a problem hiding this comment.
padding으로 높이를 잡았기 때문에 align_items는 없어도 상관 없을 것 같아요~!
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| padding: 120px 461px 50px 461px; |
There was a problem hiding this comment.
padding의 좌우가 같다면 아래와 같이 축약형으로 작성할 수 있습니다!
padding: 120px 461px 50px;
| line-height: 150%; | ||
| } | ||
|
|
||
| .content2_img { |
There was a problem hiding this comment.
이 부분은 굳이 absolute로 이미지의 위치를 잡지 않아도 될 것 같습니다!
전체적인 피드백
|
| <div class="hi"> | ||
| <div class="wrap"> | ||
| <img src="logo.svg"> | ||
| <button class="login_button"><span class="login_font">로그인</span></button> |
There was a problem hiding this comment.
button태그와 a태그의 차이점에 대해서 알고 계실까요?
button 태그는 페이지 이동이 없는 단순 이벤트 처리를 위한 태그이고 a태그는 페이지 이동이 있는 링크 역할을 하고 있습니다.
어떤 태그가 적절할지 고민하여 수정해주세요!
요구사항
기본
PC사이즈만 고려해 주어진 디자인을 구현했나요?
HTML, CSS 파일을 Netlify로 배포했나요? (참고: https://www.codeit.kr/learn/5309)
랜딩 페이지의 url path는 루트(‘/’)로 설정했나요?
title은 Linkbrary로 설정했나요?
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 했나요?
화면의 너비가 1920px 보다 작아질 때, “Linkbrary” 로고의 왼쪽 여백 200px “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 했나요?
Linkbrary 아이콘은 클릭 시 루트 페이지(‘/’)로 이동하나요?
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 cursor: pointer를 설정했나요?
“로그인”은 클릭 시 로그인 페이지(‘/signin’)로 이동하나요?
“링크 추가하기”는 클릭 시 회원가입(‘/signup’)로 이동하나요?
화면의 너비가 1920px 이상이면 내부에 있는 요소간 동일한 간격을 유지하며 가운데 정렬해야 합니다.
화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2023”의 왼쪽 여백 104px과 SNS 아이콘들의 오른쪽 여백 104px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다.
“Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동하나요?
페이스북, 트위터, 유튜브, 인스타그램 아이콘은 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동 하나요?
아래로 스크롤 해도 “Linkbrary” 로고와 “로그인” 버튼이 있는 상단 네비게이션 바(Global Navigation Bar)영역이 최상단에 고정되게 했나요?
Linkbrary 로고 클릭시 루트 페이지(“/”)로 이동하나요?
로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일한가요?
input 요소에 focus in 일 때, 테두리 색상이 파랑색인가요?
input 요소에 focus out 일 때, 테두리 색상이 회색인가요?
SNS 아이콘들은 클릭시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동하나요?
“회원 가입하기”는 클릭시 “/signup” 페이지로 이동하나요?
“로그인 하기”는 클릭시 “/signin” 페이지로 이동하나요?
심화
사용자의 브라우저 font-size가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정했나요?
palette에 있는 color값들을 css 변수로 등록하고 사용했나요?
비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가했나요?
주요 변경사항
스크린샷
멘토에게