[Django] HTML 문서 기본 구조 정리

HTML에서 <br>, <p>, <span> 태그는 매우 기본적이고 중요한 요소입니다.

각각의 태그는 다른 용도로 사용되며, HTML 문서의 구조와 스타일링에 중요한 역할을 합니다.
또한 자주 사용되는 다른 HTML 태그들도 함께 소개하겠습니다.

1. <br>

• 설명: <br> 태그는 줄 바꿈을 위해 사용됩니다. 문단이나 블록 요소를 나누는 대신, 텍스트 내에서 개행을 필요로 할 때 사용됩니다.
• 종료 태그 없음: <br>은 자체 폐쇄 태그로, 종료 태그가 필요 없습니다.
• 예시:

  Hello,<br>World!

  위의 코드는 "Hello,"와 "World!"를 같은 문장 내에서 다른 줄에 표시합니다.

2. <p></p>

• 설명: <p> 태그는 문단(paragraph)을 정의합니다. 문단 내의 텍스트는 기본적으로 상하에 여백이 있어 다른 문단과 분리됩니다.
• 종료 태그 필요: <p>는 시작 태그와 종료 태그가 모두 필요합니다.
• 예시:

  <p>This is the first paragraph.</p>
  <p>This is the second paragraph.</p>

  위의 코드는 두 개의 문단을 정의하며, 각각의 문단은 브라우저에서 별도의 블록으로 표시됩니다.

3. <span></span>

• 설명: <span> 태그는 인라인 요소를 정의하는 데 사용됩니다. <span>은 특정 텍스트를 묶어 스타일링하거나 자바스크립트에서 접근할 때 유용합니다.
• 종료 태그 필요: <span> 역시 시작 태그와 종료 태그가 모두 필요합니다.
• 예시:

  <p>This is a <span style="color: red;">red</span> word.</p>

  위의 코드는 "red"라는 단어를 빨간색으로 표시하는데, 이때 <span>을 사용합니다.

다른 많이 사용되는 HTML 태그

1. <div></div>

• 설명: <div> 태그는 블록 레벨 요소로, 문서 내에서 섹션을 정의합니다. <div>는 주로 CSS 또는 자바스크립트와 함께 사용되어 레이아웃을 구성하거나 특정 부분에 스타일을 적용하는 데 사용됩니다.
• 종료 태그 필요: <div>는 시작 태그와 종료 태그가 모두 필요합니다.
• 예시:

  <div class="container">
      <h1>Title</h1>
      <p>This is a paragraph inside a div.</p>
  </div>

  위의 코드는 <div>를 사용하여 제목과 문단을 포함하는 컨테이너를 정의합니다.

2. <h1> to <h6>

• 설명: <h1>에서 <h6>까지의 태그는 제목(heading) 태그입니다. <h1>은 가장 중요한 제목을 나타내고, <h6>은 가장 덜 중요한 제목을 나타냅니다.
• 종료 태그 필요: 모든 제목 태그는 시작 태그와 종료 태그가 필요합니다.
• 예시:

  <h1>Main Title</h1>
  <h2>Sub Title</h2>
  <h3>Section Title</h3>

  위의 코드는 세 가지 다른 크기의 제목을 표시합니다.

3. <a></a>

• 설명: <a> 태그는 하이퍼링크를 정의합니다. 사용자가 클릭할 수 있는 링크를 만들 때 사용됩니다.
• 종료 태그 필요: <a> 태그는 시작 태그와 종료 태그가 모두 필요합니다.
• 속성: href 속성은 링크의 대상 URL을 지정합니다.
• 예시:

  <a href="https://www.example.com">Visit Example.com</a>

  위의 코드는 "Visit Example.com"이라는 텍스트에 https://www.example.com으로 연결되는 링크를 만듭니다.

4. <img>

• 설명: <img> 태그는 이미지 삽입을 위해 사용됩니다.
• 종료 태그 없음: <img>는 자체 폐쇄 태그로, 종료 태그가 필요 없습니다.
• 속성: src 속성은 이미지의 경로를 지정하고, alt 속성은 이미지가 로드되지 않을 때 표시될 대체 텍스트를 정의합니다.
• 예시:

  <img src="image.jpg" alt="A beautiful scenery">

  위의 코드는 image.jpg라는 이미지 파일을 페이지에 삽입합니다.

5. <ul></ul>, <ol></ol>, <li></li>

• 설명: <ul>은 순서가 없는 목록, <ol>은 순서가 있는 목록을 정의합니다. <li> 태그는 각 목록 항목을 나타냅니다.

• 종료 태그 필요: <ul>, <ol>, <li> 모두 시작 태그와 종료 태그가 필요합니다.

• 예시:

  <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
  </ul>
  
  <ol>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
  </ol>

  위의 코드는 순서가 없는 목록과 순서가 있는 목록을 표시합니다.

요약

• <br>: 줄 바꿈을 위해 사용.
• <p>: 문단을 정의.
• <span>: 인라인 요소를 정의, 특정 텍스트에 스타일이나 자바스크립트 적용.
• <div>: 블록 레벨 섹션을 정의.
• <h1> to <h6>: 제목(heading)을 정의.
• <a>: 하이퍼링크를 정의.
• <img>: 이미지를 삽입.
• <ul>, <ol>, <li>: 목록을 정의.

이러한 태그들은 HTML 문서의 구조와 스타일링, 그리고 사용자와의 상호작용을 정의하는 데 필수적인 역할을 합니다.