가변크기단위 / em, %, rem, vw, vh, vmin, vmax

3869 단어 vmax&&remvminvhvw

px 같은 고정크기 단위가 아닌 주변의 font-size를 기준으로 변하는 단위가 있다!
하나씩 알아보자.

em

간혹 1em, 2em 보일 때가 있었다. 배수를 뜻하는 가변크기 단위다.
⭐ 기준 : 부모의 글자크기

<style>
        div {
            font-size: 3em;
        }
        p {
            font-size: 2em;
        }
    </style>
</head>
<body>
    <div>
        hello lion
    </div>
    <p>
        hello tiger 
    </p>
</body>

출력

(부모의 크기값 * 자식의 em 값) = 자식이 가지게 될 크기 값
em단위가 적용된 div와 p의 부모는 body다.

body에 font-size가 적용되지 않아 기본사이즈인 16px을 기준으로
p는 16*2, div는 16*3이 적용된 결과다.

div > div > div 이런식으로 레이아웃이 짜지면
16 * 3 * 3 * 3의 결과가 나온다.

%

100%는 값 1이다.
⭐ 기준 : 부모의 글자크기
부모가 20px이라 할 때 font-size: 50% 로 적용하면 얼마일까요?
네 10px입니다. 쉽죠?

vw / vh

나는 보여지는 웹상 화면을 기준으로 정하고 싶은데?!
그렇다면 당신은 vw / vh를 쓰셔야 합니다.
화면비 백분율 단위구요 사용해볼까요?

div {
	width : 50vw;
    heigh : 100vh;
    }

이런식으로 쓰면 된다! %를 붙이지 않아도 백분율이라는 사실 조심!

v-min / v-max

vmin : 브라우저 창의 높이와 너비중 더 작은 값을 기준으로 백분율차지
vmax : 브라우저 창의 높이와 너비중 더 큰 값을 기준으로 백분율차지

! 참고링크
https://webclub.tistory.com/356



+ 추가적으로 다른 블로그에서 본 글

상대 크기 단위를 사용해라.

CSS에서 픽셀 단위 크기를 사용하는 것은 더 이상 권장되지 않습니다.

레티나 디스플레이와 4K 이상의 화면이 서서히 자리를 잡아가고, 모바일 화면과 반응형 웹 지원이 필수가 되면서 다양한 ppi(Pixel Per Inch)를 가지는 기기 지원이 CSS 작성의 필수 요소가 되어가고 있습니다.

픽셀 단위인 px 표시보다는 상대 크기 단위인 em, rem 단위를 사용해야 하고, 레이아웃 크기도 vw, vh와 같은 상대 비율을 적극적으로 사용하는 것이 좋습니다.

특히 문자와 관련된 속성들은 반드시 상대 크기 단위를 사용해야 하고, 내부 요소의 배치 크기, 여백과 같은 요소들에서도 상대 크기 단위를 사용하는 것이 좋습니다.
출처: https://blogpack.tistory.com/997?category=804108

/ 지금은 픽셀사용이 훨씬 익숙한데 상대크기도 써봐야곘다!

DOM TREE 구조 이해하기
Day 08. 선택자 우선순위, 가변크기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage