Conversation
There was a problem hiding this comment.
요 부분은 이미지가 아닌, 코드로 조건마다 만드셔야 하는걸 figma로 만들어 두신것같아요.
btn_ 이미지는 없어도될것같군용
There was a problem hiding this comment.
파일 이름에는 공백이 없도록 _ 언더스코어로 연결 해주시는게 좋습니다
| body { | ||
| color: #374151; | ||
| word-break: keep-all; | ||
| font-family: Pretendard, sans-serif; | ||
| } |
There was a problem hiding this comment.
body {
color: #374151;
word-break: keep-all;
font-family: Pretendard, sans-serif;
}body 태그에 속성을 부여하면, body 하위에 있는 모든 태그에도 해당 속성값이 전달되는데 이걸 상속이라고 합니다.
예를 들어, 특정 컬러를 body 태그에 지정하면, 하위 태그에서도 해당 컬러를 사용하게 됩니다.
body 하위에 범용적으로 부여할 속성과, 요소마다 부여할 속성을 나눠서 부여하는게 좋을것같아요.
font-family는 body 하위에 모두 적용되야 하겠지만
color, word-break는 특정 태그에서 쓰여도 무방할 속성으로 보입니다.
| #top { | ||
| background-image: url(images/Img_home_top.png); | ||
| } |
There was a problem hiding this comment.
어제 멘토링 시간에 살짝 말씀드렸던, 위치, 순서, 방향은 변경에 유연하지않은 이름 짓는 방법이라 말씀드렸던걸 생각해보시고
수정해보시면 좋을것같네요 :-)
| h1 { | ||
| font-size: 40px; | ||
| font-weight: 700; | ||
| line-height: 56px; | ||
| letter-spacing: 0.02em; | ||
| } |
There was a problem hiding this comment.
h1 태그 선택자는 class 선택자보다 범용적으로 쓰여서
모든 h1 태그에 다 적용되기때문에, 한번에 모든 h1 태그에 속성을 컨트롤 할 수 있는 편리함이 있는데,
내가 원하지 않는 h1 태그도 속성이 적용되는 불편함도 같이 있어서,
저는 class 선택자로 사용하시는걸 권장해요 :-)
| <body> | ||
| <header> | ||
| <a href="/"> | ||
| <img src="images/logo/Property 1=Variant3.png" alt="판다마켓 홈" width="153"> |
There was a problem hiding this comment.
img 태그에 width, height 속성을 설정하는것과 css로 width, height를 설정하는건 둘다 장단점이 있습니다.
img 태그에 width,height를 설정하면 브라우저가 이미지 크기를 미리 알 수 있어서 빠른 랜더링이 가능하지만,
width, height의 원래 비율과 상관없이 지정 한 크기로 그려집니다.
css 속성은, 미디어 쿼리로 반응형으로 다루거나, 다양한 단위로 표현할 수 있습니다. (%,em,rem등등) 그리고 width, 혹은 height의 값을 하나만 설정하면 비율에 맞게 계산됩니다. 하지만 브라우저는 이미지 크기를 몰라서 html이 먼저 그려지고, 이미지가 껴지면 layout의 이동이 생기거나 초기 렌더링이 조금 지연될 수 있습니다(속도는 프로젝트가 커지고,복잡하면 그때 고민해도됩니다.)
상황에 맞게 선택하시면 좋을것같아요 :-)
| <a href="/login" id="login-link-button" class="button">로그인</a> | ||
| </header> | ||
| <main> | ||
| <section id="top" class="banner"> |
There was a problem hiding this comment.
지금은 문제가 없지만, id 선택자를 사용할때는 문서에서 고유한 요소인가 고민해보시고 사용하는게 좋습니다.
만약 같은 id 선택자가 중복으로 사용될경우,
선택자 우선순위가 같아 예기치 못한 스타일링 문제가 생길 수 있고,
javascript로 특정 id를 가진 요소에 접근할 때에도 제일 처음 발견된 id에만 접근할 수 있어서 원하는대로 동작하지 못할수도 있습니다.
요구사항
기본
UI 디자인 기초 토픽을 수강해 보세요.
피그마 디자인에 맞게 페이지를 만들어 주세요.
React와 같은 UI 라이브러리를 사용하지 않고 진행합니다.
HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: https://www.codeit.kr/learn/5309)
PC사이즈만 고려해 주어진 디자인으로 구현합니다.
체크리스트
심화
사이트
https://sprint-mission-1-ljw.netlify.app/
주요 변경사항
스크린샷
멘토에게