웹 개발 기초 3 : HTML 주요 용어와 개념 한눈에 보기

콘텐츠플로우

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용하는 언어입니다. 이를 이해하려면 주요 용어와 개념을 알아야 합니다. 아래에서 HTML의 핵심 용어를 정리했습니다!

🔍 HTML 주요 용어와 개념

HTML은 웹 페이지의 구조를 정의하는 언어입니다. 웹 개발을 시작하기 위해 알아야 할 HTML의 기본 용어는 다음과 같습니다.

용어설명
태그(Tag)HTML의 기본 구성 요소. 꺾쇠괄호(< >)로 감싸져 있으며 웹 요소를 정의합니다.
요소(Element)태그와 콘텐츠를 포함한 전체 구조. 예: <태그>내용</태그> 형태입니다.
속성(Attribute)태그에 추가 정보를 제공하는 키-값 쌍. 예: <태그 속성="값">내용</태그>.
헤드(Head)문서의 메타정보를 정의하는 영역. <head> 태그 안에 작성됩니다.
본문(Body)웹 페이지에 표시되는 주요 콘텐츠 영역. <body> 태그 안에 작성됩니다.
HTML5HTML의 최신 표준 버전으로 멀티미디어와 상호작용 기능을 강화합니다.
DOCTYPE문서의 HTML 버전을 정의하는 선언. 예: <!DOCTYPE html>.
주석(Comment)코드 설명을 추가하는 영역으로 브라우저에 표시되지 않습니다. 예: <!-- 내용 -->.

주요 HTML 태그 와 설명

1. 기본 구조 태그

  • <html>: HTML 문서의 루트 요소로 모든 태그를 감쌉니다.
  • <head>: 문서의 설정 및 메타정보를 정의하는 영역입니다.
  • <body>: 실제로 웹 페이지에 표시되는 콘텐츠를 작성하는 영역입니다.

2. 텍스트 관련 태그

  • <h1> ~ <h6>: 제목을 표시하는 태그로, <h1>이 가장 중요하고 크기가 큽니다.
  • <p>: 단락을 나타내는 태그로 본문 텍스트에 사용됩니다.
  • <b><strong>: 텍스트를 굵게 표시합니다. <strong>은 의미적으로 강조를 나타냅니다.
  • <i><em>: 텍스트를 기울임으로 표시합니다. <em>은 의미적 강조를 포함합니다.
  • <br>: 줄바꿈 태그로 텍스트를 다음 줄로 이동시킵니다.
  • <hr>: 수평선을 삽입합니다.

3. 링크와 이미지 태그

  • <a>: 하이퍼링크를 추가하는 태그입니다. href 속성으로 링크 주소를 지정합니다.
    예: <a href="https://example.com">여기를 클릭하세요</a>.
  • <img>: 이미지를 삽입하는 태그입니다. src 속성으로 이미지 경로를 지정하고, alt 속성으로 대체 텍스트를 제공합니다.
    예: <img src="image.jpg" alt="이미지 설명">.

4. 리스트 태그

  • <ul>: 순서 없는 리스트를 생성합니다.
  • <ol>: 순서 있는 리스트를 생성합니다.
  • <li>: 리스트 항목을 정의합니다.
    예:html복사편집<ul> <li>항목 1</li> <li>항목 2</li> </ul>

5. 표 관련 태그

  • <table>: 표를 생성합니다.
  • <tr>: 표의 행(Row)을 생성합니다.
  • <td>: 데이터 셀을 정의합니다.
  • <th>: 표의 헤더 셀을 정의합니다.
    예:html복사편집<table> <tr> <th>제목 1</th> <th>제목 2</th> </tr> <tr> <td>내용 1</td> <td>내용 2</td> </tr> </table>

6. 폼 태그

  • <form>: 사용자 입력을 받는 양식입니다.
  • <input>: 단일 입력 필드를 생성합니다.
  • <button>: 버튼을 생성합니다.
  • <textarea>: 여러 줄 텍스트 입력 필드를 생성합니다.
    예:html복사편집<form> <input type="text" placeholder="이름을 입력하세요"> <button>제출</button> </form>

7. 메타정보

  • <meta>: 문서의 정보(문자셋, 키워드 등)를 정의.
  • <title>: 웹 페이지의 제목을 정의. 브라우저 탭에 표시.

🛠️ HTML 속성(Attribute) 개념

  • 정의: 태그에 추가적인 정보를 제공하는 키-값 쌍.
  • 형태: <태그 속성명="속성값">내용</태그>
  • 주요 속성
    • id: 고유한 식별자.
    • class: 여러 요소를 그룹화.
    • style: 인라인 스타일 지정.
    • href: 링크 경로.
    • src: 리소스 경로(이미지, 동영상 등).
    • alt: 대체 텍스트(이미지 사용 불가능 시 표시).

1. HTML 속성 개념

속성은 태그에 추가적인 정보를 제공하며, 항상 속성명="속성값" 형태로 작성됩니다. 주요 속성은 다음과 같습니다.

  • id: 고유한 식별자를 제공합니다.
  • class: 여러 요소를 그룹화할 때 사용합니다.
  • style: 인라인 스타일을 지정합니다.
  • href: 링크 경로를 정의합니다.
  • src: 이미지나 스크립트 파일 경로를 지정합니다.
  • alt: 이미지를 사용할 수 없을 때 표시되는 대체 텍스트를 제공합니다.

2. HTML 문서 기본 구조

HTML 문서는 다음과 같은 기본 구조를 가집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 기본 구조</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>HTML은 웹 페이지를 만드는 기초입니다.</p>
</body>
</html>

자주 묻는 질문

Q. HTML 코드는 어디에서 실행하나요?


HTML 코드는 웹 브라우저에서 실행되며, 파일을 저장한 후 브라우저로 열면 실행 결과를 볼 수 있습니다.

Q. HTML은 프로그래밍 언어인가요?


아니요, HTML은 마크업 언어로 웹 페이지의 구조를 정의하는 데 사용됩니다. 동적인 기능은 JavaScript로 구현합니다.

Q. HTML5는 무엇이 다른가요?


HTML5는 이전 버전에 비해 멀티미디어 요소(<video>, <audio> 등)와 인터랙티브 기능을 더 쉽게 추가할 수 있게 해줍니다.

Q. <div><span>의 차이는 무엇인가요?

<div>는 블록 요소로 한 줄 전체를 차지하며, 레이아웃을 구성하는 데 사용됩니다. <span>은 인라인 요소로 텍스트의 특정 부분을 꾸밀 때 사용됩니다.

✨ HTML의 학습 팁

  • 기본 구조를 이해하세요: HTML 태그는 중첩 구조로 되어 있습니다.
  • 실습 중심으로 배우기: 간단한 HTML 문서를 직접 작성하고 실행해 보세요.
  • CSS와 JavaScript와 함께 학습: HTML만으로는 한계가 있으므로 스타일링(CSS)과 동적 기능(JavaScript)을 함께 익히면 좋습니다.

이제 HTML의 기본 용어와 개념에 익숙해지셨나요? 😊

Content View