[전병진] Sprint3 #138
[전병진] Sprint3 #138
Conversation
Lanace
left a comment
Lanace
left a comment
There was a problem hiding this comment.
아마 sprint2때 겹치는것들이 있어서...
sprint2가 머지되면서 충돌나는게 있는데, 그부분 해결하고 올려주시면 머지하겠습니다!
고생 많으셨습니다ㅠ
12-Sprint-Mission
Outdated
There was a problem hiding this comment.
이거 또 sub module이 추가된것같아요ㅠ
이거 파일은 지워야 하는데... 머지되기 전에 지워야할것같아요ㅠㅠㅠ
지우는건... 멘토링때 같이 해보시져ㅠ
| align-items: center; | ||
| background-repeat: no-repeat; | ||
| background-position: 80% bottom; | ||
| background-size: 55%; |
There was a problem hiding this comment.
background-size는 어떤 용도로 추가하신건가여??
| #hero { | ||
| background-image: url("images/Img_home_top.png"); | ||
| } | ||
|
|
||
| #features { | ||
| padding-bottom: 138px; | ||
| } | ||
|
|
||
| #bottomBanner { | ||
| background-image: url("images/Img_home_bottom.png"); | ||
| } | ||
|
|
||
| #loginLinkButton { | ||
| font-size: 16px; | ||
| font-weight: 600; | ||
| border-radius: 8px; | ||
| padding: 11.5px 23px; | ||
| } |
There was a problem hiding this comment.
id를 기반으로 스타일링을 하셨는데, 혹시 이유가 있을까요? 보통은 class로 하셨던것같은데 이번에 id로 하셨길래요...
물론 이미지나 배너는 한번만 나오니 id로 해도 문제는 없긴 합니다만...ㅠ
| } | ||
|
|
||
| .feature { | ||
| padding: 138px 0; |
There was a problem hiding this comment.
padding 값을 고정값으로 넣게되면 유연하게 화면 크기 전환에 대응하기가 어려워져요ㅠ
가급적이면 고정된 값보단 비율에 따른 단위로 조절해주시는게 좋아여...!ㅎㅎ
| background-size: 100%; | ||
| } | ||
|
|
||
| } No newline at end of file |
There was a problem hiding this comment.
파일 맨 마지막은 빈 라인 하나를 추가해주시는게 좋아요~
EOF 라고 해요ㅎㅎ
End of file
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <meta property="og:image" content="/images/metalogo.png"> | ||
| <meta property="og:title" content="판다마켓"> |
There was a problem hiding this comment.
오 og tag도 잘 적용하셨네요!
open graph를 적용하면 다른곳에서 페이지에 들어오기전에 대략적인 정보를 알 수 있도록 해줘요
대표적으로 카톡 링크 올리면 나오는거나 discode에도 미리 보기가 되기도 하구요ㅎㅎ
| <a href="/" | ||
| ><img | ||
| src="images/panda-logo1.png" | ||
| alt="판다마켓 홈" | ||
| width="153" | ||
| /></a> |
There was a problem hiding this comment.
줄 바꿈 처리만 조금 깔끔하게 되면 좋을것같네요ㅎㅎ
<a href="/">
<img src="images/panda-logo1.png" alt="판다마켓 홈" width="153" />
</a>| <div id="socialMedia"> | ||
| <a | ||
| href="https://www.facebook.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| ><img src="images/ic_facebook.png" alt="페이스북" width="20" | ||
| /></a> | ||
| <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer" | ||
| ><img src="images/ic_twitter.png" alt="트위터" width="20" | ||
| /></a> | ||
| <a | ||
| href="https://www.youtube.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| ><img src="images/ic_youtube.png" alt="유튜브" width="20" | ||
| /></a> | ||
| <a | ||
| href="https://www.instagram.com/" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| ><img | ||
| src="images/ic_instagram.png" | ||
| alt="인스타그램" | ||
| width="20" | ||
| /></a> | ||
| </div> |
There was a problem hiding this comment.
noreferrer 까지 달아주셨네여?
noopener noreferrer 의 효과도 잘 알고 쓰시면 좋을것같아요!
보안적인 요소가 있거든요ㅎㅎ! 잘 하셨네여~
| input:focus { | ||
| background-color: #3692FF; | ||
| } | ||
| label{ | ||
| display: block; | ||
| margin-bottom: 16px; | ||
| } |
There was a problem hiding this comment.
요기부분은 sprint2 에서 답변 해두긴 했어서... 따로 안써둘게요ㅎㅎ!
2 participants
요구사항
Github에 PR(Pull Request)을 만들어서 미션을 제출합니다.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
기본
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다
랜딩 페이지
로그인, 회원가입 페이지 공통
심화
주요 변경사항
스크린샷
멘토에게
일단 이전 스프린트1때 만든 페이지를 div상자를 무분멸하게 너무 만들었길래 손을 쓸수가 없어서 스프린트1 페이지 자체는 모범답안 기준으로 만들었습니다.. 그외 스프린트2~3부분은 모두 저가 수정.
home 페이지 타블릿, 모바일 모드부터 .feature-content 이부분 2번째 몸통 순서를 바꾸고 싶은데, flex-wrap: wrap;, order:0; 이 두개를 이용해도 안되어서.. 도움을 좀 받고 싶어요 ㅠ
로그인, 회원가입 페이지에 label부분 몇개가 width100%를 주는데 부모태그보다 더 넓이가 길게 나와서 그러는데 아무리 손을 써봐도 고쳐지질 않습니다 ㅠ
심화부분에 meta태그는 이용하긴 했는데 저게 맞는건지 궁금합니다.
셀프 코드 리뷰를 통해 질문 이어가겠습니다.