ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko ko nb ko ko ko en en ko ko ko ko ko ko ko ko ko ko ko ceb ko ko ko ko ko ko ko ko ko ko ko ko ko km ko ko ko ko ko ko ko ko ko ko fr ko ko ko ko ko ko ko ko ko ko ko ko ko fr ko en ko ko en ko ko ko en ko ko ko ko en es ko ko ko ko ko ko en
#15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌 | 디자인베이스
웹 디자이너를 위한 웹 코딩 강좌 열다섯 번째 시간입니다.
오늘도 CSS에서 반응형으로 코딩할 때 자주 사용하는 단위에 대해서 배워볼게요. %, em, rem, vw, vh 이렇게 5가지를 알아볼게요.
평소에 몇 개는 알고 몇 개는 어렴풋이 알고 있었다면 이번 강좌를 통해 직접 눈으로 보면서 알아보도록 해요.
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
% 란, 전체의 몇 퍼센트인지에 대한 값입니다. 부모 기준으로 자식의 넓이를 %라고 합니다.
예를 들어, 부모 태그의 넓이가 1200px일때 자식에게 50%를 적용하면 자식 태그의 넓이는 600px이 됩니다.
em 단위는 상위 요소 크기의 몇 배인지를 정하는 단위입니다.
예를 들어, 상위 태그의 폰트 크기가 16px 인경우, 하위 태그에 폰트 크기에 1em으로 적용한다면 1em = 16px 이 됩니다.
1.5em = 24px(16*1.5) 인 거죠
추가로, rem 이란 em 앞에 R이 붙죠. 이건 Root의 약자인데 최상위라는 뜻이에요. 그래서 그냥 가장 상위인 html 태그에 적용된 폰트 사이즈가 기준이 되는 거죠. em과 다르게 현재 태그 위치를 기준으로 부모 태그의 폰트 사이즈는 전혀 연관이 없습니다. 더 사용하기가 편하죠.
예를 들어, HTML(or Body) 태그의 폰트 크기가 16px 인경우, 어떤 태그에나 1rem으로 적용한다면 1rem = 16px 이 됩니다.
이건 viewport width / viewport height의 약자입니다.
Vw- 뷰포트의 폭에 근거하여 1vw는 width의 1%와 같습니다.
Vh – 뷰포트의 높이에 근거하여 1vh는 height의 1%와 같습니다.
뷰 포트라는 것은 실제로 보이는 화면입니다.
검색창, 최소화, 끄기 등의 브라우저 기능을 제외하고 실제로 눈에 보이는 부분을 말합니다.
가로로 뷰포트 크기를 조절해보면 vw 단위를 사용한 부분이 달라지고, 세로로 뷰포트 크기를 조절해보면 vh 단위를 사용한 부분이 달라집니다.
우리는 px에 익숙해져 있지만, 웹 코딩을 하다 보면 이런 유동적인 단위를 알아두는 것이 좋습니다. 실제 작업하면서 어떻게 적용할 수 있을지 고민해 보세요.
#7 반응형 UI?! 리사이징(Resizing) – 스케치 강좌
#5 마우스 오버를?! 컴포넌트 상태 – 어도비 XD 강좌
어도비 XD 강좌 오픈
쉽게 사람 일러스트레이션 믹스 매치 하기 ‘humaaans’
저작권 완전 무료 이미지 사이트 모음
그라데이션 컬러 추천해주는 사이트
아이패드 프로 아이폰 목업
iPhone 13 Pro Max 목업
Credit Card UI kit
10. 자유롭게 화면 조절하는 방법 OrbitControls – Three.js 강좌
27. 귀여운 꿀벌 일러스트 쉽게 만드는 방법 – 일러스트레이터 기초 강좌
09. 3d 물체에 그림자 적용하는 방법 – Three.js 강좌
26. 프리폼 그라디언트로 5초 만에 부드러운 그라데이션 배경 만드는 방법 – 일러스트레이터 기초 강좌
Youtube Instagram Pinterest Naver Blog
포토샵 일러스트레이터 피그마 스케치 XD 프로토파이
웹디자인 웹코딩 인비전 프린서플 Lottie Three.js
소개 매거진 디자인 사전 북마크 무료 소스 문의하기 멤버십
© 2022 Designbase. All rights reserved.