티스토리 뷰
가변 그리드 레이아웃 - 1
px 단위의 박스를 % 단위로 바꾸는 것
가변 그리드 공식
(가변 크기로 만들 박스의 가로 너비px / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비px) * 100
= 가변 크기의 % 값
HTML
<!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>
</head>
<body>
<div id="wrap">
<div class="container">
<div></div><div></div>
</div>
</div>
</body>
</html>
브라우저 width : 1920px
wrap width : 1440px; ->가변 -> (1440/1920)*100 = 70%;
container width: 1350px -> 가변 -> (1350/1440)*100 = 93.75%
CSS
*{margin:0; padding:0;}
#wrap{
width:70%;
/*1440px*/
height:500px;
margin:0 auto;
border:4px solid #000;
}
.container{
width:93.75%;
/*1350px*/
height:492px;
margin:0 auto;
border:4px solid #000;
}
.container div {
display: inline-block;
height:100%;
}
.container div:first-child {
width:62.96296296296296%;
/*850px*/
background:#e75d5d;
}
.container div:first-child + div{
width:37.03703703703704%;
/*500px*/
background:#2dcc70;
}
wrap이란 id를 가진 최상위 박스는 임의의 값으로 너빗값을 지정합니다.
(디자인 단계에서 지정해서 하면 된다...)
이해가 잘 안되네...ㅠㅠ
(참고 : http://ccuram.tistory.com/26)
- Total
- Today
- Yesterday
- Resources
- instant
- sqldeveloper
- import
- spring
- Semantic
- 디스크 없음
- react
- pom.xml
- dataSource
- 디렉터리
- root-context.xml
- mysql
- vscode
- servlet-context.xml
- clss
- create-react-app
- mybatis-spring
- postman
- web.xml이란?
- 설치
- cordova
- Oracle
- Get
- Window10
- Connection-Pool
- jUnit
- mybatis
- php
- install
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |