Conversation
| @@ -0,0 +1,82 @@ | |||
| <!DOCTYPE html> | |||
| <html> | |||
There was a problem hiding this comment.
html에는 문서의 언어를 알 수 있도록 lang 속성이 있답니다~! 확인후 적절한 lang 속성을 추가해주세요!
| <body> | ||
| <header> | ||
| <a href="https://panda-market-sprint.netlify.app/"> | ||
| <img class="logo" src="Group 19.png"> |
There was a problem hiding this comment.
img를 사용하실 때는 width, height 값을 추가해주어야 합니다.
브라우저 렌더링 시 레이아웃의 크기를 미리 계산할 수 있어서 성능에도 유리합니다.
| <body> | ||
| <header> | ||
| <a href="https://panda-market-sprint.netlify.app/"> | ||
| <img class="logo" src="Group 19.png"> |
There was a problem hiding this comment.
img 태그의 alt 속성에는 의미 있는 텍스트를 넣어주세요!
스크린 리더기에 읽히는 것을 고려하여 작성해주시면 네이밍하시는데 도움이 되실 거에요.
| </head> | ||
| <body> | ||
| <header> | ||
| <a href="https://panda-market-sprint.netlify.app/"> |
There was a problem hiding this comment.
링크 클릭영역이 불필요하게 많이 잡히고 있네요! 로고부분만 클릭되도록 작업하면 좋을 것 같습니다.
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="main_section"> |
There was a problem hiding this comment.
vscode의 확장프로그램으로 prettier를 설치하셔서 포멧팅을 적용하시면 저장만 해도 구조를 정리해줘서 편리하답니다~!
| .article2_reverse{ | ||
| font-family: Pretendard; | ||
| font-size: 40px; | ||
| font-weight: 700; |
There was a problem hiding this comment.
strong태그를 사용했다면 굳이 font-weight:700을 줄 필요가 없겠죠?!
| color: #374151; | ||
| } | ||
| .article3_reverse{ | ||
| font-family: Pretendard; |
There was a problem hiding this comment.
Pretendard 같은 웹 폰트를 사용한다면 폴백용 폰트를 추가해주는 것이 좋습니다. 가장 기본적인 폰트가 sans-serif 체 이기 때문에 아래와 같이 Pretendard를 로드하지 못했을 때를 대비해서 작성해주시는 것 이 좋아요.
| font-family: Pretendard; | |
| font-family: Pretendard , sans-serif; |
| display:flex; | ||
| gap:30px; | ||
| } | ||
| #Privacy, #FAQ{ |
There was a problem hiding this comment.
스타일은 클래스를 사용해서만 작업해주세요~!
태그선택자와 id선택자는 사용을 지양해주세요.
| } | ||
| .container{ | ||
| width: 1200px; | ||
| height: 2160px; |
There was a problem hiding this comment.
height를 고정값으로 주게 되면 콘텐츠가 가변적인 경우에 레이아우싱 깨지게 됩니다~! 높이는 콘텐츠 양에 따라 자연스럽게 변하도록 제거해주세요!
There was a problem hiding this comment.
각 섹션의 간격은 .section에 margin-top 같은 속성으로 간격을 지정하면 될 것 같아요.
| <a href="https://www.facebook.com/" id="facebook" target="_balnk"><img src="ic_facebook.png"></a> | ||
| <a href="https://www.twitter.com/" id="twitter" target="_balnk"><img src="ic_twitter.png"></a> | ||
| <a href="https://www.youtube.com/" id="youtube" target="_balnk"><img src="ic_youtube.png"></a> | ||
| <a href="https://www.instagram.com/" id="insta" target="_balnk"><img src="ic_instagram.png"></a> |
There was a problem hiding this comment.
멘토링 시간에 말씀드린 것처럼 alt 속성으로 어떤 아이콘인지 적혀있으면 좋을 것 같습니다.
|
가영님 미션 하시느라 고생하셨습니다. 그리고 브랜치는 주차별로 다른 브랜치를 만들어 작업하셔야하니 다음부터는 Basic-김가영-sprint2 같이 -sprint{주차} 를 붙혀서 브랜치를 만들어주세요~! |
요구사항
UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
기본
심화
주요 변경사항
멘토에게