당신은 주제를 찾고 있습니까 “css 단위 – #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌“? 다음 카테고리의 웹사이트 https://hu.taphoamini.com 에서 귀하의 모든 질문에 답변해 드립니다: https://hu.taphoamini.com/photos/. 바로 아래에서 답을 찾을 수 있습니다. 작성자 디자인베이스 이(가) 작성한 기사에는 조회수 9,155회 및 좋아요 284개 개의 좋아요가 있습니다.
Table of Contents
css 단위 주제에 대한 동영상 보기
여기에서 이 주제에 대한 비디오를 시청하십시오. 주의 깊게 살펴보고 읽고 있는 내용에 대한 피드백을 제공하세요!
d여기에서 #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌 – css 단위 주제에 대한 세부정보를 참조하세요
웹 디자이너를 위한 웹 코딩 강좌 열 다섯 번째 시간입니다.
오늘도 CSS에서 반응형으로 코딩할 때 자주 사용하는 단위에 대해서 배워볼게요. %, em, rem, vw, vh 이렇게 5가지를 알아볼게요.
평소에 몇 개는 알고 몇 개는 어렴풋이 알고 있었다면 이번 강좌를 통해 직접 눈으로 보면서 알아보도록 해요.
🌟예제 다운은 멤버십 회원 전용 커뮤니티에 올린 링크에서 받으실 수 있습니다.🌟
🚀 디자인베이스 멤버십 가입하면 다양한 고급 강좌와 예제 파일을 받아볼 수 있어요 🚀
┗ https://www.youtube.com/channel/UCvYnDMeL-PFZhfIz6oc_U-Q/join
*디자인베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 제가 사용하는 툴은 비주얼 스튜디오 코드(Visual Studio Code)를 사용하며 여러분이 다른 툴을 사용한다면 환경이 다를 수 있습니다. 하지만 언어는 똑같기 때문에 작업하는 데 문제는 전혀 없습니다.
누구나 손쉽게 배우는 디자인 강좌, 디자인베이스입니다. 디자이너로서 웹 코딩 공부의 첫단추는 디자인베이스에서 시작하세요. 열정만 준비하시면 다 따라 할 수 있습니다.
☞ 디자인베이스 소개 : http://designbase.co.kr/about/
☞ 공식 웹사이트 : http://designbase.co.kr/
☞ 네이버블로그 : https://blog.naver.com/designbasekorea
*BGM 사용 출처
Music: Upbeat Inspiring Corporate by Wavecont
https://www.wavecont.com/
Video Link: https://youtu.be/Ch2GzlOsUDU
Song: LAKEY INSPIRED – Chill Day (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: https://youtu.be/vtHGESuQ22s
Lights by Sappheiros https://soundcloud.com/sappheirosmusic
Creative Commons — Attribution 3.0 Unported — CC BY 3.0
Free Download / Stream: https://bit.ly/LightsSappheiros
Music promoted by Audio Library https://youtu.be/-lbbHQbZNKg
Music: Tokyo Music Walker – Way Home
css 단위 주제에 대한 자세한 내용은 여기를 참조하세요.
CSS의 7가지 단위 – rem, vh, vw, vmin, vmax, ex, ch
VH(Viewport Height) : 뷰포트 높이의 1% 길이와 동일합니다. VMIN(Viewport Minimum) : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다. VMAX( …
Source: webclub.tistory.com
Date Published: 7/14/2021
View: 7431
CSS 값 과 단위 – Web 개발 학습하기 | MDN
목적: CSS 속성에 사용되는 다양한 유형의 값과 단위에 대해 배우기. CSS 값이란 무엇인가?
Source: developer.mozilla.org
Date Published: 7/5/2021
View: 2326
CSS 단위 비교 (%, vh, vw, em, rem) – velog
vh 는 Viewport weigth의 축약어이다. 1vw로 속성값을 설정할 경우 뷰포트 너비의 1% 만큼 계산이 된다. … 해당 vw는 웹페이지 사이즈를 수정할 경우 20vw …
Source: velog.io
Date Published: 12/27/2021
View: 6910
당신은 모를 수도 있는 CSS의 7가지 단위
vh 요소는 높이값의 100분의 1의 단위입니다. 예를 들어 브라우저 높이값이 900px 일때 1vh 는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 …
Source: webdesign.tutsplus.com
Date Published: 2/23/2021
View: 9618
CSS3 Units | PoiemaWeb
cm, mm, inch 등의 단위도 존재하나 CSS에서 사용하는 대표적인 크기 단위는 px, em, %이다. px은 절대값이고 em, %는 상대값이다. 대부분 브라우저의 폰트 사이즈 기본값 …
Source: poiemaweb.com
Date Published: 7/21/2022
View: 8766
CSS 상대 단위 – em과 rem
반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em 과 rem 라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다. 이번 포스팅에서는 em 과 rem 단위가 …
Source: www.daleseo.com
Date Published: 3/9/2021
View: 6432
CSS Units – W3Schools
CSS Units. CSS has several different units for expressing a length. Many CSS properties take “length” values, such as wth , margin , padding , font-size …
Source: www.w3schools.com
Date Published: 10/18/2022
View: 2135
CSS 단위 px pt em rem % 란 무엇이며 차이점은? – 그런하루
CSS에서 사용하는 단위는 font-size, text-indent, line-height, wth, height, padding 등 크기를 나타내는 값에 쓰인다. 크게는 절대 크기가 변하지 …
Source: soharu.tistory.com
Date Published: 5/18/2022
View: 5941
#15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 …
웹 디자이너를 위한 웹 코딩 강좌 열다섯 번째 시간입니다. 오늘도 CSS에서 반응형으로 코딩할 때 자주 사용하는 단위에 대해서 배워볼게요.
Source: designbase.co.kr
Date Published: 5/25/2021
View: 6299
주제와 관련된 이미지 css 단위
주제와 관련된 더 많은 사진을 참조하십시오 #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌. 댓글에서 더 많은 관련 이미지를 보거나 필요한 경우 더 많은 관련 기사를 볼 수 있습니다.
주제에 대한 기사 평가 css 단위
- Author: 디자인베이스
- Views: 조회수 9,155회
- Likes: 좋아요 284개
- Date Published: 최초 공개: 2021. 2. 14.
- Video Url link: https://www.youtube.com/watch?v=SmzghM3l228
rem, vh, vw, vmin, vmax, ex, ch
CSS Unit (CSS 7가지 단위)
우리가 잘 알고 있는 CSS기술을 사용하는 것은 쉽고 간단할 수 있지만 새로운 문제에 봉착하게 되면 해결하기 어려울 수 있습니다.
웹은 항상 성장,변화하고 있고 새로운 해결방안 역시 계속 성장하고 있습니다.
그렇기 때문에 웹 디자이너와 프론트 엔드 개발자가 습득한 노하우를 활용할 수 밖에 없다는 것을 잘 알고 있습니다.
특별한 방법을 알면서, 단 한 번도 사용하지 않더라도 언젠가 필요한 때가 오면 정확한 방법을 실무에 적용할 수 있다는 뜻이기도 합니다.
이 글에서는 이전엔 알지 못했던 몇 가지의 CSS 방법에 대해 알아보고자 합니다.
몇몇 수치 단위들은 픽셀이나 em과 비슷하지만 다른 방법에 대해 살펴보도록 합니다.
rem(root em)
여러분에게 조금 익숙할 수 있는 단위로 시작해 보자면 em은 현재의 font-size를 정의합니다.
일례로, body 태그에 em값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body의 폰트 사이즈에 영향을 받습니다.
html
Test< css body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } 여기, div에 font-size 를 1.2em 으로 지정했습니다. 이 예제에서는 14px을 기준으로 1.2배의 폰트 사이즈로 표현이 됩니다. 결과적으로 16.8px 의 크기가 됩니다. 그런데 여기 em으로 정의한 폰트 사이즈를 각각의 자식에 선언하면 어떤 일이 생길까요? 같은 CSS를 적용한 동일한 코드를 추가해보았습니다. 각각의 div는 각 부모의 폰트 사이즈를 상속받아 점점 커지게 됩니다. html
Test (14 * 1.2 = 16.8px)Test (16.8 * 1.2 = 20.16px)Test (20.16 * 1.2 = 24.192px)See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’http://codepen.io/jaehee/pen/NNZPoX/’&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;em 테스트&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by jaeheekim (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’http://codepen.io/jaehee’&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@jaehee&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=’http://codepen.io’&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.
이것은 어떤 경우엔 바람직하겠지만 대부분의 경우, 단순하게 단일 사이즈로 표현하기도 합니다.
이런 경우 바로 rem 단위를 사용하면 됩니다.
rem 의 “r”은 바로 “root(최상위)”를 뜻합니다.
최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html태그입니다.
css
html { font-size: 14px; } div { font-size: 1.2rem; }
이전 예제에서 만든 복잡한 단계의 세 div는 모두 16.8px 의 폰트 사이즈로 표현될 것입니다.
이 rem unit은 그리드 시스템에서도 유용하게 사용가능합니다.
rem은 폰트에서만 사용하진 않습니다.
예를 들어, 그리드 시스템이나 rem을 이용한 기본 폰트 사이즈 기반으로 만든 UI 스타일, 그리고 em을 이용해 특정 위치에 특별한 사이즈를 지정할 수도 있습니다.
보다 정확한 폰트 사이즈나 크기 조정을 가능하게 해 줄 것입니다.
css
.container { width: 70rem; /* 70 * 14px = 980px */ }
개념적으로 보면, 이 아이디어는 여러분의 콘텐츠 사이즈를 조절 할 수 있는 인터페이스 전략과 유사합니다. 그러나 모든 경우에 반드시 이런 방법을 따를 필요는 없습니다.
rem (root em) 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.
vh & vw (vertical height & vertical width)
반응형 웹디자인 테크닉은 퍼센트 값에 상당히 의존하고 있습니다.
하지만 CSS의 퍼센트 값이 모든 문제를 해결할 좋은 방법은 아닙니다. CSS의 너비 값은 가장 가까운 부모 요소에 상대적인 영향을 받습니다.
만약 타켓 요소의 너비값과 높이값을 뷰포트의 너비값과 높이값 에 맞게 사용할 수 있다면 어떨까요?
바로 vh 와 vw 단위가 그런 의도에 맞는 단위이고 vh 요소는 높이값의 100분의 1의 단위입니다.
예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이 되지요. 그와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다.
이 규칙에는 무궁무진한 사용방법이 있습니다.
예를 들면, 최대 높이값이나 그의 유사한 높이값의 슬라이드를 제작할때 아주 간단한 CSS만 입력하면 됩니다.
css
.slide { height: 100vh; }
스크린의 너비값에 꽉 차는 헤드라인을 만든다고 가정해 봅니다.
vw로 폰트 사이즈를 지정하면 쉽게 달성할 수 있습니다.
해당 사이즈는 브라우저의 너비에 맞춰 변할 것입니다. (브라우저 크기를 늘였다 줄였다 해보세요)
See the Pen vw (폰트사이즈 테스트 지정) by jaeheekim (@jaehee) on CodePen.
뷰포트 vw, vh 단위의 호환성은 caniuse.com에서 확인할 수 있습니다.
vmin & vmax
vh 와 vw 이 늘 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면 vmin 과 vmax 는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있습니다.
예를 들면 브라우저의 크기가 1100px 너비, 그리고 700px 높이일때 1vmin 은 7px이 되고 1vmax 는 11px이 됩니다.
너비값이 다시 800px이 되고 높이값이 1080px이 되면 vmin은 8px이 되고 vmax는 10.8px이 됩니다.
어때요, 이 값들을 사용할 수 있나요?
언제나 스크린에 보여지는 요소를 만든다고 가정해 봅니다.
높이값과 너비값을 vmin 을 사용해 100으로 지정합니다.
예를 들어 터치화면 양 변에 가득차는 정사각형 요소를 만들때는 이렇게 정의하면 됩니다.
css
.box { height: 100vmin; width: 100vmin; }
만약 커버처럼 뷰포트 화면에 보여야 하는(모든 네 변이 스크린에 꽉 차 있는) 경우에는 같은 값을 vmax로 적용하면 됩니다.
css
.box { height: 100vmax; width: 100vmax; }
알려드린 이 규칙들을 잘 조합해 활용하면 뷰포트에 맞는 매우 유연한 방식으로 사이즈 조절을 가능하게 할 수 있습니다.
뷰포트 단위: vmin, vmax의 호환성은 caniuse.com에서 확인할 수 있습니다.
vh : 1/100th of the height of the viewport. vw : 1/100th of the width of the viewport. vmin : 1/100th of the minimum value between the height and the width of the viewport. vmax : 1/100th of the maximum value between the height and the width of the viewport.
Remind : vw, vh, vmin, vmax
뷰포트(Viewport)를 기준으로 하는 길이(length) 값으로, 문서 또는 모바일 기기 에서 볼 수 있는 부분의 크기를 기준으로 크기를 설정합니다.
각 속성의 풀네임은 다음과 같습니다.
VW(Viewport Width) : 뷰포트 너비의 1% 길이와 동일합니다.
VH(Viewport Height) : 뷰포트 높이의 1% 길이와 동일합니다.
VMIN(Viewport Minimum) : 뷰포트 너비 또는 높이를 기준으로 하는 최소 값입니다.
VMAX(Viewport Maximum) : 뷰포트 너비 또는 높이를 기준으로 하는 최대 값입니다.
vmin, vmax 값은 뷰포트의 너비, 높이 길이 중 ‘작은’ 혹은 ‘큰’ 길이를 기준으로 값이 동적으로 설정됩니다.
예를 들어 1000 × 500 크기의 뷰포트가 있다고 했을 때 1vmin 값은 5px 이고, 1vmax 값은 10px로 계산됩니다.
크기가 1200 × 570 으로 변경되면 1vmin은 5.7px, 1vmax는 12px이 됩니다.
즉, 화면 크기에 상대적으로 변경되는 단위가 뷰포트 단위입니다.
참고로 IE 9-11 에서 vmax는 제대로 지원하지 못합니다. Edge 브라우저에서 온전하게 vmax를 지원합니다. IE 5.5 이상 제대로 뷰포트 단위를 지원하게 하려면 폴리필 vminpoly를 사용할 수 있습니다.
ex & ch
ex 와 ch 단위는 현태 폰트와 폰트 사이즈에 의존한다는 점에서 em 그리고 rem과 비슷합니다.
em과 rem과 다른 점은 이 두 단위가 font-family 에 의존한다면 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.
ch 단위, 또는 글꼴 단위는 제로 문자인 0의 너비값의 “고급 척도”로 정의됩니다.
흥미로운 의견은 에릭 마이어의 블로그에서 확인할 수 있습니다. 그러나 기본 컨셉은 monospace 폰트의 N 의 너비값을 부여 받았다는 것이며, width: 40ch; 는 40개의 문자열을 포함하고 있다는 뜻입니다.
이 특정 규칙은 점자 레이아웃에 기반하고 있지만, 이 기술의 가능성은 간단한 어플리케이션 그 이상으로 확장할 수 있습니다.
ex 단위의 정의는 “현재 폰트의 x-높이값 또는 em의 절반 값”이라고 할 수 있습니다. x-높이값 은 소문자 x의 높이값이기도 합니다.
폰트의 중간 지점을 알아내기 위해 자주 사용하는 방법입니다.
x-높이값; 소문자 x의 높이값 (자세한 것은 웹 타이포그래피의 해부학 링크를 참조하세요)
이 단위는 타이포그래픽에서 세밀한 조정을 할 때 많이 사용합니다.
예를 들어, 위첨자 태그인 sup 에게 position을 relative로 하고 bottom 값을 1ex라고 하면 위로 올릴 수 있습니다.
아래첨자 역시 비슷한 방법으로 아래로 내릴 수 있습니다.
브라우저는 위첨자와 아래첨자의 기본값을 vertical-align 으로 정의하고 있지만, 보다 정교한 사용법을 알고 싶다면 아래와 같이 작성할 수 있습니다.
css
sup { position: relative; bottom: 1ex; } sub { position: relative; bottom: -1ex; }
사용 가능 여부
ex는 CSS1부터 있던 단위였고, ch 단위는 아직 찾을 수 없습니다.
에릭 마이어의 블로그에 있는 CSS 단위와 값에서 보다 많은 상세 정보를 볼 수 있습니다.
마치며
여러분의 막강한 CSS 도구들의 무한한 확장과 지속되는 개발환경에 지속적으로 살펴보시기 바랍니다.
아마 특정 문제를 해결하기 위해 예상치 못한 해결방법으로 이 애매한 특정 단위들을 사용할 수도 있을 것입니다.
새로운 스펙들에 대해 시간을 투자해 보시기 바랍니다.
그리고 cssweekly와 같은 좋은 사이트에도 가입해서 지속적인 뉴스를 업데이트 받아보시기 추천합니다. 그리고 주간 업데이트에 가입하는 거 잊지 마세요.
무료 튜토리얼과 Tuts+의 웹디자인에서 나오는 다양한 자료들을 만날 수 있습니다.
Jaehee’s WebClub
[출처] envato-tuts+ :: http://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about–cms-22573
CSS 값 과 단위 – Web 개발 학습하기
여기서 이야기 할 세 번째 방식은 RGB 입니다. RGB 값은 — rgb() 함수입니다 — 이 값은 16진수 값과 거의 같은 방식으로 색상의 빨강, 녹색 및 파랑 채널 값을 나타내는 세 개의 매개 변수가 제공됩니다. RGB 와의 차이점은 각 채널이 2개의 16진수가 아니라 0 과 255 사이의 10진수로 표현되어 — 다소 이해하기 쉽다는 것입니다.
Let’s rewrite our last example to use RGB colors:
RGBA 색상을 사용할 수도 있습니다 — 이 색상은 RGB 색상과 정확히 같은 방식으로 작동하므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity) 를 제어합니다. 이 값을 0 으로 설정하면 색상이 완전히 투명해지는 반면, 1 이면 완전히 불투명하게 됩니다. 그 사이의 값은 다른 수준의 투명성을 제공합니다.
참고: 색상에 알파 채널을 설정하면 앞에서 살펴본 opacity 속성을 사용하는 것과 한 가지 중요한 차이점이 있습니다. 불투명도를 사용하면 요소와 그 안에 있는 모든 것을 불투명하게 만드는 반면, RGBA 색상을 사용하면 불투명하게 지정한 색상만 만들어집니다.
아래 예제에서 나는 색상 박스가 포함된 블록에 배경 이미지를 추가했습니다. 그런 다음 박스에 다른 불투명도 값을 갖도록 설정했습니다 — 알파 채널 값이 작을 때 배경이 더 잘 나타나는지 확인하십시오.
이 예에서는, 알파 채널 값을 변경하여 색상 출력에 어떤 영향을 미치는지 확인하십시오.
당신은 모를 수도 있는 CSS의 7가지 단위
Would you like to provide feedback (optional)?
Did you find this post useful?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Jonathan Cutrell Director of Technology at Whiteboard and Host of Developer Tea
I am the Director of Technology at Whiteboard, a digital interaction firm based in Chattanooga, Tennessee. I hold a masters degree in Digital Media from Georgia Tech. I write, teach, and talk about code and the things it can make possible.
CSS3 Units
© 2021 Ung-mo Lee
Hosted on GitHub Pages Using MarkSheet
In his heart a man plans his course, but the LORD determines his steps.
CSS 상대 단위 – em과 rem
반응형 웹디자인이 대두되면서 점점 많은 웹사이트들이 em 과 rem 라고 불리는 CSS 단위를 이용해서 스타일링이 되고 있습니다. 이번 포스팅에서는 em 과 rem 단위가 실제로 브라우저에서 어떻게 동작하는지 정확히 알고 좀 더 적재적소에 사용하는 방법에 대해서 알아보도록 하겠습니다.
상대 단위란?
상대(relative) 단위란 고정되지 않고 어떤 기준에 따라서 유동적으로 바뀔 수 있는 길이를 나타내는 단위입니다. 본 포스팅에서 다룰 em 과 rem 을 포함해 % , vw , vh 등이 대표적인 CSS의 상대 단위입니다.
반면 절대(absolute) 단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 예전부터 현재까지 많이 사용되는 px 와 pt 를 들 수 있고, cm 나 in 와 같은 실생활에서 많이 사용되는 단위들도 이 절대 단위에 범주에 속합니다.
쉽게 말해, 실생활에서 1cm 가 항상 1cm 인 것처럼, 1px 는 항상 1px (=0.02645833cm)이지만, 1em 이나 1rem 은 항상 고정된 길이를 나타나지 않고 대신 브라우저가 어떤 기준에 따라 계산을 하여 px 로 변환을 해줍니다. 따라서 그 기준이 무엇인지를 파악하는 것이 em 과 rem 을 정확히 이해하는데 핵심이 됩니다.
em과 rem의 공통점
뭐 적어도 px 나 pt 와 같은 절대 단위를 쓰는 것 보다는 나을테니라는 생각으로 많은 분들이 em 과 rem 을 혼용해서 사용하시는 것 같습니다. 사실 브라우저에서 이 두 단위가 같은 길이로 계산될 때가 상당히 많고, 둘 중에 뭐를 쓰든 큰 차이가 나지 않아서 그럴 수도 있을 것입니다.
em 과 rem 은 둘 다 CCS의 font-size 속성 값에 비례해서 결정되는 상대 단위입니다. 예를 들어, font-size: 16px 인 경우, 상대 단위는 브라우저에 의해서 다음과 같이 계산됩니다.
0.5em = 16 px x 0.5 = 8px
1em = 16 px x 1 = 16px
2em = 16 px x 2 = 32px
3em = 16 px x 3 = 48px
여기서 font-size 를 20px 로 늘릴 경우, 상대 단위도 다음과 같이 비례해서 증가되게 됩니다.
0.5em = 20 px x 0.5 = 10px
1em = 20 px x 1 = 20px
2em = 20 px x 2 = 40px
3em = 20 px x 3 = 60px
반대로 font-size 를 10px 로 줄일 경우, 상대 단위도 다음과 같이 비례해서 감소되게 됩니다.
0.5em = 10 px x 0.5 = 5px
1em = 10 px x 1 = 10px
2em = 10 px x 2 = 20px
3em = 10 px x 3 = 30px
위와 font-size 값에 증감에 비례해서 유동적으로 길이가 결정되고 싶은 속성에 em 이나 rem 단위를 사용해서 길이 지정을 해줄 수 있습니다.
em과 rem의 차이점
em 과 rem 단위의 기준은 font-size 속성 값이라고 했는데, 정확히 어디에 있는 font-size 속성 값인지에 따라 차이가 발생합니다. em 의 경우, 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 됩니다. 반면에 rem 에서 r 은 root , 즉 최상위 요소를 font-size 속성 값 의미합니다. HTML에서 최상위 요소는 입니다. 따라서 rem 경우, html 요소의 font-size 속성 값이 기준이 됩니다.
예를 들어, 다음과 같이 html 요소의 font-size 속성 값이 16px 이라고 가정해봅시다.
html { font-size : 16px ; }
그리고 다음과 같이 div 요소가 스타일링 된다면 width 속성의 값은 200px 이 됩니다. 왜냐하면 em 은 해당 요소의 font-size 에 비례해서 커지기 때문에 div 요소의 font-size 인 20px 에 10 을 곱해야 합니다.
div { font-size : 20px ; width : 10em ; }
하지만 다음과 같이 em 대신에 rem 단위를 이용해서 div 요소가 스타일링 된다면 width 속성값은 160px 이 됩니다. 왜냐하면 rem 은 html 요소의 font-size 가 16px 이기 때문에, 16px 에 10 을 곱해야 합니다.
div { font-size : 20px ; width : 10rem ; }
다시 말해, rem 단위를 사용하면 해당 요소의 font-size 속성 값은 전혀 중요하지 않게 됩니다.
font-size 상속괴 em 단위 계산
자 그럼 여기서 퀴즈! div 요소에서 font-size 속성을 제거하면 어떻게 될까요?
rem 의 경우 원래부터 해당 요소의 font-size 를 무시하기 때문에 달라질 게 없습니다.
div { width : 10rem ; }
하지만 em 을 사용할 경우, 약간의 상상력이 필요합니다. 왜냐하면 없는 font-size 속성 값을 고려해야 하기 떄문입니다. 어떤 요소에 font-size 속성이 정의되지 않은 경우 부모의 font-size 값을 그대로 상속받게 됩니다. 따라서, 아까 html 요소의 font-size 가 16px 가 div 요소의 font-size 값이 되고, 결국 width: 10em 값은 16px * 10 = 160px 로 계산됩니다.
div { width : 10em ; }
하지만 만약에 html 요소와 이 div 사이에 다른 요소들이 층층이 끼어 있으면 어떻게 될까요? (실제 이런 경우가 훨씬 많겠죠?) 예를 들어 header 요소가 이 둘 사이에 있고, 이 header 요소의 font-size 가 30px 이라면, 이 header 요소를 부모로 가지는 div 요소의 font-size 도 상속이 되어 30px 이되서 width 값을 300px 로 만들 것입니다. 이건 그나마 난데, 만약 이 header 요소의 font-size 가 절대 단위가 아닌 상대 단위를 사용하고 있다면 어떨까요? heaer 의 font-size 를 2rem 이라고 한다면 16px x 2 = 32px 로 계산될 것이고, div 요소의 font-size 도 32px 이되서 최종적으로 width 값이 320px 이 될 것입니다.
이 처럼, em 을 사용할 때는 font-size 가 html 요소부터 시작해 여러 상위 요소들을 거치면서 상속될 수 있기 때문에 실제 어떤 값으로 계산될지 예측하기가 복잡할 때가 있습니다.
그럼 em과 rem 중 어떤 걸?
CSS Units
CSS Units
CSS Units
CSS has several different units for expressing a length.
Many CSS properties take “length” values, such as width , margin , padding , font-size , etc.
Length is a number followed by a length unit, such as 10px , 2em , etc.
Example Set different length values, using px (pixels): h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
} Try it Yourself »
Note: A whitespace cannot appear between the number and the unit. However, if the value is 0 , the unit can be omitted.
For some CSS properties, negative lengths are allowed.
There are two types of length units: absolute and relative.
Absolute Lengths
The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.
* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.
Relative Lengths
Relative length units specify a length relative to another length property. Relative length units scale better between different rendering medium.
Tip: The em and rem units are practical in creating perfectly scalable layout!
* Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm.
Browser Support
The numbers in the table specify the first browser version that fully supports the length unit.
CSS 단위 px pt em rem % 란 무엇이며 차이점은?
▒ CSS 단위 px pt em rem % 란 무엇이며 차이점은?
CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰인다.
크게는 절대 크기가 변하지 않는 절대 단위와 상황에 따라 크기가 변하는 상대 단위로 나뉜다.
■ 절대단위
고정된 값을 출력하며 절대 크기가 변하지 않는다.
이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있다.
※ px (픽셀) 값을 주로 사용한다.
cm (센티미터) mm (미리미터) in (인치) px (픽셀) pt (포인트) pc (파이카)
■ 상대 단위
부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변한다.
반응형 웹사이트를 작업할 때 주로 사용한다.
※ em, rem, % 값을 주로 사용한다.
em 부모 요소의 크기의 영향을 받아 크기가 변함 rem 최상위 요소인 html요소의 크기의 영향을 받아 크기가 변함 (익스 9.0이상 부터 지원) % 부모 요소의 크기의 영향을 받아 크기가 변함 vw viewport width의 약자 / 80vw=”뷰포트 영역의 80%” (익스 9.0이상 부터 지원) vh viewport height의 약자 / 80vh=”뷰포트 영역의 80%” (익스 9.0이상 부터 지원) vmin 뷰포트의 최소값 / 설정한 viewport값에 따라 변함 (익스 12.0이상 부터 지원) vmax 뷰포트의 최대값 / 설정한 viewport값에 따라 변함 (익스 12.0이상 부터 지원)
em은 부모 크기에 영향을 받기 때문에 파악하기 쉽지 않을 수 있으며 미디어 쿼리 작성 시 여러 요소를 수정해야만 한다.
그러나 rem은 최상위 요소인 html의 요소의 영향을 받기 때문에 미디어쿼리 작성 시 이 요소의 크기 하나만 변경하면 나머지는 자동으로 변한다.
그래서 반응형 웹사이트를 제작할 때 rem을 주로 사용한다.
html {font-size:62.5%}로 설정하면
16px=1.6rem
18px=1.8rem
이런 식으로 사용하기 편하다.
* 픽셀/em/퍼센트/포인트를 계산해 주는 사이트 http://pxtoem.com
* rem을 계산해 주는 사이트 https://offroadcode.com/rem-calculator
예제파일↓
css_unit_Ex.html 0.00MB
키워드에 대한 정보 css 단위
다음은 Bing에서 css 단위 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.
이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!
사람들이 주제에 대해 자주 검색하는 키워드 #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌
- 디자인베이스
- 웹코딩
- 코딩
- css
- html
- css단위
- css강좌
- css기초
- css html
- html css기초
- css em
- css rem
- em rem
- vw vh
- css vw
- css vh
- css %
- css 반응형
#15 #반응형을 #위한 #css #단위 #이해하기 #%, #em, #rem, #vw, #vh #- #웹 #코딩 #강좌
YouTube에서 css 단위 주제의 다른 동영상 보기
주제에 대한 기사를 시청해 주셔서 감사합니다 #15 반응형을 위한 css 단위 이해하기 %, em, rem, vw, vh – 웹 코딩 강좌 | css 단위, 이 기사가 유용하다고 생각되면 공유하십시오, 매우 감사합니다.
