찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 오늘은 폰트 단위 관련 포스팅을 시작해볼게요 HTML에서 단위는 상대적인수치와 절대적인수치로 나뉘는데요. div { width: 200px; height: 200px; font-size: 16px; } div > span { display: block; width: 100%; height: 80%; font-size: 1em; } span이 div의 자식이라고 가정할 때 %는 부모요소의 크기를 기준으로 들어갑니다. width와 height모두 200px이 되겠죠? 본인이 absolute인 경우엔 relative의 크기를 상속받기도 합니다. 참고로 height요소를 %로 지정할 경우 무조건 상속받을 부모에게 높이값이 존재해야 합니다. px말고 가장 많이 사용하는 폰트 단위는 em과..

안녕하세요 찐망고 입니다. 오늘은 모바일 뷰포트 관련 이야기를 포스팅 해볼게요 vw와 vh는 뷰포트 너비와 높이를 이야기합니다. 폰트나 여백이나 길이의 단위를 뷰포트 단위를 사용하게 되면, 아무래도 브라우저 사이즈에 영향을 받겠죠? 1vw는 뷰포트 너비를 기준으로 100분의 1인데 만약 브라우저 사이즈가 1850px이라면 1vw는 18.5px이라고 생각하면 됩니다. 1vh는 뷰포트 높이를 기준으로 100분의 1이고 브라우저 높이에 따라 변하겠죠? 요소 높이에 100vh를 주게 되면 전체 높이에 꽉 차게 작업을 할 수 있는데 모바일에선 이슈가 좀 있습니다. 모바일 주소 표시줄 영역 때문인데요. 저렇게 주소표시줄 때문에 밀리는 현상 많이 보셨나요? ㅎㅎ 그래서 풀페이지 사이트 만들 때도 저런 현상들 때문에 ..