🎯 학습 목표
- HTML이 무엇인지 이해한다.
- HTML 문서의 기본 구조를 작성할 수 있다.
- 핵심 태그의 용도를 이해하고 사용할 수 있다.
- 직장인이 실제로 사용할 간단한 자기소개 페이지를 직접 만든다.
🗂️ 강의 개요
이 강의는 HTML을 처음 배우는 직장인을 대상으로 “웹페이지의 뼈대가 되는 구조”를 작성할 수 있게 하는 입문 강의입니다.
학습 내용
1️⃣ HTML 개념과 역할
2️⃣ HTML 문서의 기본 구조
3️⃣ 주요 태그 종류와 의미
4️⃣ 시맨틱 태그 이해하기
5️⃣ 직장인 활용 사례
6️⃣ 실습 과제 설계
1️⃣ HTML이란?
- HTML(HyperText Markup Language)은 웹페이지의 구조를 정의하는 마크업 언어입니다.
- “마크업”이란 문서의 각 부분이 어떤 의미를 가지는지 표시하는 것.
- 웹 브라우저는 HTML을 해석해 페이지를 화면에 그립니다.
2️⃣ HTML 문서의 기본 구조
📌 표준 구조 예시
<html lang="ko"> <head> <meta charset="UTF-8"> <title>문서 제목</title> </head> <body> <!-- 화면에 보이는 콘텐츠 --> </body> </html>
✔️ 코드 상세 해설
<!DOCTYPE html>→ 이 문서가 HTML5임을 선언. 브라우저에게 표준 모드로 렌더링하라고 알림.
<html lang="ko">→ 문서의 루트(root) 요소.
lang="ko"는 언어가 한국어임을 나타냄.<head>→ 문서의 메타데이터(제목, 인코딩, 스타일 등)를 정의. 사용자 화면에는 보이지 않음.
<meta charset="UTF-8">→ 문자 인코딩을 UTF-8로 설정. 한국어, 특수문자 깨짐 방지.
<title>→ 브라우저 탭 제목.
<body>→ 실제로 사용자에게 보이는 모든 콘텐츠를 담는 영역.
💡 직장인 실전 TIP
"회사 홈페이지 제작 시 에는 메타 태그나 스타일시트 링크를 넣고, 에는 실제 화면 구성을 넣습니다."
3️⃣ 주요 HTML 태그 살펴보기
아래는 가장 자주 사용하는 기본 태그입니다.
| 태그 | 의미 및 사용 예 |
|---|---|
<h1> ~ <h6> |
문서의 제목 <h1>메인제목</h1> |
<p> |
문단(Paragraph). <p>내용</p> |
<a> |
하이퍼링크. <a href="https://example.com">링크</a> |
<img> |
이미지 삽입. <img src="이미지주소" alt="대체텍스트"> |
<ul>, <ol>, <li> |
목록(순서 없는/있는). <ul><li>항목</li></ul> |
<div>, <span> |
구획 나누기, 스타일 적용 |
✅ 주요 태그 코드 예제
1-1-1.html
<h1>나의 프로필</h1> <p>안녕하세요! 저는 웹개발자 홍길동입니다.</p> <a href="http://www.google.com/">Google</a> <img src="cat.jpg" alt="고양이 사진" width="200px">
4️⃣ HTML5 시맨틱 태그
시맨틱(Semantic)이란 “의미가 있는” 구조를 만드는 것.
📌 주요 시맨틱 태그
| 태그 | 의미 |
|---|---|
<header> |
머리말 영역 |
<nav> |
내비게이션 메뉴 |
<section> |
문서의 구획 |
<article> |
독립적인 콘텐츠 블록 |
<aside> |
사이드 콘텐츠 |
<footer> |
꼬리말 영역 |
✅ 시맨틱 예제 코드
1-1-2.html
<header> <h1>홍길동의 프로필</h1> </header> <main> <section> <h2>소개</h2> <p>프론트엔드 개발자입니다.</p> </section> </main> <footer> <p>© 2025 홍길동. All rights reserved.</p> </footer>
5️⃣ 직장인 활용 사례
- 회사 홈페이지 팀 소개 페이지
- 사내 프로젝트 문서 사이트
- 개인 포트폴리오 페이지
🗣️ 팁
"실제 회사에서도 HTML 기본 구조를 잘 짜두면 디자이너나 다른 개발자가 유지 보수하기 훨씬 좋습니다."
6️⃣ [실습 강의] 나만의 프로필 페이지 만들기
🎯 목표
- HTML의 기본 구조 작성
- 대표 태그 활용
- 시맨틱 태그로 의미 부여
📌 실습 요구 사항
✅ 이름(제목)
✅ 자기소개 문단
✅ 프로필 사진
✅ 연락처 이메일 링크
✅ 관심사 목록
💻 실습 코드 예제
1-1-3.html
<html lang="ko"> <head> <meta charset="UTF-8" /> <title>나의 프로필</title> </head> <body> <header> <h1>홍길동의 프로필</h1> </header> <section> <h2>소개</h2> <p>안녕하세요! 프론트엔드 개발자 홍길동입니다. 사용자 경험을 고려한 웹을 만듭니다.</p> </section> <section> <h2>프로필 사진</h2> <img src="profile.png" alt="홍길동 사진" width="200px"> </section> <section> <h2>연락처</h2> <p>Email: <a href="mailto:hgildong@example.com">hgildong@example.com</a></p> </section> <section> <h2>관심사</h2> <ul> <li>웹 디자인</li> <li>자바스크립트</li> <li>UX 리서치</li> </ul> </section> <footer> <p>© 2025 홍길동. All rights reserved.</p> </footer> </body> </html>
💡 실습 가이드
1️⃣ 파일을 새로 만들고 위 코드 작성
2️⃣ 본인 이름, 소개, 사진 경로 수정
3️⃣ 관심사 목록도 본인에 맞게 편집
4️⃣ 웹 브라우저에서 열어 확인
📌 직장인 실무 팁
- 프로필 페이지는 개인 포트폴리오 첫걸음
- 실제 회사에서도 “팀 소개”, “사원 프로필” 페이지 제작에 필요
- 시맨틱 태그를 쓰면 협업이 편하다
▶ 1 - 1- 1.html 예시 이미지
▶ 1 - 1- 2.html 예시 이미지
▶ 1 - 1- 3.html 예시 이미지
