HTML 기본 마스터! 태그와 속성으로 웹사이트 뼈대 만들기 (초보 필수)
게시일:
작성자: 자청의 유튜브 추출기
HTML, 어렵지 않아! 태그랑 속성만 알면 끝!
지난 시간에 우리 첫 HTML 문서 만들어봤지? 오늘은 그 HTML이 어떻게 만들어지는지, 그 시스템을 이해하기 위해 HTML 언어의 기본 구성 요소를 배워볼 거야. 책으로 본다면 2.1 부분을 참고하면서 같이 보면 더 좋을 거야!
HTML은 크게 두 가지로 나눌 수 있어: 태그와 속성
1. 태그 (Tag):
- HTML에서 태그는
<와>괄호 안에 들어가는 글자들을 말해. - 이 괄호 안에 있는 글자들이 바로 태그의 이름이야.
- 예를 들어, 우리가 첫 HTML 문서에서 썼던
<html>,<head>,<meta>,<title>,<p>같은 것들이 모두 태그야.
2. 속성 (Attribute):
- 속성은 태그에 추가적인 기능이나 의미를 더해주는 역할을 해.
- 마치 태그에 설명을 덧붙여주는 거라고 생각하면 돼.
- 예를 들어,
<html>태그에lang="ko"라는 속성을 붙이면, 이 HTML 문서에서 주로 사용하는 언어가 한국어라는 걸 알려주는 거지. 속성이 없으면 그냥 HTML 문서가 시작된다는 것만 알 수 있지만, 속성이 있으면 더 많은 정보를 알 수 있게 되는 거야. - 속성은 하나만 쓸 수도 있고, 여러 개를 쓸 수도 있어. 앞으로 태그를 배우면서 필요한 속성들을 그때그때 배우게 될 거야.
HTML 문법, 크게 두 가지로 나눌 수 있어: 내용이 있는 문법 vs 내용이 없는 문법
1. 내용이 있는 문법 (Contentful Elements):
- 이런 문법은 시작 태그와 종료 태그가 있고, 그 사이에 콘텐츠가 들어가는 형태야.
- 콘텐츠는 텍스트뿐만 아니라 다른 태그들도 될 수 있어. 시작 태그와 종료 태그 사이에 있는 모든 것을 콘텐츠라고 불러.
- 예를 들어,
<p>이것은 문단입니다.</p>에서<p>는 시작 태그,</p>는 종료 태그, "이것은 문단입니다."는 콘텐츠야. <title>,<head>,<html>,<body>태그들도 모두 콘텐츠가 있는 문법이야. 처음에는<body>태그 안에 내용이 없어서 헷갈릴 수도 있지만, 시작 태그와 종료 태그 사이에 무언가 들어갈 수 있다면 모두 콘텐츠가 있는 문법이라고 생각하면 돼.- 이렇게 시작 태그, 종료 태그, 그리고 그 사이의 콘텐츠를 합쳐서 요소(Element)라고 불러.
2. 내용이 없는 문법 (Self-closing Elements):
- 이런 문법은 시작 태그와 종료 태그가 따로 없고, 태그 하나만으로 사용돼.
- 콘텐츠가 들어갈 자리가 없는 거지.
- 우리가 첫 HTML 문서에서 사용했던
<meta>태그가 대표적인 예야. - HTML5에서는 이런 내용이 없는 문법 뒤에
/를 붙이지 않아도 괜찮지만, 일관성 있게 작성하는 게 중요해.
주석 (Comment): 코드에 메모 남기기
- HTML 코드에서
<!--와-->사이에 작성하는 내용을 주석이라고 해. - 주석은 HTML 문서를 실행하는 데 전혀 영향을 주지 않아. 그냥 코드에 메모를 남기는 거라고 생각하면 돼.
- 하지만 주의할 점! 웹 브라우저에서 소스 보기를 하면 주석도 볼 수 있기 때문에, 비밀번호나 ID 같은 민감한 정보는 절대 주석에 남기면 안 돼!
라이브 서버로 HTML 실행해보기
- 우리가 설치한 '라이브 서버'라는 확장 프로그램을 사용하면 HTML 문서를 웹 브라우저에서 바로 실행해 볼 수 있어.
- 윈도우는
Ctrl + Shift + P, 맥은Cmd + Shift + P를 누르면 명령 팔레트가 나오는데, 여기서 'Open with Live Server'를 선택하면 돼. - 라이브 서버를 사용하면 코드에 자동으로 자바스크립트 코드가 추가되기도 하는데, 이건 라이브 서버가 작동하기 위한 것이니 신경 쓰지 않아도 돼.
정리하자면,
HTML은 태그와 속성으로 이루어져 있고, 문법은 크게 내용이 있는 문법과 내용이 없는 문법으로 나눌 수 있어. 그리고 코드에 메모를 남길 때는 주석을 사용하지만, 민감한 정보는 절대 넣으면 안 된다는 것! 이 정도만 기억해도 HTML을 이해하는 데 큰 도움이 될 거야!