Conversation
There was a problem hiding this comment.
수연님 3주차 미션 고생하셨습니다!
pr 설명에 주요 변경사항과 배포 url 을 남겨주셔서 리뷰하기 수월했습니다.
또 템플릿 코드 전체를 복사 붙여넣기 하는게 아니라 이전 주차의 작업물에서 부분 부분 적용한 점이 좋았습니다. 그렇게 교체하시면서 어떤 구조가 더 효율적으로 보이는지 고민하면서 적용하셨다면 더 좋을 것 같습니다.
컴퓨터에서 요구사항에 맞는 크기로 지정하면 시안처럼 화면이 보이는데 휴대폰으로 링크에 접속해 보면 스타일들이 하나도 적용이 안된 것 같습니다... 구글링해서 찾아본 뷰포트를 사용해도 동일한데 어떻게 수정을 하면 될지 감이 안 잡힙니다 ㅠㅠ
요거에 대해선 멘토링 때 말씀드렸던 것처럼 의도대로 동작하지 않는 환경(기기, 브라우저 종류와 버전)을 체크해서 혹시 지원되지 않는 속성을 사용한 것은 아닌지, 구체적인 상황을 특정해서 검색하며 해결해보길 추천드립니다.
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Linkbrary</title> | ||
| <link rel="stylesheet" href="index.css"> | ||
| <link rel="stylesheet" href="./src/landing.css"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <span class="maintitle-style">세상의 모든 정보를 </span> | ||
| <br>쉽게 저장하고 관리해보세요 | ||
| </h1> | ||
| <a class="cta2" href="signup.html">링크 추가하기</a> |
There was a problem hiding this comment.
템플릿 코드를 참고해 수정해주신 것 같아요~
cta, cta2 라는 클래스를 지정해주셨는데 좀 더 의미론적인 네이밍과 재사용성을 고려해보면 좋을 것 같아요.
로그인과 링크 추가 버튼 모두 CTA 디자인이 적용되어있고, 너비 정도 차이가 있네요.
그래서 로그인과 링크 추가 버튼에 button--gradient 와 같은 클래스를 지정하고, 해당 클래스에 대해 피그마를 보고 스타일링하면 될 것 같아요.
너비는 각 버튼에 login-button, add-link-button 클래스를 주고 width 값만 설정하는 식으로요!
| <a class="login" href="signin.html">로그인</a> | ||
| <div class="main-description"> | ||
| <h1 class="maintitle"> | ||
| <span class="maintitle-style">세상의 모든 정보를 </span> |
There was a problem hiding this comment.
태그와 class 속성 사이 공백같은 부분도 신경써주세요~
| <a href="index.html"><img class="logo" src="logo.svg" alt="로고"></a> | ||
| <a class="login" href="signin.html">로그인</a> | ||
| <div class="main-description"> | ||
| <h1 class="maintitle"> |
There was a problem hiding this comment.
class 명을 main title 처럼 두 단어로 구성할 경우 가독성을 위해 단어를 구분해주면 좋을 것 같아요.
일반적으로는 단어의 시작하는 문자를 대문자로 시작하거나 '-' 로 구분하는데 class 명에선 '-' 를 많이 사용하니 main-title 요렇게 수정해보세요.
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>로그인</title> | ||
| <link |
There was a problem hiding this comment.
여러 페이지에서 해당 폰트를 사용하고 있어서, font.css 를 생성해 공통으로 관리해서 사용하면 어떨까 합니다~
| @media screen and (min-width: 768px) and (max-width: 1199px) { | ||
| .gnb { | ||
| padding: 2rem 32px; | ||
| } |
There was a problem hiding this comment.
공백이나 들여쓰기를 조금 더 신경써주세요~!
| } | ||
|
|
||
| /* 모바일 */ | ||
| @media screen and (min-width: 375px) and (max-width: 767px) { |
There was a problem hiding this comment.
브라우저 너비가 400px 대로 내려가면 레이아웃이 깨지면서 우측에 공백이 있는데
푸터 쪽 디자인 확인해서 수정해보세요~
| display: none; | ||
| } | ||
|
|
||
| .img1 { |
There was a problem hiding this comment.
이미지 비율 깨지는 부분도 수정해주세요~
| background-color: #f5e14b; | ||
| } | ||
|
|
||
| @media screen and (min-width: 375px) and (max-width: 767px) { |
There was a problem hiding this comment.
Mobile 사이즈에서 좌우 여백 32px 제외하고 내부 요소들이 너비를 모두 차지합니다.
요구사항에 대해 제대로 구현이 안된 것 같습니다.
모바일 사이즈에서 패딩을 제외하고 내부 요소들이 모두 차지해야하는데 이부분이 누락 됐네요!
확인해서 반영해주세요.
요구사항
기본
심화
주요 변경사항
스크린샷
https://codeit-linkbrary-sy.netlify.app/
멘토에게
컴퓨터에서 요구사항에 맞는 크기로 지정하면 시안처럼 화면이 보이는데 휴대폰으로 링크에 접속해 보면 스타일들이 하나도 적용이 안된 것 같습니다... 구글링해서 찾아본 뷰포트를 사용해도 동일한데 어떻게 수정을 하면 될지 감이 안 잡힙니다 ㅠㅠ