CSS

크기(또는 거리)를 나타내는 값의 단위

개발자잉다 2021. 12. 11. 17:02

가변 크기 : em, rem, ex, vw, vh, vmin, vmax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="top">

    </div>
    <div class="mid">

    </div>
    <div class="bottom">

    </div>
</body>
</html>

나는 .top요소를 브라우저 화면에 100%꽉 채우고 싶다.

 

.top{
    height: 100%;
}

그래서 위 화면과 같이 height를 100%주어도 생각처럼 화면을 꽉 채우지 않고 그대로이다.

왜냐하면 %는 부모에 종속되어 있기 때문인데, 부모요소 height크기에 기준해서 %를 계산하기 때문이다.

 

그래서 body에 height:100%를 주어보았지만 여전히 똑같다

body는 body의 부모인 html을 기준으로 100%를 계산하기 때문이다.

그래서 최상위 요소인 html까지 height:100%;를 설정해야한다.

 

.top, .mid, .bottom{
    border: 1px solid red;
}

html, body{
    height: 100%
}

.top{
    height: 100%;
}

이제야 화면에 꽉 찰 수 있게 되었다.

 

CSS3의 방법으로 화면에 꽉 채우기_vh,vw단위 사용

 

vh  : viewport기준의 height비율이다.

100vh하게 되면 화면의 높이 100%를 의미한다.

->상위 요소에 일일이 100%의 height를 줄 필요가 없다.

 vw : viewport기준의 width비율이다.

100vw하게 되면 화면의 너비 100%를 의미한다.

->상위 요소에 일일이 100%의 width를 줄 필요가 없다.

 

 

vmin, vmax단위 사용

vmax : viewport의 최대 너비

vmin : viewport의 최대 너비

즉, 만약 내가 height : 50vmax로 설정했다면

 

현재 화면(viewport)의 넓은면을 기준으로 50%를 계산해서 표현한다.

반대로 height: 50vmin으로 설정했다면

현재 화면(viewport)의 좁은면을 기준으로 50%를 계산해서 표현한다.

 

font-size와 관련된 가변크기 단위

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다.

em  : em 의 개념은 기준이 되는 값을 지정된 배수로 변환해 표현한 크기를 의미합니다. 여기서 기준이 되는 값이란 현재 스타일 지정 요소의 font-size 값을 의미합니다.

예를 들어 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em 은 32px 을 의미합니다.

div { font-size: 16px; }
div { 
	font-size: 1.5em; /* 24px */
	margin: 2em /* 32px */
	padding: 1.25em /* 20px */
}

rem : rem은 em과 같은 뜻이다. 다만 차이점은 기준이 되는 값이 다르다는 것이다.

rem 은 최상위 태그의 font-size 값이 기준이며, em 은 현재 요소의 font-size 값이 기준이라는 것입니다.

만약 em 을 사용해 스타일을 지정한 요소에 따로 font-size 값이 지정되지 않았다면, 해당 요소는 부모요소로 부터 font-size 값을 상속(inherit) 받을 것이며, em 은 그 상속 받은 값을 기준으로 삼게 됩니다.

 

예를 들어 이와 같은 경우를 생각 해봅시다. 최상위에 html 태그가 있고, 그 밑에 body 태그로 본문 영역이 표시 되며, container 라는 클래스를 가진 div 요소 하위에 content1 과 content2 라는 클래스의 div 요소가 자리 잡고 있습니다.

html { font-size: 16px; }
body { font-size: 2em; }
div.container { font-size: 2em; }
div.content1 { font-size: 2rem; }
div.content2 { font-size: 2em; }

이 경우 content1 의 font-size 는 32px 이지만, content2 의 font-size 는 16px * 2 * 2 * 2 이므로 128px 로 지정됩니다.

 

고정 크기 : in, px, pt, pc, cm, mm

cm : 실세계의 척도

예를들어 실제로 2cm의 크기의 line을 인쇄하고 싶으면 단위를 cm로 하면 된다.

실세계의 단위를 기준으로 표시된다. (px는 화면 기준으로 3px를 인쇄하면 cm와 다른 단위로 나온다)