HTML에서 들여쓰기하는 방법: 단계별 가이드

다른 사람이 작성한 HTML 파일을 열어보고 얽히고설킨 태그들 때문에 길을 잃은 듯한 느낌을 받은 적이 있다면, 들여쓰기가 왜 중요한지 이미 이해하고 있을 것입니다. HTML에서 들여쓰기를 제대로 하는 방법을 배우는 것은 코드를 작성하는 개발자와 가독성이 좋은 코드를 작성하는 개발자를 구분 짓는 첫 번째 습관 중 하나입니다.

이 가이드에서는 코드 수준의 들여쓰기를 사용하여 HTML 문서를 구조화하는 방법과 CSS 속성을 사용하여 웹페이지의 텍스트를 시각적으로 들여쓰는 방법을 모두 다룹니다.

요약: HTML 들여쓰기

• HTML 들여쓰기는 두 가지 수준에서 작동합니다. 하나는 편집기의 코드 구조이고, 다른 하나는 렌더링된 페이지에서 보이는 텍스트 들여쓰기입니다

• 코드 수준 들여쓰기에는 중첩 레벨당 두 칸의 공백을 사용하고 파일 전체에서 일관성을 유지하십시오

• 시각적인 텍스트 들여쓰기를 위해서는 첫 줄에만 `text-indent`를 사용하고, 전체 블록을 들여쓰기하려면 `margin-left`를 사용하며, 스타일이 적용된 컨테이너 내부를 들여쓰기하려면 `padding-left`를 사용하세요

• 절대 사용하거나<blockquote> 시각적인 들여쓰기를 만들기 위해서

• VS Code의 내장 포맷터 또는 Prettier를 사용하여 팀 전체의 들여쓰기를 자동화하세요

HTML에서 들여쓰기를 올바르게 하는 것이 왜 중요할까요?

챕터도 없고, 단락도 없고, 문장 사이에 공백도 없는 책을 읽는다고 생각해 보세요. 들여쓰기가 없는 HTML을 다뤄야 하는 개발자에게는 바로 그런 모습이 보일 겁니다.

적절한 들여쓰기는 요소 간의 부모-자식 관계를 즉시 파악할 수 있게 해줍니다. 또한 닫는 태그가 누락되었는지 한눈에 알아볼 수 있어 디버깅 속도를 높여줍니다.

또한, 팀에 새로 합류하는 개발자가 코드 구조를 해독하는 데 한 시간을 소비하지 않고도 바로 기여할 수 있기 때문에 협업이 훨씬 수월해집니다.

검색 엔진 가독성 외에도 HTML을 분석하여 페이지 구조를 파악합니다. 깔끔하고 잘 구성된 HTML은 크롤러가 콘텐츠 계층 구조를 정확하게 해석하는 데 도움이 되며, 이는 간접적으로 SEO 성과 향상으로 이어질 수 있습니다.

알아야 할 HTML 들여쓰기 유형 두 가지

본격적인 기술 설명에 앞서, 많은 초보자들이 혼동하는 부분을 명확히 하는 것이 중요합니다. 사람들이 "HTML 들여쓰기"라고 말할 때 의미하는 바는 크게 두 가지입니다

• 코드 레벨 들여쓰기는 코드 편집기 내에서 HTML 태그가 배열되는 방식을 나타냅니다. 웹사이트에서 사용자가 보는 화면에는 영향을 미치지 않습니다. 코드 레벨 들여쓰기의 유일한 목적은 요소의 계층 구조를 시각적으로 표현하여 코드를 읽기 쉽게 만드는 것입니다.

• 시각적 텍스트 들여쓰기는 렌더링된 웹페이지의 콘텐츠를 들여쓰기하여 사용자가 페이지에서 실제 들여쓰기를 볼 수 있도록 하는 것을 의미합니다. 이는 CSS 속성을 통해 제어됩니다. 개발자들이 이 두 가지를 혼동하면

  단순히 시각적 효과를 위해 요소를 잘못 사용하게 되어 실제 접근성 문제를 야기할 수 있습니다.

에디터에서 HTML 코드를 들여쓰기하는 방법은 무엇인가요?

