가변 패딩(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 |