Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kich555
approved these changes
Oct 29, 2024
There was a problem hiding this comment.
이부분은 왼쪽 영역만 이미지로 추출하고 오른쪽 영역은 직접 html과 css로 만드셨어야 합니다!
There was a problem hiding this comment.
이 영역도 위와 마찬가지에요!
"구매를 원하는 상품을 검색하세요" 쪽 영역은 html로 만드셔야합니다1
| /></a> | ||
| <a href="/login" class="login">로그인</a> | ||
| </header> | ||
| <div class="container"> |
There was a problem hiding this comment.
태그 안에서 , 는 잘 나누어 주셨는데 이부분이 조금 아쉽네요
`` 이렇게 하고 위 div태그는 없어지는 편이 좀 더 좋을것 같습니다 ㅎ
Comment on lines
+19
to
+20
| <section class="banner"> | ||
| <div class="banner-section"> |
There was a problem hiding this comment.
여기도요 ㅎ 굳이
<section class="banner">
<div class="banner-section">
...과 같은 중첩 구조가 필요했을까 싶긴 하네요 ㅎ 그냥
| <div> | ||
| <img | ||
| src="img/Img_home_top.png" | ||
| alt="상단 이미지" |
There was a problem hiding this comment.
img 태그에 alt 속성 달아주시는건 너무 좋습니다 ㅎㅎ
| <img | ||
| src="img/Img_home_top.png" | ||
| alt="상단 이미지" | ||
| class="banner img" |
There was a problem hiding this comment.
class도 여러개를 조합해서 사용하는거 너무 좋아요!
| font-family: Arial, sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| height: 100vh; |
There was a problem hiding this comment.
여기 height는 굳이 없어도 될것 같다는 생각이 드네요 ㅎ
| .banner-section{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 1110px; |
There was a problem hiding this comment.
이런 부분은 width 보다는 max-width를 사용하는게 좀더 유연한 레이아웃이 될 것 같습니다 ㅎ
만약 viewport가 1110px 미만이라면 해당 코드로 인해 가로 스크롤이 생기고 말거에요 ㅎ
| .item-link:hover, | ||
| .login:hover { | ||
| background-color: #1967D6; | ||
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
요구사항
기본
[x] 랜딩 페이지의 url path는 루트('/')로 설정합니다.
[x] title은 "판다마켓"로 설정합니다.
[x] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
[x] 화면의 너비가 1920px 보다 작아질 때, "판다마켓" 로고의 왼쪽 여백 200px"로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
[x] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
[x] "판다마켓" 클릭 시 루트 페이지('/')로 이동합니다.
[x] '로그인'버튼 클릭 시 로그인 페이지('/login')로 이동합니다 (빈 페이지)
[x] "구경하러가기"버튼 클릭 시('/items')로 이동합니다.(빈 페이지)
[x] "Privacy Policy", "FAQ"는 클릭 시 각각 Privacy 페이지('/privacy'), FAQ 페이지('/faq')로 이동합니다.(모두 빈 페이지)
[x] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
심화
[ ]사용자의 브라우저가 크고 작아짐에 따라 페이지의 요소간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 보세요.(설정값은 자유입니다)
주요 변경사항
스크린샷
배포 사이트
멘토에게