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

가변 패딩(padding)주기

가변패딩 공식 = (패딩값 % 부모박스 가로너비) * 100



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
<!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>
    /* 전체박스 */
    #wrap {
        width: 90%;
        heigth: 500px;
        margin: 0 auto;
        border: 4px solid #00f;
    }
    /** 글자 */
    #wrap p {
        width: 52%;
        /* 가변패딩 공식 = (패딩값 % 부모박스 가로너비) * 100 */
        padding: 40px 4%;    /* 위아래 40px 왼오른 4% */
        margin: 0 auto;
        background: #f7e041;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <p>모든 국민은 신체의 자유를 가진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 공무원의 직무상 불법행위로 손해를 받은 국민은 법률이 정하는 바에 의하여 국가 또는 공공단체에 정당한 배상을 청구할 수 있다. 이 경우 공무원 자신의 책임은 면제되지 아니한다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다. 군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련 등 직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상 외에 국가 또는 공공단체에 공무원의 직무상 불법행위로 인한 배상은 청구할 수 없다. 대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다. 모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.</p>
</div>
</body>
</html>
cs



결과

화면크기에 상관없이 패딩너비가 4%를 유지한다

 


저작자표시 (새창열림)

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

반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 마진(margin)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
반응형웹 미디어쿼리(media) 와 뷰포트(viewport)  (0) 2016.08.21

가변 마진(margin)주기

가변마진 공식 = (마진값 % 부모박스 가로너비) * 100



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
<!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>
    /* 전체박스 */
    #wrap {
        width: 90%;
        height: 500px;
        margin: 0 auto;
        border: 5px solid #00f;
    }
    /* 부모박스 */
    .container {
        width: 93.75%;
        height: 100%;
        margin: 0 auto;
    }
    /* 자식박스 */
    .container div {
        display: inline-block;
        height: 100%;
    }
    /* 자식박스 - 왼쪽 */
    .container div:first-child {
        width: 40%;
        /* 가변마진 공식 = (마진값 % 부모박스 가로너비) * 100 */
        margin-right: 20%;
        background: #e75d5d;
    }
    /* 자식박스 - 오른쪽 */
    .container div:last-child {
        width: 40%;
        background: #2dcc70;
    }
    </style>
    <title>Insert title here</title>
</head>
 
<body>
<div id="wrap">
    <div class="container">
        <!-- 태그를 붙여써야 박스가 붙어서 보인다 안그러면 약간의 여유너비을 줘야함 -->
        <div></div><div></div>
    </div>
</div>    
</body>
</html>
cs



결과

화면크기에 상관없이 마진너비가 20%를 유지한다


저작자표시 (새창열림)

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

반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21
반응형웹 가변 패딩(padding)주기  (0) 2016.08.21
반응형웹 가로너비를 1대2로 나누기  (0) 2016.08.21
반응형웹 미디어쿼리(media) 와 뷰포트(viewport)  (0) 2016.08.21
안드로이드 안드로이드 버전, SDK(API)버전, 빌드버전 가져오기  (0) 2016.08.21

+ Recent posts

티스토리툴바