올바른 들여쓰기 습관은 코드 편집기에서 시작됩니다. 처음부터 제대로 설정하면 나중에 디버깅과 코드 재포맷에 소요되는 시간을 크게 줄일 수 있습니다.

부모-자녀 관계 구조 이해하기

HTML은 계층적인 언어입니다. 한 요소가 다른 요소 안에 포함되면, 그 요소는 부모 요소의 자식이 됩니다. 자식 요소는 부모 요소보다 항상 한 단계 더 들여쓰기를 해야 코드에서 이러한 관계를 명확하게 보여줄 수 있습니다.

들여쓰기가 없는 HTML 코드입니다. 작동은 하지만 읽기가 매우 불편합니다

<div><h1>페이지 제목</h1><p> 이것은 단락입니다.</p><ul><li> 첫 번째 항목</li><li> 두 번째 항목</li></ul></div>

다음은 들여쓰기가 제대로 적용된 동일한 HTML입니다

<div><h1>페이지 제목</h1><p> 이것은 단락입니다.</p><ul><li> 첫 번째 항목</li><li> 두 번째 항목</li></ul></div>

구조가 즉시 명확해집니다.<h1> ,<p> , 그리고<ul> 모두 ~의 자녀들이다<div> 그.<li> 요소들은 그것들이 의 자식들이기 때문에 한 단계 더 깊은 곳에 위치합니다.<ul> 각 중첩 레벨은 일관되게 동일한 양만큼 들여쓰기됩니다.

두 칸 띄어쓰기, 네 칸 띄어쓰기, 아니면 탭?

구체적인 선택보다는 일관성이 훨씬 중요합니다. 대부분의 HTML 스타일 가이드는 HTML이 깊게 중첩되기 때문에 들여쓰기 수준당 두 칸의 공백을 기본값으로 사용하며, 네 칸의 공백을 사용하면 코드가 오른쪽으로 너무 많이 밀려날 수 있습니다.

가장 중요한 것은 하나의 스타일을 선택하고 프로젝트 전체에 걸쳐 일관되게 사용하는 것입니다. 어떤 파일에서는 두 개의 공백을, 다른 파일에서는 네 개의 공백을 섞어 사용하면 버전 관리에서 차이점을 파악하기 어렵고 팀 환경에서 마찰을 일으킬 수 있습니다.

VS Code를 사용하여 들여쓰기 자동화하기

VS Code는 기본적으로 들여쓰기를 매우 잘 처리합니다. HTML을 작성하고 여는 태그 뒤에 Enter 키를 누르면 VS Code가 자동으로 다음 줄을 들여쓰기합니다. 들여쓰기가 일관되지 않은 기존 파일을 열면 전체 문서를 한 번에 수정할 수 있습니다.

• Windows에서는 Shift + Alt + F 키를 눌러 문서 전체의 서식을 지정할 수 있습니다.
• Mac에서는 Shift + Option + F를 누르세요.

팀의 경우, Prettier 확장 프로그램은 공유되는 .prettierrc 설정 파일을 통해 모든 개발자의 편집기에서 들여쓰기 규칙을 적용합니다. 이를 통해 들여쓰기 관련 병합 충돌과 코드 검토 과정에서의 마찰을 완전히 없앨 수 있습니다.

CSS를 사용하여 HTML에서 텍스트를 들여쓰는 방법은 무엇입니까?

이제 사용자가 실제로 보는 것에 영향을 미치는 부분, 즉 웹페이지에서 텍스트를 시각적으로 들여쓰기하는 방법에 대해 알아보겠습니다. 여기에는 세 가지 주요 CSS 속성이 있으며, 각 속성은 서로 다른 방식으로 작동합니다.

CSS의 text-indent 속성

`text-indent` 속성은 텍스트 블록의 첫 번째 줄만 들여쓰기합니다. 단락이나 제목과 같은 블록 수준 요소에 적용됩니다. 같은 요소 내의 이후 줄들은 모두 원래 여백을 유지합니다.

p { 텍스트 들여쓰기: 30px; }

