HTML (HyperText Markup Language)
브라우저 내에서 웹 페이지의 구조를 정의하는 언어
태그(tag)를 사용하여 텍스트, 이미지, 링크 등 웹 콘텐츠의 의미와 구조를 명시하며, 클라이언트에 의해 해석되어 웹 페이지로 표시한다.
- HyperText (하이퍼텍스트) : 링크를 통해 HTML 페이지간 이동이 가능
- Markup Language (마크업 언어) : 건물의 뼈대와 같은 역할을 수행하며 컨텐츠를 어떻게 배치하고 구성할지 정의
- 클라이언트 프로그램에서만 해석되어 출력되므로 논리적인 기능 구현이 불가능
HTML의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>장바구니 리스트</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/app.js"></script>
</head>
<body>
<header>
<h1>장바구니 목록</h1>
</header>
<main>
<section class="add-item-section card">
<form id="item-form"> ... </form>
</section>
<section class="wishlist-section card">
<ul id="item-list"> ... </ul>
</section>
</main>
</body>
</html>
- <head>
- 사용자 눈에 보이지 않는 설정 정보들
- <title> : 브라우저 탭에 표시될 제목
- <meta charset="UTF-8"> : 한글(UTF-8)로 인코딩 한다는 선언
- <link> : css 파일을 불러오는 태그
- <script> :javascript 파일을 불러오는 태그
- <body>
- 사용자 눈에 보이는 모든 콘텐츠
- 태그(Tag)
- 문서의 특정 부분을 마크업 하는데 사용되는 단위로 꺾쇠 괄호(<>)로 감싸인 명령어
- <h1> : 제목
- <input> : 입력창
- 속성(Attribute)
- 태그에 대한 세부 설정
- <input> 태그 내에 이름="값" 형태로 작성되어 구체적인 설정 값 부여
- type="text" : 타입이 문자열
- id="username" : 고유한 id가 username
- placeholder="아이디 입력" : 입력창 안내문
- 요소(Element)
- 태그와 속성이 합쳐져 실제 웹페이지를 구성하는 완전한 요소
- <input> ... </input> 전체를 의미
🏷️ HTML 태그</> 종류 총모음
태그 모음 요약표 html 태그들을 표로 정리한 요약표 이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다. 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘
inpa.tistory.com
<form>
- 사용자가 입력한 여러 데이터를 하나의 묶음으로 감싸는 태그
- 백엔드 개발자가 알아야 할 태그
- form 내부의 input, select, textarea에 입력된 값이 javaScript를 통해 Json 형태로 변환되어 서버로 전송
<form id="item-form">
<div class="input-group">
<label for="item-name">상품명</label>
<input type="text" id="item-name" placeholder="예: 무선 헤드폰" required>
</div>
<div class="input-group">
<label for="item-price">가격</label>
<input type="number" id="item-price" placeholder="예: 120000" required min="0">
</div>
<div class="input-group">
<label for="item-category">카테고리</label>
<select id="item-category" required>
<option value="">카테고리 선택</option>
<option value="electronics">💻 전자제품</option>
...
</select>
</div>
<div class="input-group">
<label for="item-description">상품 설명 (선택)</label>
<textarea id="item-description" rows="3" placeholder="..."></textarea>
</div>
... (링크, 이미지 URL input) ...
<button type="submit" class="primary-btn">장바구니에 추가</button>
</form>
- <input> : 데이터 입력 필드
- type="text" : 텍스트
- type="number" : 숫자
- type="url" : 링크/이미지 (백엔드는 문자열로 받음)
- <select> / <option> : 선택 입력 필드
- <textarea> : 여러 줄 입력 필드
- <button type="submit"> : 제출 버튼
- <form> 묶음 안에 있는 데이터 전송 버튼
- Json으로 변경 후 전송
- 'submit' 이벤트 발생
'웹 > 관련 지식' 카테고리의 다른 글
| HTTP (HyperText Transfer Protocol) (0) | 2026.05.27 |
|---|---|
| JavaScript (0) | 2026.05.26 |
| CSS (Cascading Style Sheets) (0) | 2026.05.26 |
