padding의 개념
padding은 margin과는 반대 개념이다.
2023.07.29 - [TIL/CSS] - margin 속성 사용법과 collapsing amrgins 현상
margin이 경계의 바깥 부분을 의미했다면 padding은 경계의 안쪽 부분을 의미한다.
html {
background-color: blueviolet;
}
body {
background-color: aqua;
margin: 0;
}
div {
height: 150px;
width: 150px;
background-color: white;
}
body 태그의 margin 속성에 0이라는 값을 주었을 때의 모습이다. 위쪽, 오른쪽, 왼쪽이 모두 html 경계와 맞닿아있다. 이 때 body 태그에 padding 속성을 주면 어떻게 될까?
html {
background-color: blueviolet;
}
body {
background-color: aqua;
margin: 0;
padding: 20px;
}
div {
height: 150px;
width: 150px;
background-color: white;
}
body 태그에 padding: 20px 이라는 속성과 값을 부여했다. 그 결과 흰색으로 표현되는 div 영역이 body의 안쪽으로 들어간 형태로 표현이 되는 것을 볼 수 있다.
id로 html에 css 주입하는 방법
위에서까지는 계속해서 html 태그명을 이용하여 css를 주입해주었다. 만약 여러개의 div 태그를 만들고 각각의 태그들마다 다른 색과 다른 크기를 주고 싶다면 어떻게 해야할까? 그리고 각 div 태그들은 10px 만큼의 padding이 있었으면 좋겠다고 생각한다면?
<head>
<style>
html {
background-color: blueviolet;
}
body {
background-color: aqua;
margin: 20px;
padding: 20px;
}
div {
padding: 10px;
}
#first {
background-color: orange;
height: 200px;
width: 200px;
}
#second {
background-color: blue;
height: 100px;
width: 100px;
}
#third {
background-color: black;
height: 50px;
width: 50px;
}
#fourth {
background-color: brown;
height: 25px;
width: 25px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth">
</div>
</div>
</div>
</div>
</body>
방법은 바로 id를 이용하는 것이다. 위의 예시는 div태그 안에 다른 div 태그를 넣는 방식으로 총 4개의 div 태그를 만들고 각 div 태그마다 id 값을 부여한 html과 css를 보여준다. 각 div 태그에는 first, second, third, fourth의 id값이 부여되어있다. style 태그 안에서는 html, body, div 태그에 css 속성을 부여했다. 뿐만 아니라 html의 각 id값에 "#" 문자를 붙여 해당 id에만 적용되는 css를 따로 표시하였다.
결국 first 라는 id를 가진 div 태그는 해당 태그에 적용되는 padding: 10px이라는 css를 적용받는다. 거기에 #first 로 정의되어진 css도 적용되어 최종적으로 body 태그로부터 20px 만큼 안쪽으로 들어간 상태에서 높이와 너비 각 200px인 orange 색의 상자가 만들어진다.
second의 경우 first 태그로부터 10px 만큼 안쪽으로 들어간 후 높이와 너비 100px의 blue색의 상자가 된다.
third, fourth의 경우에도 마찬가지로 해당 태그의 바깥 div 태그로부터 10px 만큼 안으로 들어간 후 각각의 크기와 색에 맞는 상자로 이루어지게 된다.
'TIL > CSS' 카테고리의 다른 글
| inline-block의 사용과 문제점 (0) | 2023.07.28 |
|---|---|
| inline 요소에서의 padding과 margin (0) | 2023.07.25 |
| 모든 태그에 css 속성을 적용하는 방법 (0) | 2023.07.24 |
| border와 border-style (0) | 2023.07.23 |
| margin 속성 사용법과 collapsing margins 현상 (0) | 2023.07.21 |
| display속성으로 block, inline 제어 (0) | 2023.07.20 |
| css 개념 정리 (0) | 2023.07.19 |
| css를 html에 적용하는 방법 (0) | 2023.07.12 |
댓글