Conversation
There was a problem hiding this comment.
파일명은 어떤 페이지를 나타내는지 알 수 있도록 명확하게 작성해 주세요!
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>판다마켓</title> | ||
| <link rel="stylesheet" href="default.css"> |
There was a problem hiding this comment.
css 파일도, 어떤 html 파일과 매칭되는지 알 수 있게 명확히 네이밍해주시는 게 좋습니다.
| <div> | ||
| <h1> | ||
| 믿을 수 있는<br> | ||
| 판다 마켓 중고 거래 | ||
| </h1> | ||
| </div> |
There was a problem hiding this comment.
- h1, h2 태그와 같은 heading 태그를 사용할 땐 권장되는 사용 방식들이 있습니다. 이미 동일 문서에 h1 태그를 사용했다면, 이후에는 사용을 지양해야 합니다. 참고해 주세요!
- 비어있는 div로 한 depth 더 감싸신 이유가 있을까요?
| .canClick:hover{ | ||
| cursor: pointer; | ||
| } |
| .sect1, .sect2{ | ||
| background: #CFE5FF; | ||
| } |
There was a problem hiding this comment.
동일한 스타일을 가지는 요소라면 class를 분리할 필요 없이 범용적인 이름의 class 하나만 생성해 적용해주시면 됩니다.
| margin: 0; | ||
| } | ||
| header{ | ||
| max-width: 1,920px; |
| } | ||
| .homeBottom{ | ||
| width: 1,110px; | ||
| height: 397px; | ||
| position:absolute; | ||
| top: 143px; | ||
| left: 405px; | ||
| gap: 69px; | ||
| opacity: 0px; | ||
| align-items: center; | ||
| display: flex; | ||
| } | ||
| .homeBottom > div{ | ||
| width: 295px; | ||
| height: 172px; | ||
| padding: 0px 0px 60px 0px; | ||
| gap: 5px; | ||
| opacity: 0px; | ||
| } | ||
| .homeBottom > div >h1{ | ||
| font-family: Pretendard; | ||
| font-size: 32px; | ||
| font-weight: 900; | ||
| line-height: 56px; | ||
| text-align: left; | ||
| color: #374151; | ||
| } |
There was a problem hiding this comment.
새로운 선택자 간에는 가독성을 위해 한 줄씩 띄워주시면 좋습니다.
| top: 143px; | ||
| left: 405px; | ||
| gap: 69px; | ||
| opacity: 0px; |
There was a problem hiding this comment.
opacity는 0과 1 사이의 숫자값을 작성해야 합니다.
내가 작성한 내용이 올바르게 적용되는지 반드시 확인해 주세요!
| .homeBottom > div{ | ||
| width: 295px; | ||
| height: 172px; | ||
| padding: 0px 0px 60px 0px; | ||
| gap: 5px; | ||
| opacity: 0px; | ||
| } | ||
| .homeBottom > div >h1{ | ||
| font-family: Pretendard; | ||
| font-size: 32px; | ||
| font-weight: 900; | ||
| line-height: 56px; | ||
| text-align: left; | ||
| color: #374151; | ||
| } |
There was a problem hiding this comment.
다른 부분에 작성한 리뷰처럼, 태그 선택자의 작성은 지양해 주세요.
그에 더해서, 자식 선택자(>) 사용 역시 마찬가지의 이유로 구현 상 불가피한 경우가 아니라면 지양해주시는 게 좋습니다.
| footer{ | ||
| width: 1,920px; | ||
| height: 160px; | ||
| top: 3448px; | ||
| padding: 32px 400px; | ||
| gap: 10px; | ||
| opacity: 0px; | ||
|
|
||
| } |
There was a problem hiding this comment.
width, top, opacity 속성은 적용되지 않았을 것 같네요!
There was a problem hiding this comment.
개발자도구 elements 패널의 하단 styles 탭에서 특정 요소에 적용되는 스타일을 확인하실 수 있습니다.
요구사항
기본
심화
주요 변경사항
스크린샷
멘토에게