카테고리와 제목 바는 왜 같은 형식으로 통일할까?

복잡한 코드를 단순하게 바꾸고 홈페이지의 시각적 질서를 만드는 방법

지난 학습에서는 HTML이 홈페이지 글의 뼈대이며, Avada에서는 필요한 부분만 간단히 붙여넣는다는 원리를 배웠습니다. 이번에는 여러 모양의 카테고리와 제목 코드를 하나의 기준 형식으로 통일하는 방법을 살펴봅니다.

답변. 카테고리 박스는 방문자에게 “이곳에는 어떤 글이 모여 있는가”를 알려 주는 표지판입니다. 박스마다 높이와 글자 크기가 다르면 홈페이지가 여러 사람이 만든 것처럼 보일 수 있습니다.

그래서 연구원님의 홈페이지에서는 같은 역할의 카테고리 박스를 높이 200px, 안쪽 여백 20px, 제목 40px, 부제목 18px의 기준으로 맞춥니다. 색상과 문장은 달라도 뼈대가 같으면 홈페이지 전체가 안정적으로 보입니다.

연구원님의 카테고리 박스 기준

높이 200px · 안쪽 여백 20px · 제목 40px · 부제목 18px · 둥근 모서리 15px

답변. 아닙니다. 인터넷에서 가져온 코드에 DOCTYPE, html, head, body, style, class가 함께 들어 있다면 그것은 한 페이지 전체를 만들기 위한 코드일 가능성이 큽니다. Avada 코드 블록에는 화면에 필요한 박스와 글자 부분만 넣는 것이 안전하고 관리하기도 쉽습니다.

단순화 원칙: 원래 디자인의 색상·그라데이션·문장은 살리고, 구조는 div와 제목 태그 중심의 인라인 스타일로 바꿉니다. 디자인은 유지하면서 코드만 짧고 읽기 쉽게 만드는 것입니다.

답변. 가능합니다. 글 전체의 최대폭은 그대로 두고, 제목 박스에만 너비를 더합니다. 좌우로 늘어난 만큼 음수 여백을 주면 박스의 중심은 그대로 유지됩니다.

현재 제목 박스는 본문보다 양쪽으로 120px씩 넓게 설정했습니다. 따라서 전체 너비는 240px 늘어나고, 좌우 여백은 각각 -120px이 됩니다.

width: calc(100% + 240px);
margin: 0 -120px 40px;

숫자의 관계: 전체 폭을 240px 늘렸기 때문에 좌우에 그 절반인 120px씩 음수 여백을 줍니다. 그래야 제목 박스가 한쪽으로 치우치지 않습니다.

답변. HTML 주석은 화면에는 나타나지 않지만 코드를 읽는 사람에게 위치를 알려 줍니다. 긴 코드에서 제목 부분만 다시 고칠 때 시작과 끝이 표시되어 있으면 실수를 줄일 수 있습니다.

연구원님의 코드에는 앞으로 제목, 본문, 질문, 이미지, 요점 정리처럼 중요한 구역마다 한글 주석을 넣습니다.

제목 박스 코드

Avada 홈페이지

핵심 블로그 제작 노트

이 박스는 별도의 style 문서나 CSS 클래스 없이 한 덩어리로 복사할 수 있습니다. 문장과 배경색만 바꾸면 다른 카테고리에도 같은 규격을 사용할 수 있습니다.

① 같은 역할의 박스는 크기와 글자 규격을 통일합니다.

② Avada에는 필요한 화면 코드만 간단하게 붙여넣습니다.

③ 제목 박스만 넓힐 때는 늘린 폭의 절반만큼 좌우 음수 여백을 줍니다.

④ 중요한 코드 구역에는 시작과 끝을 알리는 한글 주석을 넣습니다.

PART 03. 본문과 강조 박스는 어떻게 읽기 좋게 만들까?

본문 19px, 소제목 여백, 색상별 정보 박스를 이용해 긴 글의 구조를 만드는 법을 살펴봅니다.

지난번 학습 1편
HTML 코드는 왜 복잡해 보일까?

이번 학습 2편
카테고리와 제목 바는 왜 같은 형식으로 통일할까?

다음 학습 3편
본문과 강조 박스는 어떻게 읽기 좋게 만들까?