코딩 초보자도 10분 만에 시작하는 HTML5 웹 프로그래밍 입문 매우 쉬운 방법
목차
- HTML5란 무엇인가: 웹의 뼈대 이해하기
- 준비물: 메모장 하나면 충분한 개발 환경 설정
- HTML5의 기본 구조: 문서의 규칙 파악하기
- 꼭 알아야 할 필수 태그 5가지
- 텍스트와 이미지로 웹 페이지 꾸미기
- 링크와 목록으로 정보 연결하기
- 직접 만드는 첫 번째 HTML 웹 페이지 실습
- 웹 프로그래밍 학습을 위한 다음 단계
1. HTML5란 무엇인가: 웹의 뼈대 이해하기
웹 프로그래밍의 가장 기초는 HTML입니다. HTML5는 그 최신 표준 버전으로, 우리가 매일 보는 웹 사이트의 구조를 만드는 언어입니다.
- HTML의 의미: HyperText Markup Language의 약자입니다.
- 역할: 웹 페이지의 제목, 본문, 이미지, 버튼 등 ‘무엇이 어디에 위치해야 하는지’를 결정합니다.
- 특징: 프로그래밍 언어라기보다 ‘마크업 언어’에 가깝기 때문에 문법이 매우 직관적이고 단순합니다.
- 중요성: 자바스크립트(JS)나 CSS를 배우기 전 반드시 거쳐야 하는 필수 관문입니다.
2. 준비물: 메모장 하나면 충분한 개발 환경 설정
당겨주세요!
복잡한 설치 과정 없이도 지금 당장 웹 프로그래밍을 시작할 수 있습니다.
- 텍스트 에디터: 윈도우의 ‘메모장’이나 맥의 ‘텍스트 편집기’만 있어도 충분합니다.
- 추천 도구: Visual Studio Code (무료이며 자동 완성 기능이 있어 편리합니다.)
- 웹 브라우저: 크롬(Chrome), 엣지(Edge), 사파리(Safari) 중 하나를 준비합니다.
- 확장자 확인: 파일을 저장할 때 반드시 파일명 뒤에
.html을 붙여야 합니다. (예: index.html)
3. HTML5의 기본 구조: 문서의 규칙 파악하기
모든 HTML 문서에는 약속된 형식이 있습니다. 이 틀을 복사해서 붙여넣는 것부터 시작하세요.
- <!DOCTYPE html>: 이 문서가 HTML5 표준임을 브라우저에 알리는 선언입니다.
- : 모든 HTML 요소들을 감싸는 가장 바깥쪽 태그입니다.
- : 웹 페이지의 정보(제목, 설정값)를 담는 곳으로, 실제 화면에는 보이지 않습니다.
- : 실제 브라우저 화면에 나타나는 모든 콘텐츠가 들어가는 곳입니다.
- 태그의 쌍: 대부분의 태그는
<열기>로 시작해서</닫기>로 끝납니다.
4. 꼭 알아야 할 필수 태그 5가지
이 다섯 가지만 알아도 웬만한 텍스트 기반 웹 페이지는 만들 수 있습니다.
- 제목 태그 (h1 ~ h6): 글의 제목을 나타냅니다. 숫자가 작을수록 글자가 큽니다.
- 단락 태그 (p): 본문 내용을 문단 단위로 구분할 때 사용합니다.
- 강조 태그 (strong): 중요한 글자를 굵게 표시합니다.
- 줄바꿈 태그 (br): 다음 줄로 강제 이동합니다. (닫는 태그가 없습니다.)
- 구역 태그 (div): 여러 요소를 하나로 묶어 디자인을 적용할 때 사용합니다.
5. 텍스트와 이미지로 웹 페이지 꾸미기
단순한 글자 외에 시각적인 요소를 추가하는 방법입니다.
- 이미지 삽입 (img):
<img src="이미지경로" alt="설명">형식을 사용합니다. - src: 이미지가 저장된 위치나 인터넷 주소입니다.
- alt: 이미지가 보이지 않을 때 나타나는 대체 텍스트입니다.
- 글자 색상과 크기: HTML 내에서 직접 지정하기보다 나중에 CSS로 조절하는 것이 정석이지만, 입문 단계에서는 구조 잡기에 집중합니다.
6. 링크와 목록으로 정보 연결하기
웹의 핵심 기능인 ‘클릭 시 이동’과 ‘목록 정리’ 기능입니다.
- 하이퍼링크 (a):
<a href="주소">클릭할 글자</a>로 다른 사이트로 이동시킵니다. - 순서 없는 목록 (ul, li): 점(bullet)으로 표시되는 리스트를 만듭니다.
- 순서 있는 목록 (ol, li): 1, 2, 3 숫자가 자동으로 붙는 리스트를 만듭니다.
7. 직접 만드는 첫 번째 HTML 웹 페이지 실습
메모장을 열고 아래 내용을 그대로 입력한 뒤 index.html로 저장해 보세요.
- 메모장을 실행합니다.
- 아래 코드를 입력합니다.
“`html
<!DOCTYPE html>반갑습니다!
이것은 제가 직접 만든 첫 번째 HTML5 웹 페이지입니다.
- HTML 배우기
- CSS로 꾸미기
- 멋진 사이트 만들기
“`
- 저장한 파일을 마우스 오른쪽 버튼으로 클릭한 뒤 ‘연결 프로그램 – 크롬’을 선택합니다.
- 화면에 제목과 목록이 나타난다면 성공입니다.
8. 웹 프로그래밍 학습을 위한 다음 단계
HTML만으로는 디자인이 투박할 수 있습니다. 이를 보완하기 위해 다음 과정을 추천합니다.
- CSS 학습: HTML로 만든 뼈대에 색상, 폰트, 배경 등 옷을 입히는 과정을 배웁니다.
- 반응형 웹 이해: 스마트폰과 PC 화면에 맞춰 크기가 변하는 레이아웃을 공부합니다.
- 자바스크립트(JS) 입문: 클릭하면 팝업이 뜨거나 데이터가 변하는 동적인 기능을 추가합니다.
- 실습 위주의 반복: 이론을 외우기보다 매일 짧은 코드라도 직접 타이핑해보는 것이 가장 빠른 지름길입니다.