Conversation
There was a problem hiding this comment.
리뷰 확인해 주세요!
동일 부분에 대한 리뷰는 반복해서 작성하지 않았으니, 각 피드백을 적용할 다른 부분이 없는지 찾아서 적용해 주셔야 합니다.
심화 미션을 수행하기위해 미디어쿼리를 사용중입니다. 코드를 작성중에 있는데 이런 방식으로 진행해도 되는지 여쭙고 싶습니다.
==> 작성하신 것처럼 특정 뷰포트에 대한 스타일을 전체적으로 하나의 미디어 쿼리에 작성할 수도 있고, 혹은 반응형을 적용할 각 선택자에 미디어 쿼리를 작성할 수도 있습니다. 지금 작성하신 방법대로 하셔도 무방합니다!
| .main-first-box, | ||
| .main-second-box, | ||
| .main-third-box{ | ||
| width: 100%; | ||
| height: 720px; | ||
|
|
||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| .main-first-content, | ||
| .main-second-content, | ||
| .main-third-content{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| border-radius: 12px; | ||
| width: 988px; | ||
| background-color: #FCFCFC; | ||
| white-space: nowrap; | ||
| margin: 0 auto; | ||
| } | ||
|
|
||
| .main-first-image, | ||
| .main-second-image, | ||
| .main-third-image{ | ||
| width: 579px; | ||
| height: 444px; | ||
| } |
There was a problem hiding this comment.
동일한 스타일 속성을 가지고 있다면, class를 분리할 필요 없이 범용적인 이름의 class 하나만 작성하고 적용해 주시면 됩니다.
| <body> | ||
| <header class="header"> | ||
| <a href="./index.html"><img class="logo" src="./image/Property 1=lg.png" alt="로고"></a> | ||
| <a href="./login.html"><button class="button header-button">로그인</button></a> |
There was a problem hiding this comment.
유사한 특성을 지닌 a 태그와 button 태그는 서로 포함하여 사용하지 않는 게 좋습니다.
| <h2>일상의 모든 물건을<br>거래해 보세요</h2> | ||
| <a href="./items.html"><button class="button main-ad-button">구경하러 가기</button></a> | ||
| </div> | ||
| <div class="main-ad-image"> | ||
| <img src="./image/Img_home_top.png" alt="메인 광고 이미지"> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| <section class="main-first-box"> | ||
| <div class="main-first-content"> | ||
| <img class="main-first-image" src="./image/Img_home_01.png"> | ||
| <div class="main-first-texts"> | ||
| <h5>Hot item</h5> |
There was a problem hiding this comment.
h1, h2 태그와 같은 heading 태그를 사용할 땐 권장되는 사용 방식들이 있습니다.
지금같은 경우에는 아래 사진의 두 번째 항목에 해당되겠네요. 참고해 주세요!
| </section> | ||
| <section class="main-first-box"> | ||
| <div class="main-first-content"> | ||
| <img class="main-first-image" src="./image/Img_home_01.png"> |
| <a href="./items.html"><button class="button main-ad-button">구경하러 가기</button></a> | ||
| </div> | ||
| <div class="main-ad-image"> | ||
| <img src="./image/Img_home_top.png" alt="메인 광고 이미지"> |
There was a problem hiding this comment.
img 태그의 alt 속성 작성 시에는 로고, 이미지와 같은 단어는 포함하지 않아도 됩니다.
내용이 좀 길긴 한데, 해당 내용을 참고해 보세요!
| <a href="https://www.facebook.com/?locale=ko_KR" target="_blank"><img src="./image/gnb/ic_facebook.png"></a> | ||
| <a href="https://x.com/?lang=ko" target="_blank"><img src="./image/gnb/Vector.png"></a> | ||
| <a href="https://www.youtube.com/" target="_blank"><img src="./image//gnb/ic_youtube.png"></a> | ||
| <a href="https://www.instagram.com/" target="_blank"><img src="./image//gnb/ic_instagram.png"></a> |
There was a problem hiding this comment.
- 외부 링크를 새 창(
target="_blank")으로 열게 되면 보안상 취약할 수 있습니다. 이를 위해 rel 속성에noreferrer,noopener값을 추가해줄 수 있습니다. 관련 아티클 첨부해 드리니 확인해 보세요! - 다른 부분에 리뷰 드린 것처럼 img 태그에는 alt 속성을 작성해 주세요!
| .info > a{ | ||
| white-space: nowrap; | ||
| cursor: pointer; | ||
| text-decoration: none; | ||
| color: #E5E7EB; | ||
| } | ||
| .footer-image-box{ | ||
| white-space: nowrap; | ||
| } | ||
| .footer-image-box > a{ | ||
| cursor: pointer; | ||
| } |
There was a problem hiding this comment.
자식 선택자(>)는 구현 상 불가피한 경우가 아니라면 지양해주시는 게 좋습니다.
추후에 문서 구조가 바뀐다거나, 특정 요소에만 다른 스타일을 부여해야 한다거나 하는 변경 사항이 생겼을 때 유지보수에 어려움을 줄 수 있습니다.
| } | ||
| .sub-ad-image{ | ||
| width: 746px; | ||
| height: 397px; | ||
| } | ||
| .footer{ | ||
| background-color: #111827; | ||
| width: 100%; | ||
| height: 160px; | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .footer-box{ | ||
| max-width: 1120px; | ||
| width: 100%; | ||
| margin-left: 400px; | ||
| margin-right: 400px; | ||
| margin-top: 32px; | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
| .company{ | ||
| color: #9CA3AF; | ||
| font-family: 'Pretendard'; | ||
| font-size: 16px; | ||
| font-weight: 400; | ||
| line-height: 19px; | ||
| white-space: nowrap; | ||
| } | ||
| .info{ |
There was a problem hiding this comment.
선택자 간에는 가독성을 위해 한 줄씩 띄워 주세요!
| .sub-ad h2{ | ||
| font-family: 'Pretendard'; | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 56px; | ||
| color: #374151; | ||
| } |
There was a problem hiding this comment.
태그 선택자는 공용으로 적용해야 하는 경우를 제외하고는 사용을 지양하고 대신 클래스 선택자를 활용하는 연습을 하시는 게 좋습니다.
해당 css가 적용되는 모든 범위에서의 태그에 반영되기 때문에, 이후 변경 및 수정 등의 유지보수 시 어려움을 겪을 수 있습니다.
지금같은 경우 sub-ad class를 가진 요소 하위의 h2 태그에만 적용되겠지만, 그 안에서도 변경 사항은 발생할 수 있으니까요
요구사항
기본
- Privacy 페이지(‘/privacy’) / FAQ 페이지(‘/faq’)
심화
주요 변경사항
멘토에게