HTML 목록 들여쓰기

이 게시물에서는 HTML 문서에서 텍스트/목록을 들여쓰기하는 여러 가지 방법을 살펴봅니다.

블록 또는 왼쪽 모서리의 텍스트 줄과 목록 구성 요소 사이의 간격은 텍스트/목록 들여쓰기 스타일에 따라 결정됩니다. 일반적으로 단락의 시작을 나타냅니다.

텍스트를 언급할 때 들여쓰기 또는 들여쓰기는 단락의 왼쪽 여백과 오른쪽 여백 사이의 거리 변화를 나타냅니다. 줄의 시작 부분으로 커서를 이동하고 키보드의 Tab 키를 눌러 텍스트를 들여씁니다.

HTML로 들여쓰기 나열

HTML 목록은 정보 목록을 표현하는 데 사용됩니다. 각 목록에는 하나 이상의 목록 구성 요소가 있을 수 있습니다.

HTML 목록은 세 가지 유형으로 분류됩니다.

1. ol - 번호가 매겨지거나 순서가 지정된 목록
2. ul - 목록(순서 없음 또는 글머리 기호)
3. dl - 설명 목록 또는 정의 목록

정렬되지 않은 목록 요소(<ul>)는 기본적으로 목록 항목을 들여씁니다. 들여쓰기 거리를 조정하려면 CSS를 사용하면 됩니다.

자주 사용되는 들여쓰기를 나열하는 두 가지 기술이 있습니다.

1. margin-left: 이 속성은 요소의 왼쪽 여백 영역을 설정하는 데 사용됩니다. 양수 값은 이웃과 거리를 두고 음수 값은 더 가깝게 만듭니다.
2. padding-left: 이 속성은 콘텐츠와 테두리 사이의 공간을 지정하는 데 사용됩니다. padding-left 속성은 요소의 왼쪽 패딩(공백)을 지정합니다.

CSS에서 패딩은 테두리와 요소 콘텐츠 사이의 영역이고 마진은 요소 테두리를 둘러싼 영역입니다.

padding 속성은 요소의 내부 공간을 제어하고 margin 속성은 주변 영역을 제어합니다.

이전 개념을 더 잘 이해하려면 다음 예제를 고려하십시오.

<ul class="outerUL">
  <li>Tea</li>
  <li>Coffee
    <ul class="innerUL">
    <li>Black coffee</li>
    <li>Green coffee</li>
    </ul>
  </li>
  <li>Milk Shake</li>
</ul>

.innerUL {
    padding-left: 50px;
}

.outerUL {
    margin-left: 100px;
}

앞의 예제에서는 순서가 지정되지 않은 목록 하나와 순서가 지정되지 않은 중첩 목록 하나를 정의했습니다. margin-left 속성은 외부 목록을 들여쓰는 데 사용되고 padding-left 속성은 내부 목록을 들여쓰기하는 데 사용됩니다.

HTML과 호환되는 모든 브라우저에서 위의 코드 줄을 실행합니다.