HTML을 처음 배우거나 블로그에 직접 HTML을 입력할 일이 생기면, 가장 먼저 헷갈리는 게 바로 ‘코드 줄 맞추기’와 ‘칸 맞추기(들여쓰기)’입니다. 사실 HTML은 브라우저에서 렌더링될 때 줄과 칸을 무시하지만, 사람에게는 가독성과 유지보수에 매우 중요한 요소입니다. 이 포스트에서는 HTML 코딩 시 줄과 칸을 어떻게 정리하고 맞추는 것이 좋은지 구체적으로 알려드립니다.
잘 정리된 코드 구조는 협업에서도 큰 힘을 발휘하며, 수정할 때 실수 가능성을 줄여줍니다. 들여쓰기 규칙, 줄 바꿈 기준, 자동 정렬 도구까지 단계별로 알려드릴 테니 따라와 보세요.
1. 들여쓰기(Indentation) – 칸을 맞추는 기준
HTML에서는 태그가 중첩될 때마다 들여쓰기를 해주는 것이 일반적입니다. 보통 2칸 또는 4칸을 기준으로 사용하며, 어느 것을 사용하든 일관성이 가장 중요합니다. 아래 예시처럼, 부모 태그 안에 들어가는 자식 태그는 한 단계 들여쓰기를 적용합니다.
제목
내용
- 항목1
- 항목2
들여쓰기를 통해 구조가 명확해지고, 전체 코드가 훨씬 읽기 쉬워집니다.
2. 줄 구분(Line Break) – 줄을 어떻게 나눌까?
HTML에서는 짧은 태그라도 태그마다 줄바꿈하는 것이 좋습니다. 특히 여러 요소가 한 줄에 몰려있으면 가독성이 크게 떨어집니다. 예를 들어 다음과 같은 코드는 잘못된 예입니다.
<div><h1>제목</h1><p>내용</p></div>아래처럼 각 태그를 새 줄에 나눠 작성하는 것이 바람직합니다.
제목
내용
3. 자동 정렬 기능 활용하기
직접 들여쓰기와 줄 맞춤을 하기 번거롭다면, 코드 에디터의 자동 정렬 기능을 적극 활용하세요. Visual Studio Code를 기준으로 아래 단축키를 이용하면 전체 코드가 깔끔하게 정리됩니다.
- Windows: Alt + Shift + F
- Mac: Option + Shift + F
또한 Prettier와 같은 코드 포매터 확장 프로그램을 설치하면 저장할 때마다 자동으로 들여쓰기를 적용해줍니다.
4. 협업 시 들여쓰기 통일은 어떻게?
여러 명이 함께 HTML 프로젝트를 할 경우, 팀 내에서 들여쓰기 기준을 먼저 정하는 것이 좋습니다. 대부분의 경우 아래 두 가지 중 하나를 선택합니다.
- 2칸 들여쓰기: 코드가 짧고 간결한 느낌
- 4칸 들여쓰기: 구조가 더 명확하게 보임
이 기준은 .editorconfig 파일이나 팀 내부 문서로 공유해두면 작업이 일관되게 유지됩니다.
5. HTML 구조 예시 – 전체 흐름 보기
아래는 실제로 많이 쓰이는 HTML 구조 예시입니다. 들여쓰기와 줄 구분이 어떻게 되어야 하는지 참고하세요.
블로그 제목
본문 제목
본문 내용이 들어갑니다.
6. 정리: 잘 맞춘 줄과 칸이 HTML을 살린다
HTML은 눈에 보이지 않는 구조가 코드 전체의 품질을 결정합니다. 들여쓰기와 줄 구분은 단순한 미관을 넘어, 협업과 유지보수를 좌우하는 핵심 요소입니다. HTML을 잘 쓴다는 것은 브라우저만이 아니라, 사람도 이해하기 쉬운 코드를 짠다는 뜻입니다.
코드를 짤 때마다 자동 정렬을 활용하고, 처음부터 구조를 명확히 짜는 습관을 들인다면 어떤 프로젝트든 더 효율적으로 진행할 수 있을 거예요.