Notice
Recent Posts
Recent Comments
Link
250x250
«   2025/03   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Tags more
Archives
Today
Total
관리 메뉴

공부해보잠

웹 프로그래밍 언어 -HTML 본문

자격증/정보처리

웹 프로그래밍 언어 -HTML

heejk 2025. 2. 19. 00:13
HTML의 개요

TML (HyperText Markup Language) 는 웹 페이지를 만들기 위한 마크업 언어입니다.
HTML을 사용하여 웹 브라우저에 표시되는 문서를 작성할 수 있습니다.

 

HTML의 특징

  • 태그(Tag)로 구성됨 → 문서의 구조를 정의
  • 트리(Tree) 구조 → 부모 태그 아래 자식 태그가 포함됨
  • 속성(Attribute)을 사용하여 기능을 구체화
  • 대소문자를 구분하지 않음 → <html> 과 <HTML> 은 동일하게 인식됨
  • 속성 값은 큰따옴표("")로 묶는 것이 일반적

HTML 문서의 기본 구조

HTML 문서는 <html> 태그로 감싸져 있으며, <head>와 <body>로 구성됩니다.

 

기본 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>HTML 기본 구조</h1>  <!-- 제목 태그 -->
    <p>HTML 문서는 이렇게 구성됩니다.</p>  <!-- 단락 태그 -->
</body>
</html>
  • <!DOCTYPE html> → 문서가 HTML5 버전임을 선언
  • <html> → 문서의 최상위 태그
  • <head> → 문서 정보를 정의 (메타데이터, 제목, CSS, JavaScript 등)
  • <body> → 브라우저에 실제로 표시되는 콘텐츠

기본 태그

태그 의미 주요 속성
<img> 이미지 삽입 src: 이미지 경로 
width, height: 이미지 크기 
title: 이미지 설명
<h1> ~ <h6> 제목을 표시 숫자가 작을수록 큰 제목
<br> 줄 바꿈 없음
<p> 문단(Paragraph) 없음
<a> 하이퍼링크 생성 href: 이동할 URL 
target: _blank(새 창), _self(현재 창)

 

예제

<h1>제목 태그 예제</h1>
<p>이것은 문단입니다.</p>
<a href="https://www.example.com" target="_blank">링크</a>
<img src="image.jpg" width="200" height="100" title="샘플 이미지">

 

목록 태그

목록 태그는 여러 항목을 나열할 때 사용된다.

태그 의미
<ul> 순서 없는 목록 (• 점 목록)
<ol> 순서 있는 목록 (1, 2, 3 번호 목록)
<li> 목록 항목을 지정
<dl> 설명 목록 (Definition List)
<dt> 설명 제목
<dd> 설명 내용

예제

<h3>순서 없는 목록</h3>
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
</ul>

<h3>순서 있는 목록</h3>
<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

<h3>설명 목록</h3>
<dl>
    <dt>HTML</dt>
    <dd>웹 페이지의 기본 구조를 만드는 언어</dd>
    <dt>CSS</dt>
    <dd>웹 페이지 스타일을 지정하는 언어</dd>
</dl>

 

프레임 태그

화면을 여러 영역으로 분할할 때 사용 (현재는 <iframe>이 더 많이 사용됨).

태그 의미
<frameset> 프레임을 나누는 부모 태그
<frame> 각 프레임을 정의
<iframe> 페이지 내에 다른 HTML 문서를 삽입

예제

<iframe src="https://www.example.com" width="500" height="300"></iframe>

 

테이블 태그

표를 만들 때 사용한다.

태그 의미
<table> 표를 생성
<thead> 표의 머리글 부분
<tbody> 표의 본문 부분
<tfoot> 표의 바닥글 부분
<tr> 행(row)을 추가
<td> 열(column) 추가 (데이터 셀)
<th> 제목 셀 (굵게 표시)
colspan 셀을 가로로 합침
rowspan 셀을 세로로 합침

예제

<table border="1">
    <thead>
        <tr>
            <th>이름</th>
            <th>나이</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>김철수</td>
            <td>25</td>
        </tr>
        <tr>
            <td>이영희</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

 

폼(Form) 태그

태그 의미 주요 속성
<form> 폼 영역 생성 action: 데이터를 보낼 URL 
method: GET(쿼리스트링), POST(보안성↑)
<input> 입력 필드 type: text, password, radio, checkbox, submit 등
<textarea> 여러 줄 입력 필드 rows, cols: 크기 지정
<button> 버튼 생성 type: submit, reset, button
<select> 드롭다운 목록 multiple: 다중 선택 가능
<option> 드롭다운 목록 항목 selected: 기본 선택 항목
<label> 입력 필드와 연결 for: 연결할 id 지정

 

예제

<form action="submit.php" method="post">
    <label for="username">아이디:</label>
    <input type="text" id="username" name="username"><br>

    <label for="password">비밀번호:</label>
    <input type="password" id="password" name="password"><br>

    <label>성별:</label>
    <input type="radio" name="gender" value="male"> 남자
    <input type="radio" name="gender" value="female"> 여자 <br>

    <label>취미:</label>
    <input type="checkbox" name="hobby" value="reading"> 독서
    <input type="checkbox" name="hobby" value="sports"> 운동 <br>

    <label>국가 선택:</label>
    <select name="country">
        <option value="kr">한국</option>
        <option value="us">미국</option>
    </select><br>

    <button type="submit">제출</button>
</form>

 

기타 태그

기타 문서 구조를 보완하는 태그.

태그 의미
<mark> 형광펜 효과
<small> 작은 글씨 표시
<sub> 아래 첨자 (예: H₂O)
<sup> 위 첨자 (예: x²)
<cite> 인용 및 출처 표기
<link> 외부 스타일시트 연결
<nav> 웹 사이트의 메뉴, 링크 모음을 만들 때 사용(네비게이션 메뉴 그룹)

예제

<p>이 단어를 <mark>강조</mark>합니다.</p>
<p>이것은 <small>작은 글씨</small>입니다.</p>
<p>물의 화학식은 H<sub>2</sub>O입니다.</p>
<p>수학에서 제곱은 x<sup>2</sup>로 표시합니다.</p>
<p><cite>2024 웹 개발 기본서</cite>를 참고했습니다.</p>
<link rel="stylesheet" href="style.css">
<nav>
    <a href="home.html">홈</a>
    <a href="about.html">소개</a>
    <a href="contact.html">문의</a>
</nav>

 

728x90

'자격증 > 정보처리' 카테고리의 다른 글

절차적 프로그래밍 언어  (0) 2025.02.19
웹 프로그래밍 언어 -JavaScript  (0) 2025.02.19
Python제어문  (0) 2025.02.17
Python의 기초  (0) 2025.02.17
Java클래스  (0) 2025.02.16
'자격증/정보처리' Related Articles more