Conversation
There was a problem hiding this comment.
기대 이상 코드푸시인데요?
너무 잘 작성해주셨고, 구조를 멘토링때 이야기했던대로 최대한 잘 나누어 정리해보고자 한 게 느껴지는 코드들이였어요!
다만 전반적으로 아직 구조 잡는게 미숙하다보니 조금 더 개선하면 훨씬 좋은 프로젝트가 나올 듯 합니다!
이에 대한 디테일한 피드백은 코드단에 남겨두었으니 참고 부탁드려요!
@hoonj170214
이야 전반적으로 너무 좋은 구조로 작성된 프로젝트네요!
조금 더 욕심내서 구조적으로 가져가본다면 금방 HTML CSS 구조에 대해서는 익숙하게 구현될 것 같아요.
리뷰 내용에 앞서 질문 사항에 대해 먼저 답변 드리면요,
�grid도 Flex도 레이아웃을 지정하기 위한 스타일 프로퍼티에요.
따라서 grid에 minmax가 있는것처럼, flex에는 shrink, basis가 있답니다.
이 요소들을 잘 활용해서 어느정도 구역을 가져갈 지 정해본다면 좋을 것 같아요!
코드 전반적으로 굉장히 잘 구조가 잡혀있어요.
이제 몇가지만 더 개선한다면 정말 좋은 코드가 될 것 같아 기대가 되네요!
아직 css 네이밍이 미숙한듯 한데요, 이에 대해서는 코드 단의 리뷰에 피드백 남겨두었으니
한번 참고해서 진행해보시면 좋겠습니다!
너무 고생 많으셨고, 추가 질문사항이 더 있으시다면 디스코드에 언제든 질문 남겨주세요!
| --gray-darker: #3e3e43; | ||
| --gray-dark: #9fa6b2; | ||
| --gray: #ccd5e3; | ||
| --gray-light: #e7effb; | ||
| --gray-lighter: #f0f6ff; |
There was a problem hiding this comment.
~~er 형태의 스타일 variant도 좋지만
디자이너가 갑자기 darker와 dark사이에 색 하나 더 추가할게요~ 하면 이거 네이밍 뭐라할지 골떄리잖아요 ㅋㅋ
그래서 실무에서는 gray-### 와 같이 숫자를 적용하는 형태를 많이 활용해요
한번 그렇게 변경해보는건 어떨까요?
| header { | ||
| width: 100%; | ||
| background-color: var(--gray-lighter); | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| } | ||
|
|
||
| footer { | ||
| width: 100%; | ||
| display: grid; | ||
| grid-template: auto / 1fr 1fr 1fr; | ||
| padding: 40px; | ||
| margin-top: 70px; | ||
| background-color: var(--black); | ||
| } | ||
|
|
||
| nav { | ||
| width: 100%; | ||
| max-width: 1920px; | ||
| position: fixed; | ||
| top: 0; | ||
| height: 110px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| z-index: 1; | ||
| } |
There was a problem hiding this comment.
header와 footer, 그리고 Nav가 여러 페이지에서 다양한 콤포넌트에서 활용될 수 있을텐데요
이렇게 글로벌 선언을 해두는건 위험해보입니다.
해당 스타일이 적용 될 클래스 이름을 만들어 관리해보는건 어떨까요?
| a { | ||
| text-decoration: none; | ||
| color: var(--white); | ||
| padding: 10px 30px; | ||
| } |
There was a problem hiding this comment.
a태그는 인라인 요소지요
따라서 a태그에 패딩값이 적용되기 위해서는 inline-block요소로 표현되도록 수정되어야 할 거에요
| .sign__button, | ||
| .home__button :hover { | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
- button태그를 사용한다면 기본적으로 마우스 호버 시 cursor pointer가 적용될텐데 굳이 따로 명시하신 이유가 있을까요?
:hover와 같이 수도 스타일링을 하고자 한다면 클래스이름과 붙어서 활용되어야 합니다!.home-button:hover처럼요sign_button의 호버 스타일도 하고자 했다면,sign_button:hover처럼 여기에도 호버가 붙어야 해요
| .header__content { | ||
| width: 1920px; | ||
| margin-top: 140px; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .header__content h1 { | ||
| font-size: 65px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .header__content span { | ||
| background: linear-gradient(to right, var(--primary), #ff9f9f); | ||
| background-clip: text; | ||
| color: transparent; | ||
| } | ||
|
|
||
| .header__content img { | ||
| position: relative; | ||
| top: 10px; | ||
| } | ||
|
|
||
| .header__content a { | ||
| margin-bottom: 20px; | ||
| background: var(--primary-gradient); | ||
| border-radius: 8px; | ||
| font-size: 20px; | ||
| font-weight: 600; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
여기서 Header가 무엇일까요?
UI 개발에서 보통 페이지 레벨의 헤더라고 칭함은 GNB 또는 최 상단에 있는 네비게이션 바를 칭합니다.
만약 hero섹션을 뜻한거라면 네이밍이 변경되어야 할 것 같아요.
There was a problem hiding this comment.
또한 이 구조를 잡아본다면 다음과 같이 정리를 해볼 수 있겠네요!
| #email :focus, | ||
| #password :focus { | ||
| border-color: var(--primary); | ||
| } | ||
|
|
||
| #submit { | ||
| color: var(--white); | ||
| } |
There was a problem hiding this comment.
id가 선언될 필요는 없어보입니다!
input의 타입을 선택할 수 있는데요
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email
요 링크를 참고해 한번 해보면 어떨까요?
| .social-login { | ||
| display: flex; | ||
| } | ||
|
|
||
| .social-login__button { | ||
| padding: 5px; | ||
| border-radius: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-right: 5px; | ||
| box-shadow: 1px 2px 2px var(--gray); | ||
| } | ||
|
|
||
| .google { | ||
| background-color: var(--white); | ||
| } | ||
|
|
||
| .kakao { | ||
| background-color: #f5e14b; | ||
| } |
There was a problem hiding this comment.
로그인 폼 구조도 이런식으로 활용해보면 어떨까요?
/* Block */
.login-button {
...
}
/* pseudo-classes */
.login-button:hover {
...
}
.login-button:disabled {
...
}| <input | ||
| class="sign__button" | ||
| id="submit" | ||
| type="submit" | ||
| value="로그인" | ||
| /> |
There was a problem hiding this comment.
특별한 이유가 없다면 폼 제출 목적으로는 Input보다 버튼을 활용하는게 더 좋아보여요!
| <a class="goto__sign" href="../signin/index.html">로그인 하기</a> | ||
| </div> | ||
| </header> | ||
| <main class="form__container"> |
There was a problem hiding this comment.
main이 폼 컨테이너로써 동작하기보단,
form 자체가 폼 컨테이너인게 더 맞지 않을까 싶기는 합니다!
구조를 한번 생각해보면 좋을것 같아요!
| <label for="email">이메일</label> | ||
| <input | ||
| id="email" | ||
| type="email" | ||
| name="email" | ||
| placeholder="이메일을 입력해주세요." | ||
| required | ||
| /> |
There was a problem hiding this comment.
각 라벨과 input요소를 하나의 div그룹으로 묶어두면 이후에 관리하기가 수월할거에요!
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게