📘 HTML 완전 기초부터 다시 시작하기
포기했던 사람도 다시 도전하게 만드는 웹코딩 입문 정리
✅ 1. HTML이 뭔가요?
- HTML은 웹사이트의 뼈대를 만드는 언어예요.
- 쉽게 말해, 블로그 글을 쓴다면
HTML은 본문, CSS는 글씨체/배경색, JS는 반짝이는 효과입니다. - HTML은 프로그래밍 언어가 아님! 구조를 설계하는 마크업 언어입니다.
✅ 2. 제일 기본 구조 (HTML5 기준)
html
복사편집
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>내 첫 번째 웹페이지</title> </head> <body> <h1>안녕하세요!</h1> <p>이것이 나의 첫 웹사이트입니다.</p> </body> </html>
📌 외워야 하는 건 딱 이것뿐!
→ 구조 = html > head + body
→ 제목은 <title>, 화면에 보이는 건 <body> 안에!
✅ 3. 메모장으로 HTML 웹페이지 만들기 (완전 초보 실습)
📂 준비물:
- 윈도우 메모장 (또는 Notepad++)
- 크롬이나 엣지 같은 웹 브라우저
🛠 따라해보세요:
- 메모장 열기
- 아래 코드 복붙
html
복사편집
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>내 첫 웹사이트</title> </head> <body> <h1>나의 첫 웹페이지</h1> <p>반갑습니다. HTML은 생각보다 쉽습니다!</p> </body> </html>
- 다른 이름으로 저장
→ 파일 > 다른 이름으로 저장
→ 파일 이름: index.html
→ 파일 형식: 모든 파일
→ 인코딩: UTF-8
→ 저장! - 저장된 index.html 파일을 더블클릭!
→ 브라우저에서 웹사이트 실행됨
✅ 4. HTML의 기본 태그들
태그용도예시
| <h1>~<h6> | 제목 (숫자가 클수록 작아짐) | <h1>제목</h1> |
| <p> | 문단 | <p>문장입니다</p> |
| <a> | 링크 | 네이버 |
| <img> | 이미지 | <img src="사진주소.jpg"> |
| <ul>, <ol> | 리스트 | <ul><li>아이템</li></ul> |
| <div> | 구역 나눔 | <div>내용</div> |
| <span> | 글자 감싸기 (작은 구역) | <span>글자</span> |
✅ 5. 왜 메모장으로 HTML 코딩 연습해야 하나요?
답: 진짜 웹 구조의 본질을 이해하려면, ‘가장 단순한 도구’로부터 시작해야 하기 때문입니다.
🔹 1. 메모장은 HTML의 ‘핵심’만 보여준다
- 요즘 에디터(VS Code 등)는 자동 완성, 색깔 강조, 미리보기까지 해줍니다.
→ 초보자 입장에선 너무 많은 정보가 한꺼번에 보여서 더 헷갈림 - 반면, 메모장은 그냥 "텍스트만 입력 가능"
→ 진짜로 필요한 것만, 구조만, 순수한 HTML만 보이게 됩니다.
📌 즉, 불필요한 기능 없이 뼈대부터 익히는 데 최고 도구라는 거예요.
🔹 2. 웹사이트는 결국 .html 파일이다
- 웹사이트는 결국 index.html이라는 하나의 파일에서 시작됩니다.
- 메모장으로 .html 저장하면 브라우저에서 바로 열 수 있음
→ 결과 확인이 즉시 가능, 따로 설치나 빌드 과정 필요 없음.
html
복사편집
<!DOCTYPE html> <html> <head><title>연습</title></head> <body>메모장으로 만든 웹페이지!</body> </html>
→ 위처럼 저장해서 더블클릭하면 바로 실행됨. 이 간단함을 경험해보는 게 중요.
🔹 3. 마치 종이에 손글씨로 외우듯, 손에 익는다
- VS Code나 다른 도구는 초보자를 도와주는 대신 생각 안 해도 되게 만듦
- 메모장은 불편하지만, 직접 다 쳐야 해서 자연스럽게 외워짐
- 마치 수학을 공책에 손으로 써보는 것처럼, 손이 기억하게 된다.
🔹 4. 포기했던 사람일수록 메모장이 효과적이다
- 예전에 어렵다고 포기한 사람은 기능 많고 복잡한 도구에서 길을 잃었을 가능성 큼
- 메모장은 기능이 없기 때문에, 길 잃을 걱정도 없음
- HTML만 집중할 수 있게 도와주는 가장 단순한 도구
🔹 5. 설치 안 해도 되고, 가볍고, 어디서나 가능
- 메모장은 모든 윈도우에 기본 탑재됨
- USB, 공용PC, 학원, 어디서든 바로 열 수 있음
- 부담 없이 연습 시작 → 꾸준함 유지하기 좋음
✅ 6. 결론: 메모장은 “불편해서 더 좋은 도구”다
- 처음엔 불편해 보여도, 진짜 웹 개발자가 어떻게 시작했는지 체감할 수 있는 가장 좋은 방법입니다.
- 편한 도구는 나중에 써도 충분합니다.
- HTML의 구조와 원리를 익히고, **"웹은 결국 하나의 텍스트 파일에서 시작된다"**는 걸 느껴보세요.
✅ 7. 메모장 HTML 저장법 (바탕화면에 바로 뜨게)
📌 예시 파일명:
diff
복사편집
index.html
✔ 파일명은 꼭 .html로 끝나야 웹페이지처럼 열림.
(예: myweb.html, test01.html, index.html 전부 OK)
✅ 8. 저장 방법 (윈도우 메모장 기준)
- 메모장 열기
- HTML 코드 작성
html
복사편집
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>나의 첫 웹</title> </head> <body> <h1>Hello, world!</h1> </body> </html>
- [파일] → [다른 이름으로 저장] 클릭
- 저장 위치: 바탕화면
- 파일 이름:
diff
복사편집
index.html
- 파일 형식:
markdown
복사편집
모든 파일(*.*)
- 인코딩:
복사편집
UTF-8
- [저장] 클릭
✅ 9. 바탕화면에 이렇게 뜸
📄 index.html
→ 아이콘은 브라우저 모양 (크롬, 엣지 등)
✔ 더블 클릭하면 브라우저로 바로 열림
✔ 인터넷 연결 안 돼도 작동함 (파일 기반)
✅ 10. 자주 하는 실수 ⚠
실수결과
| index.html.txt로 저장됨 | → 그냥 텍스트 파일로 인식됨. 실행 안 됨 |
| 파일 형식 선택 안 하고 저장 | → 확장자가 자동 .txt로 붙음 |
| 인코딩 ANSI로 저장 | → 한글 깨질 수 있음 |
🔑 핵심 요약:
- 파일명: index.html
- 파일형식: 모든 파일
- 인코딩: UTF-8
- 위치: 바탕화면
✅ 11. 꺾이는 포인트와 포기했던 이유
흔한 포기 이유해결법
| 너무 외울 게 많아보여서 | 진짜 자주 쓰는 태그는 10개도 안 됨. 복붙하면서 익숙해지면 됨. |
| CSS랑 같이 배우려다 폭주 | HTML만 1~2주 먼저 하세요. 구조만 익히고 나중에 꾸며도 늦지 않아요. |
| 실습 안하고 영상만 봄 | 직접 메모장에 쳐봐야 기억됨. 하루에 1줄만 써도 돼요. |
| 재미없고 쓸모 없어보임 | 진짜 HTML만 잘 써도 이력서 포트폴리오 웹사이트 직접 만들 수 있어요. 블로그보다 자유도 훨씬 높음. |
✅ 12. CSS, JS는 나중에 배워도 됨
- HTML만으로도 꽤 괜찮은 웹페이지 만들 수 있어요.
- CSS는 ‘꾸미기’, JS는 ‘움직이기’입니다.
- 순서 추천:
- HTML 구조
- CSS 스타일
- JS 동작
✅ 13. 포기하지 않고 꾸준히 하는 팁
- 하루에 HTML 태그 1개만 정리해도 OK
- 블로그에 기록하면서 복습해요.
→ (예: <p> 태그 정리 + 예제) - 무료 추천 강의:
- 생활코딩 HTML
- 유튜브: 코딩애플, 드림코딩
✅ 14. 마무리하며: 다시 도전하세요
누구나 처음엔 어렵습니다.
하지만 메모장 하나만 있어도 웹사이트 만들 수 있다는 걸 직접 눈으로 확인하고 나면,
재미 붙는 순간이 반드시 옵니다.
"코딩은 이해보다 반복이다."
– Keepgoing. 포기하지 마세요.