잡다한 이야기

평생 쓰는 HTML + CSS 블로그 레이아웃 전략

싱가포르 권상무 2025. 7. 14. 22:34

🔥 평생 쓰는 HTML + CSS 블로그 레이아웃 전략

단순함, 구조감, 그리고 확장성을 모두 갖춘 디자인을 직접 구현해봅니다.

1. 블로그 레이아웃의 핵심 철학

블로그는 ‘읽기’가 중심인 공간입니다. 디자인의 목적은 정보를 돋보이게 하는 것이지, 방해하는 것이 아닙니다. 따라서 구조는 직관적이고, 색상은 부드럽고, 여백은 넉넉해야 합니다.

정보 구조 → Header / Section / Article / Footer로 단순화
폰트 크기와 간격은 가독성 중심으로 조절
모바일-데스크탑 반응형 디자인 고려

2. CSS 변수 활용: 색상 체계 확립

CSS의 :root 변수 설정은 전체 테마를 통일하는 데 효과적입니다. 유지보수나 리브랜딩에도 편리함을 줍니다.

--main-color: 브랜드 느낌 강조
--accent-color: 강조 텍스트나 버튼에 사용
--bg-color: 전체 배경의 안정감 조절

3. header + footer 구성 전략

블로그의 첫인상은 header로, 마지막 인상은 footer로 결정됩니다. 이 두 요소는 방문자의 ‘브랜드 인식’을 형성합니다.

header에는 글 제목 + 부제목 + 배경색 활용
footer는 명언, 제작자 정보, 저작권 표시
공통 레이아웃은 include 또는 template 활용

4. 반응형 구성: 모바일에서 1등 블로그

전체 트래픽의 70% 이상이 모바일에서 발생하는 시대. CSS의 media query를 통해 디바이스별 최적화를 이루어야 합니다.

@media screen and (max-width: 768px) 기준으로 모바일 대응
폰트 크기, 패딩, 이미지 너비 동적 조절
flex 또는 grid 레이아웃 → 유연한 배치

5. 유지보수가 쉬운 CSS 구조

블로그 콘텐츠가 늘어날수록 유지보수가 쉬워야 합니다. CSS 클래스는 의미 중심으로, 중복 없이, 모듈화하는 것이 핵심입니다.

이름 규칙: .section-title, .post-content 등
공통 디자인은 base.css 또는 style.css 분리
효과나 애니메이션은 effects.css로 별도 관리