이 코드는 모든 단락의 첫 줄을 30픽셀만큼 들여쓰기합니다. 레이아웃에 따라 다른 단위를 사용할 수 있습니다. 픽셀 단위를 사용하면 고정된 절대 들여쓰기 값을 얻을 수 있습니다.

em 또는 rem 단위를 사용하면 들여쓰기가 글꼴 크기에 고정되어 다양한 화면 크기 . 백분율 값을 사용하면 들여쓰기가 포함하는 블록의 너비에 상대적이 됩니다.

p { 텍스트 들여쓰기: 2em; }

음수 값을 사용하면 첫 번째 줄이 왼쪽으로 튀어나오고 나머지 줄은 들여쓰기되는 내어쓰기 효과를 만들 수도 있습니다

p { 텍스트 들여쓰기: -2em; 왼쪽 여백: 2em; }

text-indent는 모든 최신 브라우저에서 뛰어난 호환성을 제공합니다. 별도의 벤더 접두사가 필요하지 않습니다.

margin-left 속성

`margin-left` 속성은 요소 전체를 오른쪽으로 이동시켜 콘텐츠 블록 전체를 들여쓰기합니다. 이는 단락, 섹션 또는 컨테이너 전체를 들여쓰기할 때, 특히 첫 줄만 들여쓰기할 때보다 유용합니다.

.indented-section { margin-left: 40px; }

margin-left 속성은 거의 모든 HTML 요소에서 작동합니다.

한 가지 명심해야 할 점은 여백(margin)이 요소의 박스 바깥쪽에 공간을 만들어주기 때문에 요소 자체를 이동시키는 것이지 요소 안의 텍스트만 이동시키는 것이 아니라는 것입니다. 이는 레이아웃 시스템에서 이미 간격이 관리되는 그리드 레이아웃

padding-left 속성

`padding-left` 속성은 요소의 콘텐츠 상자 내부, 즉 테두리와 콘텐츠 사이에 공간을 만듭니다. 이것이 `margin-left`와의 핵심적인 차이점입니다.

