[웹 스터디 1주차] HTML

Suyoung·2026년 9월 20일

웹 개발의 핵심 3요소(HTML, CSS, JavaScript)를 학습하고, 학교 주변 식사 메뉴를 추천하는 실동작 웹 서비스를 제작한다.

1. VS Code 설치

웹 문서를 만들 때 작성할 코드를 입력하는 프로그램인 웹 편집기로 VS Code를 사용한다.

VS Code 웹사이트 접속
사용자 시스템에 맞는 VS Code 파일 다운로드
한글 설정 (선택)
Ctrl+Shift+P → Configure Display Langage → 한국어

2. 간단한 웹 문서 만들기

새 파일 만들기: 새 파일 클릭 → 파일 이름 'web.html' → Enter
.html 입력해야 웹 문서로 인식된다.
코드 입력: 간단한 텍스트를 입력한다.

웹 개발 기초
HTML
CSS
자바스크립트

작성 결과
마크업
마크업이란? 웹 문서의 각 부분이 어떻게 표시되어야 하는지 태그를 붙여주는 것
<h1>: 제목, <p>: 본문을 나타내는 태그
실행 결과

3. HTML 구조 파악

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 기본 문서</title>
</head>
<body>
  <h1>웹 문서 만들기</h1>
  <hr>
  <p>HTML</p>
  <p>CSS</p>
  <p>자바스크립트</p>
</body>
</html>

<!DOCTYPE html>: 현재 문서가 HTML 언어로 작성한 웹 문서임을 의미
<html>~</html>: 웹 문서의 시작과 끝을 나타내는 태그
<head>~</head>: 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분
<body>~</body>: 웹 브라우저 내용을 표시하는 태그

4. 텍스트 입력

<hn>제목을 나타내는 태그</hn>

n자리에 1~6까지 정수가 들어간다. < h1>...< h6> 순서로 크기가 작아진다.

<p>텍스트 단락을 만드는 태그</p>
<br>줄을 바꾸는 태그

<blockquote>인용할 때 쓰는 태그</blockquote>

<strong>텍스트를 굵게 표시하는 태그</strong>
<b>텍스트를 굵게 표시하는 태그</b>

<em>기울인 텍스트를 표시하는 태그</em>
<i>기울인 텍스트를 표시하는 태그</i>
<cite>기울인 텍스트를 표시하는 태그</cite>

5. 폼 삽입

<form [속성="속성값"]>여러 폼 요소</form>

폼을 만드는 가장 기본적인 형식이다. 속성에 따라 자료를 서버로 넘기는 방식, 데이터 처리 방식이 달라진다.

<fieldset>
  <legend>그룹이름</legend>
</fieldset>

하나의 폼 안에서 여러 구역을 나누어 표시할 때
<fieldset> 태그를 사용하고, <legend> 태그는 fieldset 태그로 나눈 구역 이름을 붙여준다.

<lable>레이블명<input></lable>

<lable> 태그는 input과 같은 폼 요소에 레이블을 붙일 때 사용한다. 폼 요소와 레이블 텍스트가 서로 연결된다.

6. 폼에서 사용하는 태그

<textarea>내용</textarea>

textarea: 폼에서 여러 줄을 입력하는 영역을 만들 때 사용한다.

<select>
  <option value="값1">내용1</option>
  <option value="값2">내용2</option>
</select>

사용자가 내용을 직접 입력하지 않고 여러 옵션 중 선택하는 입력을 받으려면 드롭다운 목록을 사용한다.
select: 드롭다운의 시작과 끝을 표시
option: 원하는 항목 추가

<button type="submit">내용</button>
<button type="reset">내용</button>
<button type="button">내용</button>

button: 폼을 전송하거나 초기화하는 버튼을 삽입
submit-폼을 서버로 전송, reset-폼에 입력한 내용 초기화, button-버튼 만들기

Suyoung

다음 포스트