안녕하세요! 웹 프로그래밍 수업의 기초, HTML 구조 잡기를 실습했습니다
비주얼 스튜디오(VS Code)를 활용해 직접 코드를 작성해 보니,
우리가 매일 보는 웹사이트들이 어떤 뼈대로 이루어져 있는지 조금씩 실감이 나네요 :)
1. HTML의 기본 골격 이해하기비주얼 스튜디오 코드(VS Code)에서 새 파일을 만들고
! 만 입력하면 표준 HTML5 골격이 자동으로 생성됩니다.
코드 핵심 요약 :
- <!DOCTYPE html>: "이건 HTML5 문서야!"라고 선언
- <html lang="en">: 페이지의 기본 언어 설정 (한국어라면 ko로 변경 권장)
- <meta charset="UTF-8">: 가장 중요! 한글이 깨지지 않게 해주는 문자 인코딩 설정
- <meta name="viewport" ...>: 스마트폰이나 태블릿 등 기기 크기에 맞춰 화면을 조절해주는 모바일 대응 설정
- <title>: 브라우저 상단 탭에 들어갈 제목입니다.
- <body>: 우리가 작성한 글이 들어가는 실제 콘텐츠 공간
2. 실습 1: 기초 자기소개 페이지
첫 번째 실습에서는 가장 기본이 되는 제목(h1)과 문단(p) 태그를 활용해 보았습니다.
- <h1>자기소개</h1>: 페이지의 가장 큰 주제를 나타냅니다.
- <p>: 문단을 나눌 때 사용하며, 텍스트를 구조적으로 배치합니다.
<h1> ~ <h6>: 제목 (숫자가 커질수록 글자는 작아짐)
p: 문단 나누기
'웹 프로그래밍' 카테고리의 다른 글
| [웹 프로그래밍 실습] 포트폴리오 웹 페이지 제작 (0) | 2026.04.26 |
|---|