HTML 리스트와 블록/인라인 요소 이해: 웹 개발 기본기 다지기

핵심 기술

HTML에서 <li> 태그를 사용하여 목록 요소를 정의하는 방법과, 웹 페이지 레이아웃에 중대한 영향을 미치는 블록(Block) 요소와 인라인(Inline) 요소의 근본적인 차이점을 이해하는 것은 웹 개발의 기초입니다.

기술적 세부사항

• 리스트 아이템 (<li>): 목록 구조 내에서 개별 항목을 정의하는 데 사용됩니다. 단계, 순서 또는 관련 항목 그룹을 표시하는 데 효과적이며, 웹 페이지의 의미론적 구조를 강화합니다.
• 블록 요소 (Block Elements):
  • 항상 새로운 줄에서 시작합니다.
  • 기본적으로 부모 컨테이너의 전체 너비를 차지합니다.
  • 예시: <div>, <p>, <h1> 등
• 인라인 요소 (Inline Elements):
  • 새로운 줄에서 시작하지 않습니다.
  • 필요한 만큼의 너비만 차지합니다.
  • 예시: <span>, <a>, <strong> 등
• 단축키: VS Code와 같은 에디터에서 Ctrl + Shift + I는 코드 포맷팅, Shift + I는 자주 사용되는 문법 자동 완성을 위한 유용한 단축키로 활용될 수 있습니다.
• 리스트 스타일:
  • Ordered List (<ol>): 번호가 매겨진 순서대로 항목을 표시합니다 (예: 1. 첫 번째 항목).
  • Unordered List (<ul>): 번호 없이 글머리 기호(bullet points) 등을 사용하여 순서에 상관없이 항목을 표시합니다 (예: ● HTML, ● CSS).