Conversation
|
Overflow-fixed 했습니다. div태그를 absolute를 설정 했는데 width를 100%로해서 바디태그보다 width가 커진것이 문제 였습니다. |
There was a problem hiding this comment.
안녕하세요 동규님!
구현해주신 페이지랑 코드 잘 봤습니다 👍 수고 많으셨어요~!
다만 구현해주신 내용에 몇가지 요구사항에 대한 내용이 반영되어있지 않아서, 찬찬히 반영해주시면 좋을 것 같아요. 개인적으로 absolute 사용하시는 부분을 많이 덜어내보시면 좋을 것 같습니닷 🤸 그러면 반응형 구현하시기도 훨씬 쉬워지실거에요.
질문으로 남겨주신 부분은 직접 해결해주셨더라구요! 멋집니닷🚀🚀
브라우저 검사(inspect)를 켜서 어떤 element의 width가 커서 부모를 침범하는지 확인해보시면 더 확인하기 용이하실거에요
또, 커밋 메시지는 �내가 어떤 내용을 구현했는지 구체적으로 작성하면 좋아요.
commit message 규칙에 대해서도 한번 살펴보시고 조금씩 적용해나가시는 것도 좋을 것 같아요!
스프린트 하시느라 고생많으셨습니다!
| @@ -0,0 +1,104 @@ | |||
| <!DOCTYPE html> | |||
There was a problem hiding this comment.
html 파일에 indent가 제각각이어서, 포매팅해주시면 좋을 것 같아요!
prettier 설정을 살펴보시면 될거에요. format on save 를 켜시면 저장하실때 자동으로 포매팅이 되어서, 편하실거에요! 👍
|
|
||
| <div class="wrap"> | ||
| <a href="/index.html"><img src="logo/pandaMarket.png" alt="pandaimage"></a> | ||
| <button onclick="location.href='./login/login.html'" class="loginBtn">로그인</button> |
There was a problem hiding this comment.
요런 부분에서는 단순 페이지 이동을 하고있어서, 따로 어떤 사용자와의 상호작용이 필요한게 아니라면 a tag 만으로도 작업을 수행할 수 있을 것 같아용! 어떻게 생각하시나요~? 🙋♀️
mission1/index.html
Outdated
| <div class="card"> | ||
| <div class="box"> | ||
| <h1>일상의 모든 물건을<br>거래해 보세요</h1> | ||
| <button>구경하러 가기</button> |
There was a problem hiding this comment.
버튼 click시 items페이지로 이동해야할 것 같아욤! 🥹
|
|
||
|
|
||
|
|
||
| </html> |
There was a problem hiding this comment.
end of file 이슈가 있네요! �구현해주신 부분에 문제가 있지는 않지만, 관행적으로 사용되는 부분이라 한번 확인해주셔용!
prettier 설정에서 마지막 줄에 개행문자를 넣어줄 수 있는 설정이 있어요. ㅎㅎ
mission1/style.css
Outdated
| .card2 .confirmBox{ | ||
|
|
||
| position: absolute; | ||
| top: 137.5px; | ||
| left: 360px; | ||
| display: flex; | ||
| align-items: center; | ||
| } |
There was a problem hiding this comment.
요부분은 직접 질문해주신 부분이기도 했는데, 조금 더 설명드릴게요! 🙋♀️
position absolute는 element를 문서의 흐름에서 배제하고 독립적으로 스타일을 그리는거에요. 여기에서 문서의 흐름에서 배제한다는건 부모 요소나 sibling의 영향을 받지 않게 한다는건데, 보통은 문서의 흐름에 맞추어 스타일링을 하고, 그렇지 않은 부분이 필요할 때에 absolute를 사용해요. 절대적인 위치를 가지고 있기 때문에 요소끼리 겹칠 수도 있고, 특히나 반응형을 고려한 페이지를 개발한다면 더 복잡한 계산을 해야할 수 있기 때문이에용!
만약 더 궁금하시다면 (관련 아티클) 한번 보셔도 좋을 것 같아요!
| .loginBtn{ | ||
| cursor: pointer; | ||
| position: absolute; | ||
| border:none; | ||
| background-color: #3692ff; | ||
| border-radius: 8px; | ||
| padding: 12px 20px; | ||
| color: #FFFFFF; | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| width: 128px; | ||
| height: 48px; | ||
| top: 10px; | ||
| right: 200px; | ||
| } |
There was a problem hiding this comment.
제가 이전 코멘트에서 absolute를 사용하게되면 반응형으로 만들 때에 요소들끼리 겹치는 부분이 생길 수도 있다고 말씀드렸는데,
요 상황이 그런 부분이에용! 어떻게 해결할 수 있을까요~?
mission1/style.css
Outdated
| @@ -0,0 +1,274 @@ | |||
| body{ | |||
There was a problem hiding this comment.
html에 들어가있는 기본적인 스타일을 reset 하는 reset.css 라는 것도 있는데요, 한번 살펴보셔도 좋을 것 같아요!
mission1/style.css
Outdated
| background-color: #FFFFFF; | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
| /* header */ |
There was a problem hiding this comment.
css 파일에도 format on save가 적용되면 더 좋을 것 같네용! 🥹
| .specific h1{ | ||
| font-weight: 700; | ||
| font-size: 40px; | ||
| line-height: 56px; | ||
| color: #374151; | ||
| } | ||
|
|
||
| .specific p{ | ||
| font-size: 24px; | ||
| font-weight: 500; | ||
| line-height: 28.8px; | ||
| color: #374151; | ||
| } |
There was a problem hiding this comment.
구체적인 부모요소 내에 있는 태그에 대한 스타일을 정해주셔서 좋네요! 💯
랜딩 페이지의 url path는 루트(‘/’)로 설정합니다.
title은 “판다마켓”로 설정합니다.
화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다.
화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px“로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소간 거리가 가까워지도록 설정합니다.
클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 cursor: pointer 로 설정합니다.
“판다마켓” 클릭 시 루트 페이지(‘/’)로 이동합니다.
'로그인'버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다 (빈 페이지)
“구경하러가기”버튼 클릭 시(’/items’)로 이동합니다.(빈 페이지)
“Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다.(모두 빈 페이지)
페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다.
기본
UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
심화
palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.
주요 변경사항
스크린샷
https://profound-belekoy-fdbae8.netlify.app
overflow-x 적용x
overflow-x:none 적용
bodytag에 적용했습니다.
멘토에게
페이지 오른쪽에 공백이 생깁니다. 그래서 body태그에 overflow-x:hidden;값을 주었는데 어떻게 해결가능 할까요?