Conversation
There was a problem hiding this comment.
png를 빼고, svg를 넣어주셨네요. svg와 png, jpg 같은 이미지 에셋들의 차이점은 무엇인지 알아보면 좋을 것 같습니다. 👍
| <html lang="ko"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
There was a problem hiding this comment.
viewport가 어떤 뜻이 있는지도 알아보면 좋을 것 같습니다. 👍
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link rel="stylesheet" href="./src/style.css" /> |
There was a problem hiding this comment.
어떤건 src에 넣어주셨고, 어떤건 아니네요. 이유가 있을까요?
깔끔하고 직관적인 파일구조 정리도 중요합니다!
| ></a> | ||
| <a href="./signin.html"><div class="top-login">로그인</div></a> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <!--1번째 파트--> | ||
| <section class="sec1"> | ||
| <h1 class="sec1-title"> | ||
| <span class="sec1-sub">세상의 모든 정보</span>를<br /> | ||
| <div class="landing-header"> | ||
| <h1 class="header-title"> | ||
| <span class="header-gradient">세상의 모든 정보</span>를<br /> | ||
| 쉽게 저장하고 관리해 보세요 | ||
| </h1> |
There was a problem hiding this comment.
글자의 띄어쓰기를 보장하려고 하나하나 분해해주셨네요!
하지만, 모바일 모드가 되서 글자가 일렬로 되면 이렇게 깨져버립니다.
letter-spacing이 잘못 적용된 것 같네요.
이렇게 여러 element로 글자를 복잡하게 쪼개면 css 조정이 어려울 꺼에요.
white-space라는 css 속성도 이용해보세요.
| 나중에 읽고 싶은 글, 다시보고 싶은 영성,<br class="br_tag" /> | ||
| 사고 싶은 옷, 기억하고 싶은 모든 것을<br class="br_tag" /> | ||
| 한 공간에 저장하세요. |
There was a problem hiding this comment.
br tag 뿐만아니라, \n같은 줄바꿈을 뜻하는 특수문자도 사용할 수 있습니다.
\r\n 같은 문자열에서 사용되는 특수문자들도 알아보면 좋을 것 같습니다. 👍
(HTML에서만 사용되는 escape 문자들도 있습니다.) https://www.zerocho.com/category/HTML&DOM/post/587f50b1308ed50018a00d51
| @@ -0,0 +1,168 @@ | |||
| @import './global.css'; | |||
| /* user agent stylesheet 초기화 */ | ||
|
|
There was a problem hiding this comment.
이와 동일하게 style초기화를 목적으로 하는 여러 라이브러리들이 있습니다.
찾아보시면 좋을 것 같아요!
| align-items: center; | ||
| } | ||
|
|
||
| nav { |
There was a problem hiding this comment.
지금은 element가 한정적이어서 문제가 없지만, 수많은 element들이 생성되는 대규모 app에선 element에 직접 style을 주는 것이 문제가 될 수 있습니다.
가능하면, class를 사용해주세요.
| section:nth-of-type(odd) { | ||
| grid-template: | ||
| '. img' | ||
| 'title img' | ||
| 'description img' | ||
| '. img' | ||
| /30rem 55rem; | ||
| } | ||
|
|
||
| section:nth-of-type(even) { | ||
| grid-template: | ||
| 'img .' | ||
| 'img title' | ||
| 'img description' | ||
| 'img .' | ||
| /55rem 30rem; | ||
| } |
There was a problem hiding this comment.
grid로 순서바꾸기 잘 적용해주셨네요! 😁
| </div> | ||
| <div class="sign-input-box box-password"> | ||
| <label for="password" class="password">비밀번호</label> | ||
| <input id="password" name="password" type="password" /> |
There was a problem hiding this comment.
password라는 id를 2개를 사용해주셨네요.
id attribute는 DOM에서 단 1개만 존재해야합니다.
https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/id
요구사항
기본
PC: 1200px 이상
Tablet: 768px 이상 ~ 1199px 이하
Mobile: 375px 이상 ~ 767px 이하
375px 미만 사이즈의 디자인은 고려하지 않습니다
(이때 가로가 커지는 비율에 맞춰 세로도 커져야 합니다.)
심화
주요 변경사항
스크린샷
랜딩 페이지-태블릿
랜딩 페이지-모바일
로그인 페이지-태블릿
로그인 페이지-모바일
회원가입 페이지-태블릿
회원가입 페이지-모바일
멘토에게