2021-03-27
CSS에서의 padding 속성은 정의된 테두리 내에서 요소의 콘텐츠 주위에 공간을 생성하는 데 사용된다. CSS를 사용하면 요소의 내부의 여백을 조절 할 수 있으며, 요소의 각 측면 위 / 오른쪽 / 아래 / 왼쪽에 패딩을 설정하는 속성이 있다.
- padding(top / right / bottom / left)
앞서 말했듯이 위아래 / 좌우 영역에 각각 padding 내부 여백을 부여할 수 있으며, 아래는 [padding-left: 30px; padding-top: 30px;] 와 같이 내부 여백 옵션 30px을 부여하는 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{/*body에 있는 모든 여백들을 제거 */
padding: 0px;
margin: 0px;
}
#area1{
width: 500px;
height: 300px;
background-color: skyblue;
}
#area2{
width: 250px;
height: 150px;
background-color: gray;
padding-left: 30px;
padding-top: 30px;
}
</style>
</head>
<body>
<div id="area1">
Area1
<div id="area2">Area2</div>
</div>
</body>
</html>
아래의 이미지를 보자. 기존의 div(Area2) 텍스트를 확인해보면 위와 왼쪽에 30px씩 여백이 생겨 그만한 공간만큼 텍스트가 밀려난 것을 확인할 수 있다.
- padding
padding-xxx와 같은 방법으로 여백을 부여하는 방법도 있지만 단순 padding 속성 자체만 사용해서도 각 영역에 내부 여백을 부여할 수 있다. padding이 받을 수 있는 매개 값의 의 형식을 아래와 같으며, 3가지의 방법이 있다.
* padding: 'Top'px 'RIGHT'px 'BOTTOM'px 'LEFT'px
-> 위 / 오른쪽 / 아래 / 왼쪽 순으로 픽셀값 부여
-> ex) padding: 1px 1px 1px 1px;
* padding: 'Top'px ('LEFT/RIGHT')px 'BOTTOM'px
-> 위 / (좌우하나의 값) / 아래 픽셀 값 부여
-> ex) padding: 1px 1px 1px;
* padding: '(Top/BOTTOM') px ('LEFT/RIGHT') px
-> (위아래 하나의 값) / (좌우하나의 값)
-> ex) padding: 1px 1px;
기존의 [padding-left: 30px; padding-top: 30px;]으로 부여한 내부 여백 값을 단순 padding 만으로 나타내면 코드상으로 아래와 같아진다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{/*body에 있는 모든 여백들을 제거 */
padding: 0px;
margin: 0px;
}
#area1{
width: 500px;
height: 300px;
background-color: skyblue;
}
#area2{
width: 250px;
height: 150px;
background-color: gray;
padding: 30px 0px 0px 30px;
}
</style>
</head>
<body>
<div id="area1">
Area1
<div id="area2">Area2</div>
</div>
</body>
</html>
물론 결과도 기존과 동일하게 아래와 같이 나타난다.