Conversation
| @@ -0,0 +1,122 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
There was a problem hiding this comment.
lang 속성에는 알맞은 언어를 넣어주세요~!
| <header> | ||
| <div class="header-box"> | ||
| <a href="/index.html"> | ||
| <img class="logo" src="svgs/logo.svg" alt="logo" /> |
There was a problem hiding this comment.
img를 사용하실 때는 width, height 값을 추가해주어야 합니다.
브라우저 렌더링 시 레이아웃의 크기를 미리 계산할 수 있어서 성능에도 유리합니다.
웹페이지 성능 측정 지표인 CLS와도 관련 있으니 참고해주세요~!
| <a href="/index.html"> | ||
| <img class="logo" src="svgs/logo.svg" alt="logo" /> | ||
| </a> | ||
| <a href="signin.html"> |
There was a problem hiding this comment.
a 태그 하나로도 로그인 버튼은 구현할 수 있을 것 같아요. 태그를 어떻게 하면 최소화할 수 있을지 고민해보시면 좋을 것 같습니다!
| <main> | ||
| <section class="big-sec"> | ||
| <div class="l-container"> | ||
| <span class="big-title black"> |
There was a problem hiding this comment.
span태그보다 좀 더 의미 있는 태그를 사용해보시는게 어떨까요?
디자인 가이드를 보시고 페이지의 heading 구조를 먼저 고민해보시는 것을 추천드립니다!
| 쉽게 저장하고 관리해 보세요 | ||
| </span> | ||
| <a href="signup.html"> | ||
| <div class="button white" style="width: 350px">링크 추가하기</div> |
| -webkit-text-fill-color: transparent; | ||
| } | ||
| footer { | ||
| padding: 120px 0 0; |
There was a problem hiding this comment.
굳이 축약형으로 작성하지 않고 상단 부분만 값을 줘서 작성할 수 있을 것 같아요~!
| .footer-box { | ||
| padding: 32px 104px 64px; | ||
| background-color: #111322; | ||
| display: flex; |
There was a problem hiding this comment.
flex-diretion은 기본적으로 row를 갖기 때문에 따로 선언하지 않으신 점 잘하셨습니다!
속성의 기본값이 무엇인지 알고 필요한 경우에만 작성해주시는 습관을 들이시면 좋아요!
| } | ||
| .social { | ||
| display: flex; | ||
| gap: 12px; |
There was a problem hiding this comment.
무조건 축약형을 쓰기 보다는 필요한 값만 사용하는 것이 유지보수에 도움이 된답니다!
gap 속성이 어떤 속성의 축약형인지 알아보시면 좋을 것 같아요!
| color: #9fa6b2; | ||
| } | ||
| .signin-but { | ||
| margin: 30px 0 32px; |
There was a problem hiding this comment.
margin 병합은 불가피한 상황이 아니면 피하시는 것이 좋습니다.
margin을 사용할 때는 가급적 한 방향으로 작성하면 불필요한 margin 병합을 피할 수 있으니 참고해주세요!
| .signin-form input:focus { | ||
| border: solid 1px #6d6afe; | ||
| } | ||
| .password { |
There was a problem hiding this comment.
패스워드가 이렇게 긴 경우는 없겠지만 버튼이 있는 영역까지는 padding으로 텍스트가 가리지 않도록 처리하는 것이 좋겠죠?
이렇게 텍스트 가 들어가는 경우에는 긴 텍스트를 넣어보시면 예외 케이스를 미리 대응할 수 있답니다!
전체적인 피드백 사항
질문 답변
성재님 작업하신 것 기준으로 말씀드릴게요. .s-container {
width: 1100px;
margin: 0 auto;
}width값을 지정하면 margin: 0 auto; 속성으로 중앙에 위치시킬 수 있다는 점을 이용해서 좌우에 불필요한 padding을 크게 줄 필요가 없게 됩니다. 찌그러지지 않게 한다는 것은 브라우저의 너비에 따라 계속 요소의 너비도 줄어들지 않도록 너비를 고정(width)해주거나 최소 너비(min-width)를 지정해주어야 한다는 점을 기억해주시면 브라우저 너비에 따라 대응하실 수 있을 거에요. |
요구사항
기본
심화
주요 변경사항
스크린샷
https://sjae1.netlify.app/
멘토에게