“웹사이트는 어떻게 만들어지는 걸까?” <br> “코딩 한 줄 몰라도 괜찮을까?”
자, 여러분의 궁금증을 HTML과 함께 아주 기초부터 풀어드릴게요!
🧱 HTML이란? 먹는 건가요?
HTML은 HyperText Markup Language의 약자예요. 쉽게 말해 웹페이지의 뼈대를 만드는 언어랍니다.
📌 비유하자면…
- HTML: 건물의 벽돌과 골조
- CSS: 인테리어, 페인트칠
- JavaScript: 자동문, 조명 같은 동적인 기능
🔡 HTML의 기본 구조, 아주 쉽게!
html
복사편집
<!DOCTYPE html> <html> <head> <title>나의 첫 웹페이지</title> </head> <body> <h1>안녕하세요!</h1> <p>HTML 배우는 중이에요 😎</p> </body> </html>
📎 간단 해설:
- <!DOCTYPE html>: 이건 HTML5 문서야~ 라고 선언!
- <html>: 모든 HTML 코드는 여기 안에!
- <head>: 눈에는 안 보이지만 중요한 정보들!
- <body>: 우리가 실제로 보는 웹페이지 내용!
🏷️ 자주 쓰는 HTML 태그 미리보기
태그설명
| <h1> ~ <h6> | 제목 태그 (숫자가 클수록 글씨는 작아짐) |
| <p> | 문단을 쓸 때 |
| <a href="url"> | 링크 연결할 때 |
| <img src="경로"> | 이미지 넣기 |
| <ul>, <ol>, <li> | 목록 만들기 (순서 없는/있는 리스트) |
✨ 실습: 나만의 소개 페이지 만들기
html
복사편집
<!DOCTYPE html> <html> <head> <title>내 소개</title> </head> <body> <h1>안녕하세요, 저는 웹초보입니다!</h1> <p>HTML 너무 재밌어요!</p> <img src="myphoto.jpg" alt="나의 사진"> <a href="https://www.google.com">구글로 가기</a> </body> </html>
🚀 마무리 꿀팁!
- 크롬에서 Ctrl + U 눌러서 다른 웹사이트의 HTML 구조를 엿보세요!
- 에디터 추천: VSCode, Sublime Text, 혹은 온라인 에디터인 CodePen
'청년정보방' 카테고리의 다른 글
| 📙 [HTML 입문 가이드] 3편: 진짜 개발자처럼 HTML 고급 기술 마스터 (1) | 2025.03.28 |
|---|---|
| 📗 [HTML 입문 가이드] 2편: 실전에서 살아남는 HTML 중급 기술 (0) | 2025.03.28 |
| [미국 트렌드 시리즈]🇺🇸 “Z세대가 세상을 바꾼다” (0) | 2025.03.27 |
| 🧳 중국 가전업체들, 짐 싸서 해외로! 한국 기업 긴장해야 하나?! (2) | 2025.03.27 |
| 🤖 중국 과학자들, 이번엔 '진짜 사람 같은 로봇 손' 만들었다?! (1) | 2025.03.27 |