1. HTML이란?

HTML(Hyper Text Markup Language)은 마크업 언어로서, 웹 페이지를 만드는 언어입니다.

웹 문서에서는 특정 텍스트에 Mark하기 위하여 HTML 태그(tag)라는 것을 사용합니다.

<h1>제목</h1>
<p>내용이 들어올 자리입니다.</p>
<a href="http://www.naver.com">네이버로 이동</a>
  • <h1> 태그 : 제목 표현
  • <p> 태그 : 글의 문단 표시
  • <a> 태그 : 다른 웹 문서로 이동

2. HTML 태그(tag)

HTML 태그는 웹 문서에 표시하는 것입니다.

2-1. 태그 구조

2-2. 태그 특징

  • 태그는 시작 태그와 종료 태그로 이루어져 있습니다.
  • 태그 사이에 콘텐츠를 선언합니다.
  • HTML 태그 = 요소(Element) = 노드(Node)

3. HTML 파일의 기본 구조

HTML 파일은 <html>, <head>, <body> 그리고 <title> 태그를 가지고 있어야 합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>HTML 기본 구조</title>
  </head>
  <body>
    <h1>HTML 기본 구조</h1>
    <p>필수로 존재하는 것은 알아둡시다.</p>
  </body>
</html>

1. <!DOCTYPE html>

  • 현재 문서가 어떤 버전으로 작성되었는지 미리 표시합니다.
  • HTML5 버전이라는 뜻이지만 대부분 HTML5를 사용하기 때문에 이처럼 표현합니다.

2. <html lang="ko"> ~ </html>

  • 웹 문서의 시작과 끝을 나타내는 태그입니다.
  • lang 속성은 웹 문서가 어떠한 언어로 작성되었는지 표시합니다.

3. <head> ~ </head>

  • <html> 태그의 자식 태그입니다.
  • HTML 문서 정보나 문서에서 사용할 외부 파일 링크를 넣는 구간이며, 웹 브라우저에 표시되지 않습니다.
  • <meta charset="UTF-8">은 HTML 파일의 인코딩을 알려주는 태그입니다.

4. <body> ~ </body>

  • <html> 태그의 자식 태그입니다.
  • HTML 문서 내용을 넣는 구간이며, 실제 웹 브라우저 안에 표시됩니다.

4. HTML 주석

주석은 메모를 남기는 것을 의미합니다.

주석은 <!-- -->을 사용합니다.

<!-- 메모 내용 -->
<h2>HTML 주석</h2>

주석은 실제 웹 화면에 보이지 않습니다.

5. HTML 기본 태그

HTML 기본 태그에는 글꼴 태그, 목록 태그, 표 태그가 있습니다.

5-1. 글꼴 태그

  • <h1> ~ <h6>
    • 웹 페이지의 제목 또는 부제목을 표현할 때 사용하며, 숫자가 작을수록 큰 제목을 표시합니다.
  • <p>
    • 하나의 문단을 표시할 때 사용합니다.
  • <hr>
    • 가로로 선을 긋는 태그입니다.
  • <br>
    • 줄 바꿈 태그로 HTML에서 개행 역할을 합니다.
  • <i>
    • 텍스트를 이텔릭체로 표시할 때 사용합니다.
  • <em>
    • 텍스트를 이텔릭체로 강조할 때 사용합니다.
  • <b>
    • 텍스트를 진하게 표시할 때 사용합니다.
  • <strong>
    • 텍스트를 진하게 강조할 때 사용합니다.
<b> vs <strong> 차이, <i> vs <em> 차이

- <b> 태그와 <i> 태그는 단순히 텍스트를 진하게 그리고 이텔릭체로 표시하는 역할을 합니다.
- <strong> 태그와 <em> 태그는 실제로 페이지 내의 중요한 부분으로 강조하고 싶을 때 사용합니다.
- 스크린 리더를 사용할 때 거센 억양으로 음을 낼 수 있도록 하여 실제로 말할 때의 강조를 하듯이 재구성합니다.

