Conversation
| .copyright { | ||
| order: 3; | ||
| flex: 100%; | ||
| margin-left: 35px; | ||
| } |
There was a problem hiding this comment.
모바일 버전 대응하면서 푸터에 copyright 위치가 바뀌었는데,
이렇게 하니깐 마진이 고정되어서 현재 브라우저 너비가 조금 늘어나면 왼쪽 정렬이 잘안되는 문제점이 있습니다🤔
There was a problem hiding this comment.
.copyright 태그와 .footer-mid,.footer-social 태그의 여백을 설정해준 css 속성값이 달라서 조정이 어려운 것 같습니다.
아래와 같은 방식으로 여백을 동시에 주시면 컨트롤하기 더 쉬울 것 같습니다.
// current
.copyright { margin-left: 35px; } // 고정값
.footer-mid, .footer-social 의 부모태그 { justify-content: space-around; } // 브라우저에서 자동으로 여백조정
// 추천하는 방법
.copyright { margin-left: 0 } // 설정안한다는 의미입니다.
.footer-mid, .footer-social 의 부모태그 {
justify-content: space-between;
margin: 0 35px;
}
| - name: Checkout repository | ||
| uses: actions/checkout@v3 | ||
|
|
||
| - name: Check if branch exists | ||
| id: check_branch | ||
| run: | | ||
| if git show-ref --verify --quiet refs/heads/${{ github.head_ref }}; then | ||
| echo "branch_exists=true" >> $GITHUB_ENV | ||
| else | ||
| echo "branch_exists=false" >> $GITHUB_ENV | ||
| fi | ||
|
|
||
| - name: Delete branch | ||
| if: env.branch_exists == 'true' |
There was a problem hiding this comment.
git action 실패해서 pr마다 다 x 쳐져있길래 거슬려서(?)
전적으로 GPT선생님 도움을 받아 branch 삭제 전에 branch 존재여부 확인하는 job 추가해보았습니다.
(실패사유가 브랜치를 못찾는거 같아서요..)
이게 정확히 맞는건진 잘 모르겠는데 일단 요 액션보면 Delete branch job은 동작하지 않은것으로 보여집니다🤔
There was a problem hiding this comment.
저도.. 깃헙 액션이 실패한것이 신경쓰였지만 흐린눈 하고 있었습니다
이렇게 고쳐보셨다니 좋네요.
PR close시랑 merge시 해당 스크립트가 실행되니 이따가 merge될때도 성공하면 좋겠네요.
There was a problem hiding this comment.
희진님 세번째 스프린트 미션 제출 고생하셨습니다~
궁금하신점 코멘트로 남겨주셔서 파악하기 좋았습니다 👍
아래는 전반적인 코멘트입니다. 참고해주세요~
- 동일한 사항에 대해서는 한번만 코멘트를 답니다.
- max-container 클래스로 최대 너비를 제한해주셨습니다. 이로인해 최상단 배너의 이미지가 잘리고, 충분한 공간이 있음에도 여백이 생깁니다. 이를 의도하신 동작인지 한번 생각해보시면 좋겠습니다.
- img 태그와 css background image 속성의 차이를 아시나요? img 태그의 경우 의미잇는 이미지에 사용하고, 이는 스크린리더나 서치엔진에 걸립니다. 이와 다르게 background image 속성의 경우 의미가 없는 장식적인 이미지의 경우 사용하고, 이는 스크린리더나 서치엔진에 걸리지 않습니다. 판다마켓 index 페이지에서 어떤것이 img 태그로 사용하면 좋을지, background image속성으로 작성하시면 좋을지 고민해보시면 좋겠습니다.
| @font-face { | ||
| font-family: 'ROKAF Sans'; /* 폰트 이름 정의 */ | ||
| src: url('../fonts/ROKAF_Sans_Bold.ttf') format('truetype'); | ||
| } |
There was a problem hiding this comment.
P3:
로고에만 사용되는 폰트라면 용량면에서 그냥 이미지로 로고를 보여주시는게 더 좋을 것 같습니다.
| <meta property="og:type" content="website"> | ||
| <meta property="og:url" content="https://basic-kimheejin-sprint1.netlify.app/"> | ||
| <meta property="og:title" content="판다마켓"> | ||
| <meta property="og:image" content="https://basic-kimheejin-sprint1.netlify.app/images/logo_lg.png"> | ||
| <meta property="og:description" content="일상의 모든 물건을 거래해보세요"> | ||
| <meta property="og:site_name" content="판다마켓"> | ||
| <meta property="og:locale" content="ko-KR"> | ||
| <meta property="og:image:width" content="1200"> | ||
| <meta property="og:image:height" content="630"> | ||
| <link rel="stylesheet" href="/css/reset.css"> |
There was a problem hiding this comment.
P3:
메타태그 추가해주신 것 좋습니다. index 페이지말고 다른 페이지에도 추가해주시면 좋을 것 같습니다.
| } | ||
|
|
||
| /* mobile */ | ||
| @media screen and (max-width: 767px) { |
There was a problem hiding this comment.
P2:
디자인이 있는 최소사이즈는 375px입니다.
지금 최소 사이즈보다 화면을 작게 할 경우 대응이 되지 않으니
아래와 같이 상위태그에 min-width를 정해주시면 좋습니다.
body {
min-width: 375px
}
| - name: Checkout repository | ||
| uses: actions/checkout@v3 | ||
|
|
||
| - name: Check if branch exists | ||
| id: check_branch | ||
| run: | | ||
| if git show-ref --verify --quiet refs/heads/${{ github.head_ref }}; then | ||
| echo "branch_exists=true" >> $GITHUB_ENV | ||
| else | ||
| echo "branch_exists=false" >> $GITHUB_ENV | ||
| fi | ||
|
|
||
| - name: Delete branch | ||
| if: env.branch_exists == 'true' |
There was a problem hiding this comment.
저도.. 깃헙 액션이 실패한것이 신경쓰였지만 흐린눈 하고 있었습니다
이렇게 고쳐보셨다니 좋네요.
PR close시랑 merge시 해당 스크립트가 실행되니 이따가 merge될때도 성공하면 좋겠네요.
요구사항
기본
Tablet 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 24px, “로그인” 버튼 오른쪽 여백 24px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
Mobile 사이즈로 작아질 때 “판다마켓” 로고의 왼쪽에 여백 16px, “로그인” 버튼 오른쪽 여백 16px을 유지할 수 있도록 “판다마켓” 로고와 “로그인" 버튼의 간격이 가까워집니다.
화면 영역이 줄어들면 “Privacy Policy”, “FAQ”, “codeit-2024”이 있는 영역과 SNS 아이콘들이 있는 영역의 간격이 줄어듭니다.
Tablet 사이즈에서 내부 디자인은 PC사이즈와 동일합니다.
Mobile 사이즈에서 좌우 여백 16px 제외하고 내부 요소들이 너비를 모두 차지합니다.
Mobile 사이즈에서 내부 요소들의 너비는 기기의 너비가 커지는 만큼 커지지만 400px을 넘지 않습니다.
심화
sprint3 소스 배포주소
https://basic-kimheejin-sprint1.netlify.app/