Dev/WEB

[WEB][HTML] HTML 기초 - 기본 구조와 기본 태그

청월누리 2025. 1. 29. 00:53

HTML이란?

  • 웹 페이지를 구조화하고 콘텐츠를 표현하기 위해 사용되는 언어
  • HTML(HyperText Markup Language)은 마크업 언어로 프로그래밍 언어가 아님

주요 특징

  • 구조 제공 : 텍스트, 이미지, 링크 등 다양한 요소를 포함하는 웹 페이지의 골격을 만듦
  • 링크 연결 : 다른 문서나 웹 페이지로의 하이퍼링크를 지원
  • 플랫폼 독립성 : 어떤 기기나 운영체제에서도 동일한 HTML 파일을 표시할 수 있음
  • HTML5 : 최신 표준으로, 멀티미디어 요소를 포함하여 시멘틱 태그를 지원

HTML의 기본 구조

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>주요 콘텐츠 작성</h1>
</body>
</html>
  • <!DOCTYPE html> : 해당 문서의 성격을 알리는 선언 >> "이 문서는 HTML 문서입니다"라는 의미
  • <html> : HTML 문서의 루트(root) 요소로, 모든 HTML 내용은 이 태그 안에 표함
    • lang 속성 : 이 문서가 어떤 언어로 작성되었는지 알려주는 역할
  • <head> : 문서의 메타데이터(문서 제목, 인코딩, 외부 리소수 연결 등)를 포함
    • <meta> : 문서에 대한 추가 설명
      • ex) <meta charset="UTF-8"> : UTF-8 인코딩 지정
    • <title> : 웹 문서의 제목
  • <body> : 사용자가 브라우저에서 보는 모든 콘텐츠(텍스트, 이미지 등)가 포함되는 영역

HTML의 기본 태그

태그의 기본 구조

<열린태그 속성 = "속성값"> 콘텐츠 </닫힌태그>
  • 태그 : 입력된 정보의 성격
    • 기본적으로 여는 태그(<태그>)와 닫는 태그(</태그>)를 가짐
    • 닫히지 않는 태그(self-closing tag)도 존재 (ex. <img>, <br> 등)
  • 속성 : 태그에 추가 정보 제공
    • 속성은 항상 속성명 = 속성값 형식으로 작성
<!-- 태그 사용 예시 -->
<a href="https://www.example.com" target="_blank">Example</a>
  • <a> : 입력된 정보의 성격
    • <a> 태그는 앵커(링크) 태그로, 다른 페이지로 연결해주는 성격을 가진 태그
  • href 속성 : 링크 대상 주소를 지정하는 속성
  • target 속성 : 링크를 새창에서 열도록 지정하는 속성

자주 사용되는 기본 태그

제목(Heading) 태그

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<h4>제목 4</h4>
<h5>제목 5</h5>
<h6>제목 6</h6>

  • 제목 태그는 문서의 구조와 계층을 나타냄
  • 중요도에 따라 <h1>부터 <h6>까지 구분하여 사용

목록 태그

  • 순서가 있는 목록 태그 - <ol>
<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>

  • 순서가 없는 목록 태그 - <ul>
<ol>
    <li>첫 번째 항목</li>
    <li>두 번째 항목</li>
</ol>

앵커(링크) 태그

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

  • 링크를 추가할 때 사용하는 태그
  • href 속성 : 연결할 URL 지정
    • 이동할 주소를 입력하여 다른 페이지로 이동 가능
    • 같은 페이지의 다른 위치로 이동 가능
    • 이메일 보내기 가능
  • target="_blank" : 링크를 새 창에서 열도록 지정

문단 태그

<p>이것은 문단입니다.</p>
  • 텍스트를 문단 단위로 구분

입력 태그

<!-- input 태그 - text (default) -->
<input type="text" value="" placeholder="아이디를 입력하세요요" />

<br />

<!-- input 태그 - password -->
<input type="password" value="" placeholder="비밀번호 입력하세요" />

<br />

<!-- input 태그 - radio -->
<input name="class" type="radio" value="radio1" /> 라디오 1
<input name="class" type="radio" value="radio2" /> 라디오 2
<input name="class" type="radio" value="radio3" checked /> 라디오 3

<br />

<!-- input 태그 - checkbox -->
<input name="class1" type="checkbox" value="checkbox1" /> 체크박스 1
<input name="class1" type="checkbox" value="checkbox2" checked /> 체크박스 2
<input name="class1" type="checkbox" value="checkbox3" checked /> 체크박스 3

  • 사용자로부터 입력을 받는 태그
  • type 속성 : 해당 <input> 태그에 대한 타입을 명시
    • ex) text (기본값), password, button, checkbox, radio, date 등
  • value 속성 : 기본 값을 작성할 때 사용하며, 작성하지 않으면 빈 값이 기본값이 됨
  • placeholder 속성 : 무엇을 입력해야 하는지 안내 문구를 넣을 때 사용
  • name 속성 : <input> 태그의 type이 radio 혹은 checkbox인 경우, 같은 속성값을 지정함으로써 그룹으로 지정 가능

선택 요소 태그

<select>
    <option value="option1" selected>옵션 1</option>
    <option value="option2">옵션 2</option>
</select>

  • 드롭다운 메뉴 생성
  • <select> 태그의 자식 태그로 <option> 태그가 있으며, <option> 태그가 없으면 선택지가 생기지 않음
  • selected 속성을 <option> 태그에 부여하여 기본 선택 값 설정 가능

표(Table) 태그

<table>
    <tr>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
    <tr>
        <td>내용 1</td>
        <td>내용 2</td>
    </tr>
</table>

  • <table> : 표 생성 태그
  • <tr> : 행 (row) 태그
  • <th> : 열 (column) 제목 태그
  • <td> : 데이터 태그

영역 구분 태그

  • <div> 태그 : 블록 레벨 요소로, 콘텐츠를 묶을 때 사용 (전체 레이아웃 생성 시 주로 사용)
  • <span> 태그 : 인라인 요소로, 텍스트를 꾸미는 데 주로 사용

기타 텍스트 태그

  • <br> 태그 : 줄 바꿈 시 사용
  • <strong> : 텍스트를 굵게 만들 때 사용
  • <em> : 텍스트를 기울일 때 사용
  • <u> : 텍스트에 밑줄을 넣을 때 사용