새소식
반응형
WEB/CSS
[CSS] CSS padding을 통한 내부 여백 부여하기
- -
반응형
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>
물론 결과도 기존과 동일하게 아래와 같이 나타난다.
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS Pseudo-Elements(가상선택자) ::before / ::after (0) | 2021.04.16 |
|---|---|
| [CSS] CSS Attribute Selectors(속성 선택자) 알아보기 (0) | 2021.03.28 |
| [CSS] CSS margin 속성을 통한 외부의 여백 / 가운데 정렬 방법 (0) | 2021.03.26 |
| [CSS] CSS Combinators Selector(선택자) (자식 형제 선택자 종류) (0) | 2021.03.23 |
| [CSS] CSS top: 50% 와 bottom: 50% 의 차이점 알아보기. (0) | 2021.03.18 |
Contents
소중한 공감 감사합니다