[1강] 웹 개발의 첫걸음! HTML 개념과 기본 구조 마스터하기
"웹사이트의 설계도를 그려봅시다."
안녕하세요! 오늘부터 웹 개발의 가장 기초인 HTML 연재를 시작합니다. 우리가 매일 사용하는 사이트들은 모두 이 HTML이라는 언어로 뼈대가 만들어져 있습니다.
1. 웹사이트의 3요소
웹사이트는 크게 세 가지 기술이 합쳐져 만들어집니다.
- 🏠 HTML (Structure): 건물의 뼈대 (벽, 창문, 문)
- 🎨 CSS (Presentation): 건물의 인테리어 (디자인)
- ⚡ JavaScript (Behavior): 건물의 기능 (동작)
2. 핵심 용어 정리
● 태그(Tag): 브라우저에게 내리는 명령어 (예: <p>)
● 요소(Element): 시작 태그부터 종료 태그까지의 한 덩어리
● 속성(Attribute): 태그에 추가 정보를 주는 값 (예: href, src)
3. 표준 HTML5 기본 구조
아래는 모든 웹페이지의 시작이 되는 표준 코드입니다. 내용을 확인하고 직접 작성해 보세요!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 홈페이지</title>
</head>
<body>
<h1>안녕하세요! 반가워요.</h1>
<p>드디어 첫 웹페이지를 만들었습니다.</p>
<h3>내가 좋아하는 것들</h3>
<ul>
<li>코딩 공부하기</li>
<li>커피 마시기</li>
</ul>
<a href="https://www.tistory.com">티스토리 바로가기</a>
</body>
</html>
오늘의 요약!
HTML은 웹사이트의 뼈대이며, 태그를 통해 브라우저와 소통합니다.
다음 2강에서는 검색 로봇이 좋아하는 '시맨틱 태그'에 대해 알아볼게요!
'Frontend > HTML' 카테고리의 다른 글
| [5강] 실전! HTML로 만드는 나만의 미니 포트폴리오 (0) | 2026.02.09 |
|---|---|
| [4강] 사용자 소통의 창구! Form 태그와 입력 양식 (0) | 2026.02.09 |
| [3강]텍스트와 멀티미디어! 생동감 있는 페이지 만들기 (0) | 2026.02.09 |
| [2강]검색 엔진이 좋아하는 글쓰기! 시맨틱 태그(Semantic Tags) 활용법 (0) | 2026.02.09 |