픽셀을 %로 바꾸기 - 가변그리드
Front-End/반응형 웹 2019. 5. 29. 23:02가변 그리드 공식
가변 그리드라는 기술은 정해져 있는 공식에 의해 정확한 가변 크기의 박스를 만드는 기술입니다.
| (가변 크기로 만들 박스의 가로 너비 ÷ 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) X 100 = 가변 크기의 % 값 |
예를 들어 노란 박스를 감싸고 있는 테두리 박스의 가로 너비가 960px 이고, 가변 크기로 만들 박스의 가로 너비가 300px 이라면 노란 박스를 가변
크기로 만들기 위한 공식은 다음과 같습니다. (곱하기 100은 백분율을 표현하기 위함)
| (300px ÷ 960px) X 100 = 31.25% |
서로 다른 크기의 박스를 가변 크기로 변환하기
-예제-
|
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
|
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{ //wrap 박스는 가장 상위의 박스이므로 가변 그리드 계산기 기준이 될 박스가 없기 때문에 (가장크기 때문)
width:90%; //임의로 설정한 값인 90%로 설정
/*960px*/
height: 500px;
margin:0 auto;
border:4px solid #000;
}
.container{
width:93.75%;
/*900px ÷ 960px*/ //공식을 주석으로 적어놓으면 나중에 코드를 확인할 때 편하다.
height: 492px;
margin:0 auto;
border: 4px solid #000;
}
.container div{
display: inline-block; //자식 박스의 가변 크기 설정, inline-block는 display 속성의 값 중 inline 속성값처럼
height: 100%; //요소들이 한 줄로 보이고, <block> 태그에 적용할 수 있는 속성들도 사용할 수 있는 속성값입니다.
}
.container div:first-child{
width:33.3333333%;
/*300px ÷ 900px*/
background:#e75d5d;
}
.container div:first-child+div{
width:66.66666667%;
/*600px ÷ 900px*/
background: #2dcc70;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container">
<div></div><div></div>
</div>
</div>
</body>
</html>
|
cs |
-웹 사이트의 요소에 마진과 가변 패딩 이해하기-
마진이란? 어떠한 물체와 물체 사이의 빈 공간을 말합니다. 웹 사이트를 만들 때도 이러한 여백이 필요합니다. 예를 들어 웹사이트 구조를 보면 사이 사이 벌어져 있는 공간들이 잇는데, 이것을 여백 또는 간격이라고 합니다. 패딩(두께)이란? 면과 면 사이가 물체나 공간 등으로 채워져 있는 것을 말하며, 속 또는 충전재라고도 합니다. 우리가 겨울에 입는 패딩 점퍼의 면과 면 사이가 오리털로 채워져 있듯이 패딩은 면과 면 사이에 어떠한 것이 채워져 있는 상태를 말합니다. 웹 사이트에서도 특정 요소에 두께를 만들거나 빈 공간 또는 간격을 만들 때 마진과 패딩이 사용 됩니다. |
반응형 웹사이트에서는 모든 요소가 가변적이어야 합니다.
기존의 고정되어 있는 마진 (여백) 을 변할 수 있게 설정해줘야 합니다.
가변 마진은 가변 그리에서 사용했던 공식과 같습니다.
| (가변 마진을 적용할 마진값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 마진값 |
-가변 패딩을 적용하는 두 가지 방법-
-기본 방법-
가변 그리드 공식을 이용해서 가변 패딩으로 적용
| (가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값 |
-제한적인 조건이 있을 때-
박스에 패딩을 적용하더라도 박스의 정해진 너빗값 이상이 되지 말아야 하는 경우에 이용하는 방법입니다.
| (가변 패딩을 적용할 패딩값 ÷ 적용할 박스를 감싸고 있는 박스의 가로 너비) x 100 = 가변 패딩 % 값 |
-가변 패딩 예제-
|
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
|
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{ /*wrap라는 아이디를 가진 태그를 만든다.*/
width:90%; /*너비는 90%로 한다.*/
/*960px*/
height:500px; /*높이는 500px로 입력해 스타일을 지정*/
margin:0 auto; //마진값과 선값을 입력한다.
border:4px solid #000;
}
#wrap div{
width:31.25%; //300px를 가변 크기로 설정한다.
/*300px ÷ 960px*/ //공식을 이용해 31.25값을 얻음
display: inline-block;
}
#wrap div:first-child{ //자식박스 중 첫번째 박스에 50px크기의 가변 패딩을 적용, 50px ÷ 960px 공식을 이용해서
padding:50px 5.208333%; //얻은 값을 패딩값으로 설정, 왼쪽과 오른쪽 패딩값이 실제로는 50+50이 되서 총 100px크기가 된다.
/*50px ÷ 960px*/
background:#1f518b;
}
#wrap div:first-child+div{ //자식박스 중 두번째 박스에 130px 크기의 가변 패딩을 적용한다. 130px ÷ 960px 공식을 이용해서
padding:130px 13.541666%; //얻은 값을 패딩값으로 설정, 그러면 왼쪽과 오른쪽 패딩값이 130+130이 되어 총 260 크기의
/*130px ÷ 960px*/ //가변 패딩이 적용됨
background: #f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<div></div><div></div>
</div>
</body>
</html>
|
cs |
-가변 폰트 이용-
기존의 웹사이트를 개발할 때는 고정 단위인 픽셀(px)를 많이 사용했습니다.
하지만 픽셀은 모니터의 해상도를 기준으로 하기 때문에 화면이 확대되거나 축소되는 환경에는 맞지 않습니다.
웹 페이지를 표시하는 모니터 해상도에 따라 픽셀 크기가 달라지기 때문입니다.
따라서 정확하게 글자 크기를 나타내려면 상대적인 단위인 em을 사용하는 것이 좋습니다.
em의 단위는 대문자 M의 너비를 1em으로 표현한 것으로, 16px이 1em에 해당합니다.
반응형 웹에서 글자 크기를 상대적인 단위로 사용할 때 상속 문제를 해결해주는 방법을 가변 폰트라고 합니다.
가변 폰트는 지금까지 이용한 가변 그리드 공식을 이용해서 적용할 수 있다.
| (가변 폰트를 적용할 글자 크깃값 ÷ 적용할 요소를 감싸고 있는 요소의 글자 크깃값) = 가변 폰트값 |
-rem 단위-
em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 경우 자식 박스에게 글자 크기가 상속됩니다.
그래서 자식 박스의 글자 크기를 지정할 때 공식을 이용하여 글자 크기를 지정해야 하는 등 복잡해집니다.
rem 단위는 최상위, 즉 웹 문서의 시작인 <html>, </html> 태그를 기준으로 하기 때문에 상속 문제가 발생하지 않아
유용하게 사용할 수 있는 단위 중 하나입니다.
- vw(viewport width) 단위 -
vw 단위는 웹 브라으저의 너비를 100을 기준으로 하여 크기를 결정하는 단위입니다.
| (vw 단위를 적용할 글자 크깃값 x 브라우저의 너빗값) ÷ 100 = 크깃값 |
- vh(viewport height) 단위 -
vh 단위는 웹 브라우저의 높이를 100을 기준으로 하여 크기를 결정하는 단위입니다.
| (vh 단위를 적용할 글자 크깃값 x 브라우저의 높잇값) ÷ 100 = 크깃값 |
- vmin (viewport minimum) 단위 -
vmin 단위는 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정하는 단위입니다.
만약 글자 크기를 5vmin으로 설정하면 글자 크기는 웹 브라우저의 너비, 높이 중 작은 쪽을 100을 기준으로 해서 결정합니다.
- vmax (viewport maximum) 단위 -
vmax 단위는 웹 브라우저의 너비와 높이 중 큰 쪽을 기준으로 하여 크기를 결정하는 단위입니다.
만약 글자 크기를 5vmax로 설정하면 글자 크기는 브라우저의 너비와 높이 중 큰 쪽을 100으로 하고, 기준으로 해서 결정합니다.
- width와 max-width의 차이점 - width 속성과 max-width 속성은 비슷해 보이지만 분명한 차이가 있습니다. width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만, max-width 속성은 속성값을 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않습니다. |
- 상/하 퍼센트 패딩값의 기준 - 상/하 퍼센트 패딩 값은 해당 요소의 부모 요소 가로 너비를 기준으로 합니다. 보통은 부모 요소의 높이를 기준으로 할 것으로 생각하지만, CSS 스펙을 살펴보면 상/하 퍼센트 패딩 값은 부모 요소의 너빗값을 기준으로 한다고 명시되어 있습니다. 헷갈릴수도 있으니 반드시 기억!! |
아래 책은 제가 공부할때 활용했던 책으로 추천드리는 책이니 한번씩 읽어보시는것을 추천드립니다!! ㅎㅎ
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'Front-End > 반응형 웹' 카테고리의 다른 글
| 미디어 쿼리와 뷰포트 (0) | 2019.05.30 |
|---|---|
| 웹 호스팅 설정 정보 (0) | 2019.05.28 |
| 반응형 웹 기본 개념 이해하기 (0) | 2019.05.27 |
| 반응형 웹 학습 일정 (0) | 2019.05.22 |