HTML 언어 정리
언어(Language)
- 정의: 정해진 규칙/기호 집합
- 언어와 언어 사이: 번역 필요 → 컴파일/인터프리터/렌더링
- 예: HTML ↔ 기계어 : 브라우저(Chrome, Edge, Safari 등)
HTML(Hyper Text Markup Language)
- 정의: 이동이 가능한 문자들을 제공하는 마크업 언어
- 마크업: 구조화된 표식
- 언어: 규칙/기호 집합
- 마크업 언어란 텍스트 앞뒤에 마크/덮쳐서 사용하는 언어
- 예시:
<h1>안녕</h1>
- 주석: 메모지(번역하지 않은 구역)
<!-- 내용물 -->
마크업(Markup)
- HTML 제작사가 미리 정의한 규칙 = 문법
- 작성 방법
- 시작/끝 태그
<h1>내용물</h1> <li>항목</li> - 단일 태그(Self-closing)
<img /> <input />
- 시작/끝 태그
- 속성 포함 작성
예시:<태그명 속성명="값"><나라는존재 name="이겨레" job="백수"> - 참고: HTML은 프로그래밍 언어 X → 마크업 언어
(JS/React 등은 프로그래밍 언어)
마크업 종류
- 작성 주의: 중첩 태그 작성 시 들여쓰기(TAB) → 범위 지정 후
Shift + Alt + F
<html>: HTML 전체 감싸는 마크업<head>: HTML 문서 옵션 정보<title>: 페이지 제목<link href="css파일경로" rel="stylesheet">: CSS 포함<script src="JS파일경로">: JS 포함
<body>: 문서 본문<h1> ~ <h6>: 제목, 글자 크기/굵기/구역 의미<p>: 문단<br />: 줄바꿈<hr />: 가로선<ol>: 순서 있는 목록<ul>: 순서 없는 목록<li>: 목록 항목<a>: 링크<a href="이동할경로">텍스트</a> <a href="이동할경로" target="_blank">텍스트</a> <!-- 새 창/탭 --><img />: 이미지<audio></audio>: 오디오<video></video>: 비디오- 공통 속성:
src="파일경로" - 비디오 추가 속성:
controls="controls": 컨트롤러 제공autoplay="autoplay": 자동 실행(정책상 차단 가능)muted="muted": 음소거,autoplay + muted→ 자동 실행 가능
- 공통 속성:
<input>: 입력 상자- 주요 속성
type"text": 문자 입력 (기본)"password": 가려진 문자 입력"file": 첨부파일 입력 (multiple→ 다중 선택)"radio": 단일 선택 (name동일)"checkbox": 복수 선택"number": 숫자 입력"date": 날짜 선택"datetime-local": 날짜/시간 선택"time": 시간 선택"month": 월 선택"week": 주 선택"range": 범위 슬라이더"submit": 폼 전송"reset": 폼 초기화"button": 일반 버튼
name: 동일 태그 식별value: 입력값disabled: 비활성화readonly: 수정 불가maxlength: 최대 글자수autofocus: 포커스 설정placeholder: 가이드 텍스트
- 주요 속성
<button>: 버튼, JS 함수 연동- 표(Table)
<table border="1" style="border-collapse:collapse;"> <tr> <th>제목</th> <th>제목</th> </tr> <tr> <td>데이터</td> <td>데이터</td> </tr> </table>- 속성
border="1": 테두리style="border-collapse:collapse;": 이중 테두리 제거rowspan: 행 병합colspan: 열 병합
- 속성
우상향그래프