HTML 기초: 10분 만에 웹 페이지 만드는 법! (코딩 완전 초보 필독)
게시일:
작성자: 자청의 유튜브 추출기
HTML 기본 구조 배우기
HTML 문서는 정해진 틀 안에서 만들어지는데, 이걸 기본 구조라고 해. 우리가 지금까지 작성했던 코드들도 이 기본 구조를 따라서 만든 거야. 이제부터 처음부터 다시 작성하면서 HTML 기본 구조가 어떻게 생겼는지 알아보자.
1. <!DOCTYPE html> (DTD)
HTML 문서를 만들기 전에 가장 먼저 해줘야 할 건 <!DOCTYPE html>이라고 불리는 DTD를 정하는 거야.
- DTD가 뭐냐면? 내가 지금부터 만들 HTML 문서가 어떤 규칙을 따라야 하는지 알려주는 정보야.
- 왜 필요할까? HTML은 옛날 버전부터 지금 최신 버전까지 여러 가지가 있거든. DTD를 써주면 "이 문서는 최신 HTML5 규칙을 따를 거야!"라고 알려주는 거지.
- HTML5부터는 간단하게! 예전에는 DTD 종류가 많았는데, HTML5부터는
<!DOCTYPE html>이렇게만 써주면 무조건 HTML5로 인식해. 그래서 이것만 알아두면 돼.
2. <html> 태그
DTD를 정했으면 그다음엔 <html> 태그를 써야 해.
<html>태그는 HTML 문서의 시작을 알리는 거야.- 이 안에 들어가는 모든 내용은
<html>태그 안에 있어야 해.
3. <head> 태그와 <body> 태그
<html> 태그 다음에는 <head> 태그와 <body> 태그가 와야 하는데, <head> 태그가 먼저 나와야 해.
<head> 태그: 문서에 대한 정보 (웹 브라우저에는 직접 안 보여!)
<head> 태그 안에는 웹 브라우저 화면에는 직접 보이지 않는, 문서에 대한 정보들을 넣어.
- 메타데이터: 문서의 문자 인코딩 방식, 문서 제목, CSS나 JavaScript 파일 연결 정보 같은 것들이 여기에 들어가.
<meta charset="UTF-8">: 이건 문서의 문자 인코딩을 UTF-8로 정하겠다는 뜻이야. 예전에는 euc-kr도 많이 썼는데, 이제는 무조건 UTF-8을 써야 해.<meta http-equiv="X-UA-Compatible" content="IE=edge">: 이건 인터넷 익스플로러(IE)를 위한 태그야. IE는 버전이 여러 개 있는데, 이 태그를 써주면 IE가 항상 최신 버전으로 작동하게 해줘. 그래서 최신 웹 기술을 적용하는 데 도움이 돼.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 이건 반응형 웹을 만들 때 꼭 필요한 태그야. 나중에 더 자세히 배울 거니까, 지금은 "반응형 웹을 위한 태그구나" 정도로만 알아두자.<title>태그: 이건 HTML 문서의 제목을 정하는 태그야. 모든 HTML 문서는 반드시 제목이 있어야 해. 제목이 없으면 웹 브라우저가 이걸 웹 페이지로 인식하지 않아.- 주의할 점! 제목은 각 페이지마다 고유해야 해. 똑같은 제목이 많으면 검색 엔진에서 네 페이지를 구분하기 어려워.
<body> 태그: 웹 브라우저에 보이는 내용
<body> 태그 안에는 우리가 웹 브라우저에서 실제로 보게 될 모든 내용들을 넣어. 글자, 이미지, 링크 등등 전부 다 여기에 들어가.
4. 비주얼 스튜디오 코드 (VS Code) 단축키 활용
VS Code 같은 에디터를 쓰면 기본 구조를 자동으로 만들어주는 편리한 기능이 있어.
- HTML 파일에서
!(느낌표)를 입력하고 Enter 키를 누르면 기본 구조가 짠! 하고 나타나. - 여기서
lang="ko"로 언어를 바꿔주고,<title>태그 안에 원하는 제목을 넣어주면 돼.
5. HTML의 특징: 들여쓰기, 부모/자식/형제 관계
HTML은 코드를 보기 좋게 만들기 위해 들여쓰기를 많이 사용해.
- 들여쓰기가 왜 중요할까? HTML은 태그들 사이에 부모, 자식, 형제 같은 관계가 있거든.
- 부모: 어떤 태그 안에 들어있는 태그의 부모 태그
- 자식: 부모 태그 안에 들어있는 태그의 자식 태그
- 형제: 같은 부모를 가진 태그들끼리 형제 관계
- 들여쓰기를 하면 이런 관계가 명확하게 보여서 코드를 이해하기 쉬워져. 물론 안 해도 문법적으로는 틀리지 않지만, 꼭 들여쓰기를 해서 작성하는 게 좋아.
6. 블록 요소와 인라인 요소
HTML 태그는 크게 두 가지 종류로 나눌 수 있어.
- 블록 요소: 항상 새로운 줄에서 시작하고, 가로 전체 너비를 차지하는 태그 (예:
<p>태그) - 인라인 요소: 줄바꿈 없이 다른 요소들과 같은 줄에 배치되는 태그 (예:
<span>태그)
이런 개념들도 알아두면 HTML을 더 잘 이해하는 데 도움이 될 거야.