지난 13편에서 글자의 옷을 입히는 법을 배웠죠? 이제 글자가 예뻐졌으니, 그다음 단계는 '배치'입니다. 글자가 너무 빽빽하게 붙어 있으면 숨이 막히고, 너무 멀리 떨어져 있으면 집중이 안 됩니다. 이때 필요한 것이 바로 [마진(Margin)과 패딩(Padding)], 즉 여백의 미입니다.
이것만 알면 여러분의 블로그는 '초보 느낌'을 완전히 벗고 '전문 웹사이트' 같은 느낌을 풍기게 됩니다. 바로 시작해 볼까요?
마진과 패딩, 대체 뭐가 다른가요?
이 둘은 '여백'이라는 점은 같지만, 기준점이 다릅니다. 이 그림만 머릿속에 꼭 넣어두세요!
패딩 (Padding): '안쪽 여백'입니다. 상자 테두리 안쪽과 내용물 사이의 간격이죠.
마진 (Margin): '바깥쪽 여백'입니다. 상자 테두리 밖과 다른 요소(혹은 창 끝) 사이의 간격이죠.
쉽게 비유하자면:
패딩은 옷을 입었을 때 내 몸과 옷 사이의 공간(품)입니다.
마진은 내가 다른 사람과 서 있을 때 서로 떨어져 있는 거리입니다.
실전 코드: 간격 조절하기
CSS에서는 간단하게 margin과 padding 속성을 사용합니다. 방향을 지정하고 싶다면 뒤에 -top, -bottom, -left, -right를 붙이면 됩니다.
div {
padding: 20px; /* 상자 안쪽으로 20px의 여백 */
margin-bottom: 30px; /* 상자 아래쪽으로 30px의 간격 */
background-color: #f0f0f0;
}
여백 활용 전략
디자인을 잘 모르는 초보자들의 공통적인 실수는 '여백을 너무 아끼는 것'입니다. 화면에 꽉 찬 글자는 읽기 불편합니다.
본문은 무조건 숨통을 틔우세요:
p태그(본문)에margin-bottom: 20px;를 주는 것만으로도 문단이 확연히 구분되어 가독성이 몇 배는 좋아집니다.이미지와 글 사이의 거리를 유지하세요: 이미지가 글에 너무 바짝 붙어 있으면 지저분해 보입니다. 이미지(
img) 태그에margin: 20px 0;(위아래 20px)를 주어 충분한 공간을 확보하세요.사이드바와의 거리: 본문과 사이드바 사이에도 적당한 마진을 주어야 독자가 혼란스럽지 않게 글에 집중할 수 있습니다.
에코노트허브의 승인 꿀팁: 반응형 여백
스마트폰에서 볼 때는 마진을 너무 크게 주면 화면이 좁아져 답답할 수 있습니다. 모바일 환경에서는 본문의 마진은 조금 줄이고, 패딩을 적절히 활용해 글자가 화면 끝에 닿지 않도록(약 15px 정도)만 설정해도 아주 깔끔해 보입니다.
핵심 요약
패딩(Padding): 테두리 안쪽 여백 (내용과 테두리 사이)
마진(Margin): 테두리 바깥쪽 여백 (요소와 요소 사이)
가독성의 핵심: 글자 크기만큼이나 중요한 것이 여백입니다. 여백을 충분히 주어야 전문적인 블로그처럼 보입니다.
추천 설정: 문단(
p) 아래에 마진을 20px 정도 주어 문단 간 구분을 명확히 하세요.
다음 편 예고: 15편에서는 우리 블로그를 한 단계 더 업그레이드할 [테두리와 배경색 디자인하기]를 배웁니다. 박스 디자인을 통해 중요한 정보를 더 눈에 띄게 만드는 법을 알려드릴게요!
여러분의 블로그 글을 지금 다시 한번 살펴보세요. 문단과 문단 사이가 너무 다닥다닥 붙어 있지는 않나요? 오늘 배운 margin-bottom을 넣는다면 어디에 먼저 넣고 싶으신가요?