.callout-box { padding-left: 24px; background-color: #f5f5f5; border-left: 4px solid #0057ff; }

여기서 padding-left 대신 margin-left를 사용하면 텍스트는 들여쓰기되지만 배경색 과 테두리가 원래 왼쪽 가장자리에서 시작되어 깨진 것처럼 보입니다.

`padding-left` 속성은 스타일이 적용된 컨테이너는 그대로 유지하면서 텍스트를 안쪽으로 이동시킵니다. 배경, 테두리 또는 정의된 박스 모델이 있는 컨테이너 내부의 텍스트를 들여쓰기할 때 사용하세요.

HTML 목록 및 중첩 요소 들여쓰기

HTML 목록은 브라우저에서 기본적으로 들여쓰기를 적용하지만, 정확한 들여쓰기 양은 Chrome, Firefox, Safari에 따라 다릅니다. 일관되고 제어된 결과를 얻으려면 CSS에서 명시적으로 정의하세요

ul, ol { padding-left: 24px; }

중첩 목록의 경우, 중첩된 요소에 추가 들여쓰기를 적용하여 두 번째 수준을 명확하게 구분하십시오

<ul><li>주요 항목<ul><li> 중첩 항목 A</li><li> 중첩 항목 B</li></ul></li></ul>

CSS를 사용하여 각 레벨의 왼쪽 패딩을 제어함으로써 모든 브라우저에서 일관되게 보이는 깔끔한 2단 들여쓰기 목록을 만들 수 있습니다.

들여쓰기를 기본적으로 처리하는 HTML 요소

일부 HTML 요소는 브라우저에서 기본적으로 들여쓰기 기능을 제공합니다. 이러한 기능을 언제 올바르게 사용하고 언제 사용하지 말아야 하는지 알면 코드의 접근성과 의미론적 건전성을 유지할 수 있습니다.

• `blockquote` 요소는 기본적으로 들여쓰기되어 표시됩니다. 많은 개발자들이 이러한 시각적 효과 때문에 이를 잘못 사용하는 경우가 있는데, 이는 잘못된 사용법입니다.

그만큼<blockquote> `<input>` 요소는 외부 소스에서 인용한 내용을 표시하기 위해 존재합니다. 스크린 리더는 이를 인용문으로 인식하여 읽어주기 때문에, 인용하지 않은 내용에 `<input>` 요소를 사용하면 보조 기술에 의존하는 사용자를 오도할 수 있습니다. `<input>` 요소는 실제 인용문에만 사용하고, 그 외의 모든 내용에는 CSS를 사용하십시오.

• `<pre>` 요소는 HTML 파일에 있는 공백, 줄 바꿈 및 들여쓰기를 그대로 유지합니다. 따라서 공백이 의미를 전달하는 코드 조각이나 서식이 지정된 텍스트를 표시하는 데 필수적입니다.

• 가 줄 바꿈 방지 공백 ( )을 사용하는 것입니다. 하지만 절대 이런 용도로는 사용하지 않는 것이 좋습니다. 줄 바꿈 방지 공백은 크기 조정을 지원하지 않고, 화면 크기에 따라 잘리거나 작은 화면에서 예측할 수 없는 줄 바꿈을 발생시킵니다. 항상 CSS를 사용하는 것이 좋습니다.

흔히 저지르는 들여쓰기 실수, 피해야 할 것들

같은 파일에서 탭과 공백을 혼용하는 것은 팀 차원에서 가장 흔히 발생하는 실수입니다. 어떤 편집기에서는 괜찮아 보이지만 다른 편집기에서는 완전히 깨져 보일 수 있습니다. 편집기에서 탭을 공백으로 자동 변환하도록 설정하거나 Prettier를 사용하여 일관된 스타일을 적용하세요.

재사용 가능한 CSS 클래스 대신 각 요소에 개별적으로 인라인 스타일을 사용하는 것은 유지 관리 측면에서 악몽과 같은 결과를 초래합니다.

HTML의 서로 다른 20개의 단락 태그에 걸쳐 `style="margin-left: 40px"`를 업데이트하는 것은 하나의 CSS 클래스만 사용했다면 완전히 해결할 수 있었을 고통스러운 작업입니다.

편집기에서 줄 바꿈이 발생할 정도로 들여쓰기가 심하다면, 단순히 서식을 변경하는 것 이상의 HTML 구조 자체를 단순화해야 한다는 신호입니다. 코드가 정기적으로 10~12단계 깊이로 들여쓰기된다면, 구조 자체를 검토해 볼 가치가 있습니다.

접근성 및 들여쓰기

대부분의 가이드에서 이 부분을 간과합니다. 코드 수준의 들여쓰기가 올바르면 보조 기술이 페이지를 얼마나 정확하게 분석하는지에 직접적인 영향을 미칩니다.

• 요소들이 올바르게 중첩되고 HTML 계층 구조가 깔끔하면 화면 판독기는 랜드마크, 제목 및 콘텐츠 영역을 정확하게 식별할 수 있습니다.

• 요소들이 시각적인 부작용 때문에 잘못 사용될 경우, 화면 낭독기는 사용자에게 잘못된 맥락을 알려줍니다.

WAVE 나 axe DevTools 같은 도구를 사용하여 HTML의 의미론적 정확성을 검사하는 것을 훨씬 쉽게 만들어 줍니다 .

마지막으로

깔끔한 HTML 들여쓰기는 투자하는 비용보다 훨씬 더 많은 이점을 가져다주는 습관 중 하나입니다.

프로젝트를 제대로 포맷하는 데 투자하는 시간은 디버깅할 때마다, 새로운 개발자가 파일을 열 때마다, 그리고 몇 달 후에 자신의 코드를 다시 보고 즉시 이해할 때마다 그 가치를 되돌려 받습니다.

Seahawk Media는 코드 품질이 성능, 유지 관리성 및 사용자 경험에 직접적인 영향을 미치는 웹사이트를 구축하고 감사합니다

웹사이트에 코드 감사, 성능 분석 또는 전체 개발 빌드가 필요한 경우 저희에게 연락해 주세요 . 화면에서 보이는 것만큼이나 내부적으로도 잘 작동하는 웹사이트를 함께 만들어 보겠습니다.

자주 묻는 질문