5-2. 목록 태그

  • <ol>
    • 순서가 있는 목록을 표현할 때 사용합니다.
  • <ul>
    • 순서가 없는 목록을 표현할 때 사용합니다.
  • <li>
    • 목록 하위 항목으로 사용됩니다.
    • <ul> 태그 또는 <ol> 태그의 하위에 위치합니다.
  • <dl>
    • Definition List(정의 목록)의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.
  • <dt>
    • Definition Term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다.
  • <dd>
    • Definition Description(정의 설명)의 약자로, 용어를 설명하는 데 사용합니다.
주의사항

- <dl> 태그는 하나 이상의 <dt> - <dd> 쌍의 태그를 갖고 있어야 합니다.
- <li>, <dt> - <dd> 태그는 밖에서 독립적으로 사용할 수 없습니다.
- <ul> 태그는 현업에서 많이 쓰이는 목록 태그입니다.

5-3. 표(Table) 태그

Table 기본 태그

  • <table>
    • 표를 만드는 태그입니다.
  • <caption>
    • 표의 제목이나 설명을 작성하는 태그입니다.
  • <tr>
    • 표의 행을 의미하는 태그이고 자식으로 <th> 태그나 <td> 태그가 반드시 있어야 합니다.
  • <th>
    • 표의 제목 열을 의미하는 태그이고 부모 태그인 <tr> 태그 안에 있어야 합니다.
  • <td>
    • 표의 일반 열을 의미하는 태그이고 부모인 <tr> 태그 안에 있어야 합니다.

Table 그룹 관련 태그

  • <colgroup>
    • 열을 그룹으로 묶을 수 있도록 해주는 태그입니다.
  • <col>
    • <colgroup> 태그의 자식으로 열 단위를 나눌 수 있습니다.
    • span 속성을 사용하여 열을 그룹으로 묶을지 설정합니다.
    • ex) <col span="3"> -> 세 개의 열을 그룹으로 묶음
  • <thread>
    • 표의 제목 열들을 묶는 그룹 태그입니다.
  • <tbody>
    • 표의 일반적인 데이터들을 묶는 그룹 태그입니다.
  • <tfoot>
    • 표의 하단 영역을 묶는 그룹 태그입니다.

Table 태그 관련 속성

  • <table> 태그 속성
    • border : 테이블이 가지고 있는 테이블과 셀 모두 선으로 표시합니다.
    • width : 테이블의 가로 너비를 설정합니다.
    • cellpadding : 셀의 안쪽 여백으로써 셀과 콘텐츠와의 간격을 조절합니다.
    • cellspacing : 셀의 바깥쪽 여백으로써, 셀과 셀 간의 간격을 조절합니다.
위 속성들은 HTML5에서는 웹 표준이 X -> 이는 CSS로 대체
  • <th> 태그 속성
    • scope : 웹 접근성 관련 속성으로 스크린리더가 데이터를 인식하고 읽는 순서를 결정짓게 합니다.
      • th가 열에 쓰일 경우, 값을 "col"로 설정합니다.
        • ex) <th scope="col">
      • th가 행에 쓰일 경우, 값을 "row"로 설정합니다.
        • ex) <th scope="row">
  • <th>, <td>
    • colspan : 열을 병합하는 속성
      • ex) <td colspan="2">
    • rowspan : 행을 병합하는 속성
      • 그룹이 같은 경우에만 가능
      • ex) <td rowspan="2">
  • <col>
    • width : 열의 가로 너비를 지정 (CSS로 대체)
    • span : 열을 그룹화 함
      • ex) <col span="3"> -> 세 개의 열을 묶음
반응형

'Study > HTML' 카테고리의 다른 글

[HTML] Form  (0) 2025.01.10
[HTML] 이미지 태그 & 멀티미디어  (0) 2025.01.09
[HTML] Inline VS Block Element  (0) 2025.01.09
[HTML] Semantic  (2) 2025.01.09
[HTML] Emmet  (0) 2025.01.08

티스토리툴바