요소에 여백 넣기
HTML 요소간 너무 붙어있으면 웹페이지가 답답해 보일 수 있고, 너무 떨어져 있으면 웹페이지가 텅 비어 보일 수 있습니다.
그렇다면 요소간 여백을 조절하려면 어떻게 해야 할까요? 여백을 조절할 때는 앞에서 배운 margin
과 padding
를 사용합니다.
- margin: 요소의 주변(바깥) 여백을 조정하는 데 사용합니다. 여백은 요소 주위의 빈 공간을 말하는데, 비유하자면 "요소 주변에 빈 자리"라고 생각하면 도움이 됩니다. 마치 책과 책 사이에 빈 공간을 두는 것과 같습니다.
margin은 요소 주위에 여백을 추가하거나 제거하여 요소들 사이의 간격을 조절할 수 있습니다. 여백은 픽셀(px), 백분율(%) 등의 단위로 지정할 수 있습니다.
- padding: 요소의 내부(안쪽) 여백을 조정하는 데 사용합니다. 내부 여백은 요소의 내부에 있는 빈 공간을 말하는데, "요소 내부에 빈 자리"라고 생각하면 이해하기 쉽습니다. 이는 마치 책의 표지와 책 페이지 사이에 공간을 두는 것과 같습니다.
padding은 요소의 내부 여백을 추가하거나 제거하여 요소 내부의 내용과 테두리 사이의 간격을 조절할 수 있습니다. 내부 여백도 픽셀(px), 백분율(%) 등의 단위로 지정할 수 있습니다.
예를 들어 다음과 같은 CSS 코드는 <div>
요소의 margin
과 padding
을 설정하는 예시입니다
margin, padding 설정
div {
margin: 10px;
padding: 20px;
}
위의 코드는 <div>
요소 주위에 10픽셀의 margin
을 추가하고, <div>
요소 내부에는 20픽셀의 padding
을 적용합니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!