방법1: (가변 패딩을 적용할 패딩값)/(적용할 박스를 감싸고 있는 박스의 가로 너비) X 100 = (가변 패딩값)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 100%;
}
#wrap {
width: 90%;
margin: 0 auto;
background-color: yellow;
height: 500px;
}
p {
padding: 40px 4.166666666666667%;
}
</style>
</head>
<body>
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eius labore perferendis quia, cumque recusandae. Ipsam voluptatem reiciendis aliquid, illo illum est unde placeat iure nobis
ratione soluta atque aut!Quo, placeat. Accusantium autem error soluta architecto labore quidem, eius aliquid? Molestiae, assumenda ratione labore, architecto veritatis obcaecati iure cumque
quo maxime reiciendis nisi iusto harum consectetur earum perspiciatis fugiat.
</p>
</div>
</body>
</html>
방법 2: p태그 내용물이 width 600px을 넘지 않으면서 양쪽에 40px의 가변패딩 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 100%;
}
#wrap {
width: 90%;
margin: 0 auto;
border: 2px solid black;
}
p {
width: 54.16666666666667%;
padding: 40px 4.166666666666667%;
margin: 0 auto;
background-color: yellow;
}
</style>
</head>
<body>
<div id="wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia eius labore perferendis quia, cumque recusandae. Ipsam voluptatem reiciendis aliquid, illo illum est unde placeat iure nobis
ratione soluta atque aut!Quo, placeat. Accusantium autem error soluta architecto labore quidem, eius aliquid? Molestiae, assumenda ratione labore, architecto veritatis obcaecati iure cumque
quo maxime reiciendis nisi iusto harum consectetur earum perspiciatis fugiat.
</p>
</div>
</body>
</html>
'Archived > 반응형' 카테고리의 다른 글
| 반응형 웹#5 px를 %로 바꾸기: 가변폰트 (0) | 2019.11.02 |
|---|---|
| 반응형 웹 #03 px를 %로 바꾸기(1) (0) | 2019.11.02 |
| 반응형 웹 #2 기본 개념 이해(2) (0) | 2019.11.02 |
| 반응형 웹 #1 기본 개념 이해(1) (0) | 2019.11.02 |
