em, rem, vw, vh, vmin, vmax 

em : 부모 font-size를 상속받음

rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨

vw : 브라우저너비의 해당 %

vh : 브라우저높이의 해당 %

vmin : 브라우저 너비와 높이중 짧은쪽의 해당 %

vmax : 브라우저 너비와 높이중 큰쪽의 해당 %



html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    p {
        margin: 0;
        padding: 0;
        font-size: 2em;
    }
    /* rem : 부모 font-size를 상속받지 않고 2em 으로 표시됨 */
    p span:first-child {
        font-size: 2rem;
    }
    /** em : 부모 font-size를 상속받음 */
    p span:last-child {
        font-size: 2em;
    }
    
    /** 브라우저 비율에 따라서 */
    p.vw {
        /* 5vw : 브라우저너비의 5% */
        font-size: 5vw;
    }
    p.vh {
        /* 5vh : 브라우저높이의 5% */
        font-size: 5vh;
    }
    p.vmin {
        /* 5vmin : 브라우저 너비와 높이중 짧은쪽의 5% */
        font-size: 5vmin;
    }
    p.5vmax {
        /* 5vmax : 브라우저 너비와 높이중 큰쪽의 5% */
        font-size: 5vmax;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <p>
        (부모) 단위 = 2em;
        <br/>
        <span>
            (자식) 단위 = 2rem;
        </span>
        <br/>
        <span>
            (자식) 단위 = 2em;
        </span>
    </p>
    <p class="vw">
        단위 = 5vw
    </p>
    <p class="vh">
        단위 = 5vh
    </p>
    <p class="vmin">
        단위 = 5vmin
    </p>
    <p class="vmax">
        단위 = 5vmax
    </p>
</div>
</body>
</html>
cs



결과

 



저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21

+ Recent posts

티스토리툴바