[HTML] 문단 관련 요소

#01. 단락 나누기

1) 제목

<h1>H1 수준의 제목</h1>
<h2>H2 수준의 제목</h2>
<h3>H3 수준의 제목</h3>
<h4>H4 수준의 제목</h4>
<h5>H5 수준의 제목</h5>
<h6>H6 수준의 제목</h6>

• h1~h6: 제목을 표시하기 위한 태그로서, 6단계의 수준을 갖는다.
• “h”는 Heading의 줄임말.

제목 태그 사용 시 주의사항

1. 계층 구조 준수: h1 → h2 → h3 순서대로 사용 (건너뛰지 않기)
2. 페이지당 h1 하나: SEO와 접근성을 위해 h1은 페이지당 하나만 사용
3. 의미에 따른 사용: 크기가 아닌 의미에 따라 선택

<!-- 올바른 예시 -->
<h1>웹사이트 제목</h1>
<h2>섹션 제목</h2>
<h3>하위 섹션 제목</h3>

<!-- 잘못된 예시 -->
<h1>웹사이트 제목</h1>
<h4>섹션 제목</h4> <!-- h2를 건너뛰면 안됨 -->

2) 본문

문단 나누기

<p>내용</p>

1. 본문안에 다른 본문 중첩 사용 가능
   
   • <p> <p> ... </p> </p>
2. 두 개 이상의 본문을 연속적으로 사용 가능. 각 문단간에는 여백이 형성된다.
   
   • <p> ... </p> <p> ... </p>

인용문

<blockquote> ... </blockquote>

• 출처가 존재하는 형식의 문장 구성
• 이 태그 안에는 다른 문단 요소들이 포함될 수 있다.
• 인용문으로 설정된 문단은 오른쪽으로 들여쓰기가 적용된다.

인용문 속성 활용

<!-- 출처를 명시한 인용문 -->
<blockquote cite="https://example.com">
    <p>인용할 내용</p>
    <footer>
        출처: <cite>책 제목</cite> - 저자명
    </footer>
</blockquote>

<!-- 간단한 인라인 인용 -->
<p>작가는 <q>인생은 아름다워</q>라고 말했다.</p>

목록

모든 형태의 웹 사이트 메뉴 구성에 사용되는 태그

1. 목록의 영역 정의
   • 순서없는 목록(unordered list) : <ul>~</ul>
   • 순서있는 목록(ordered list) : <ol>~</ol>
2. 목록의 영역 안에 항목(list item)을 나열하기
   • <li> 내용 </li>
3. 항목 안에서는 독립적인 본문을 구성할 수 있다.
   • p, div, h(n) 태그 사용 가능함
4. 항목 안에서는 새로운 목록을 하위 요소로 포함할 수 있다.
   <li>태그 안에서 새롭게 <ul>이나 <ol>태그를 시작할 수 있다는 의미.

    <ul | ol>
        <li>
          <ul | ol> ... </ul | ol>
        </li>
    </ul | ol>
   

목록 실제 활용 예시

순서없는 목록 (네비게이션 메뉴)

<nav>
    <ul>
        <li><a href="#home">홈</a></li>
        <li><a href="#about">소개</a></li>
        <li><a href="#services">서비스</a></li>
        <li><a href="#contact">연락처</a></li>
    </ul>
</nav>

순서있는 목록 (단계별 설명)

<ol>
    <li>재료 준비하기</li>
    <li>물 끓이기</li>
    <li>면 넣고 3분 기다리기</li>
    <li>완성!</li>
</ol>

중첩 목록 (계층형 메뉴)

<ul>
    <li>프론트엔드
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>백엔드
        <ul>
            <li>Node.js</li>
            <li>Python</li>
            <li>Java</li>
        </ul>
    </li>
</ul>

설명 목록 (Description List)

용어와 설명을 쌍으로 표현할 때 사용합니다.

<dl>
    <dt>HTML</dt>
    <dd>웹 페이지의 구조를 만드는 마크업 언어</dd>

    <dt>CSS</dt>
    <dd>웹 페이지의 스타일을 꾸미는 스타일시트 언어</dd>

    <dt>JavaScript</dt>
    <dd>웹 페이지에 동적 기능을 추가하는 프로그래밍 언어</dd>
</dl>

#02. 페이지 영역 나누기 –> div

1. 개념적으로만 나눈다.
   • HTML에서는 디자인이 적용되지 않음
2. 연속적으로 사용할 경우 간격 없는 문단을 구성.
3. 중첩해서 사용할 수 있으며 모든 종류의 HTML 태그 포함 가능
4. 용도에 따라 시멘틱 요소로 세분화 할 수 있다.
   • header, section, article, nav, aside, hgroup 등…
5. 대부분의 웹 사이트가 시멘틱 요소를 디테일하게 사용하지는 않는다.
   (div로 대동단결!!!)

모든 태그 요소에 사용할 수 있는 id속성

각 태그에게 고유한 기능을 부여하기 위해 다른 요소와 중첩되지 않는 값을 부여해야 한다.

id속성을 통해 고유한 기능을 부여하기 위해 이 속성이 CSS나 Javascript와 연계된다.

반드시 그 파일 안에서 고유한 값을 명시해야 한다.

#03. 기타

• 화면상에 직선 긋기 : <hr />
• copyright 특수문자 : ©
• HTML 코드에서는 띄어쓰기나 줄바꿈을 아무리 많이 사용하더라도
  브라우저상에서는 띄어쓰기 한 칸으로 표시된다.
  • 줄바꿈 : <br />
  • 띄어쓰기 특수문자 :