목차
HTML이란 무엇일까?
HTML은 Hypertext Markup Language의 약자이다.
- Hypertext : 웹 페이지를 다른 페이지로 연결하는 링크
- Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지
여기서 Hypertext는 이해가 가는데 Markup이 이해가 안가서 검색을 해보았다.
예를 들어 아래와 같은 텍스트가 있는데 텍스트에서 "HTML" 이라는 단어를 강조하고 싶다고 가정해보자.
오늘은 HTML에 대해서 배웠다.
만약 블로그에서 "HTML" 단어를 강조하고 싶다면 강조하고 싶은 글자를 드래그해서 에디터를 활용하면 되겠지만 이거는 인간이 입장에서의 얘기고, 브라우저에서 저 글자를 강조해!라고 지시를 내린다면 어떻게 내릴 것인가?
브라우저에서 "HTML"을 강조하기 위해서 앞뒤로 특수한 의미를 갖고 있다고 구분 지어야 하는데, 이럴 때 필요한 게 태그이다.
오늘은 <b>HTML</b>에 대해서 배웠다.
아직 <b></b>태그에 대해서는 안 배웠지만 이렇게 태그로 강조하고 싶은 범위를 표시(Mark)하는 게 마크업이라고 한다.
HTML 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력해주세요</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력해주세요
</body>
</html>
- <!DOCTYPE html> : 문서의 형식 선언
- DOCTYPE은 문서의 내용이 시작되기 전에 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시하는 역할
- DOCTYPE의 뒤에 html이라고 쓰여 있는 것은 '이 문서는 HTML5로 작성되었습니다'라는 뜻
- <html> : 문서의 시작과 끝
- 문서 형식 선언 이후 실제 문서의 내용을 표시하는 태그가 바로 <html> 태그 (여는 태그가 문서의 시작을, 닫는 태그가 문서의 끝을 의미)
- 이 태그에는 선택적으로 lang이라는 속성을 추가할 수 있는데, 이는 문서의 주요 언어를 표기하기 위해 추가하는 속성
ex) 한국어를 사용한 경우 "ko", 영어를 사용한 경우 "en" 등 다양한 언어 코드를 속성값으로 입력할 수 있다.
- <head> : 문서의 정보
- 브라우저에게 문서의 정보를 전달
- <head>의 안에 작성되는 태그들은 웹 브라우저 화면에 표시될 콘텐츠를 나타내는 것은 아니지만, 웹페이지의 품질에 영향을 주는 중요한 정보들이다.
- <meta> : 문서의 키워드, 설정 등 문서와 관련된 항목들을 지정
- 페이지 설명, 키워드, 저자, 화면 크기 등의 정보
- 주로 브라우저 또는 검색 엔진에서 사용
- charset="utf-8" 은 하단 설명 참조
- <title> : 문서의 제목
- 문서의 제목을 입력하는 태그, 웹 브라우저의 탭 메뉴에 표시
- <body> : 화면에 표시될 콘텐츠
- 웹 브라우저 화면에 표시될 콘텐츠를 입력하는 태그
- 다양한 태그를 사용하여 웹 페이지의 구조를 설계할 수 있다.
meta 태그에 charset="utf-8" 을 설정하는 이유
한 번쯤 컴퓨터를 쓰다 보면 위와 같이 글씨가 깨진 현상을 봤을 것이다.
세상에는 한국어, 영어, 일본어 등 다양한 언어 및 문자가 존재한다. 그리고 컴퓨터가 이를 해석하기 위해서는 각 문자에 맞는 인코딩 방식을 사용해야 한다. 가장 흔히 사용되는 인코딩 방식 중 하나는 utf-8이다.
utf-8 방식으로 설정하면, 한글을 비롯한 세상의 모든 언어를 표시할 수 있다.
HTML 태그 구조
HTML 구성요소
HTML 구성요소에는 태그, 요소, 속성으로 나뉜다.
Tag(태그)
<태그의이름>콘텐츠</태그의이름>
<!-- <> 기호로 묶인 부분이 바로 태그이다. -->
- HTML 태그는 HTML 문서를 작성하는 데 사용되는 기본 요소이다.
- HTML 태그는 시작 태그와 종료 태그로 구성된다. 시작 태그는 콘텐츠의 시작을 나타내고 종료 태그는 콘텐츠의 끝을 나타낸다.
- 시작 태그와 종료 태그가 짝을 이루기 위해서는 태그의 이름이 같아야 하며, 종료 태그에는 < 기호 바로 뒤에 / 기호를 붙여 시작 태그와 구별해야 한다.
- 태그의 이름은 해당 태그가 웹페이지에 어떤 콘텐츠를 표시하는지를 의미한다.
예를 들어 텍스트 문단을 표시할 때는 'paragraph'의 약자인 'p'를 태그의 이름으로 사용하고, 이미지를 표시할 때는 'image'의 약자인 'img'를 태그의 이름으로 사용한다.
단일 태그
<태그의이름>
- 내용 없이 구조적인 기능만 하는 요소
- 단일 태그는 태그 이름만으로 작성되며 닫는 태그가 없다.
Ex) <br> : 줄 바꿈, <hr> 수평선
Element(요소)
요소의 유형은 블록 요소와 인라인 요소로 나뉜다.
블록 요소(Block Element)
- 기본적으로 부모 요소의 전체 너비(100%)를 차지한다.
- 태그가 시작되면 무조건 개행(줄바꿈)이 일어난다.
- 모든 인라인 요소를 포함하거나 다른 블록 요소를 포함한다.
※ 블록 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있다.
인라인 요소(Inline Element)
- 텍스트 혹은 이미지 크기에 맞는 필요한 공간만을 차지하는 요소이다. (줄 바꿈이 일어나지 않는다.)
- 너비와 높이를 지정할 수 없다.
- 텍스트와 인라인 요소를 자식 요소로 포함할 수 있다.
- 모든 블록 요소를 자식 요소로 포함할 수 없다.
Attribute(속성)
- 태그를 보조하는 명령어로 태그 안쪽에서 작동
Ex) id, class, style, width, height 등등 - 태그마다 사용 가능한 속성이 정해져 있음
Ex) <a href="" style=""></a> - ※ id, class, style은 모든 요소가 사용할 수 있는 속성
❗️ id 속성과 class 속성의 차이점
id : 문서 전체에서 유일한 고유식별자(ID)를 정의, 즉 "exciting" 이라는 id 값을 사용했으면 한 HTML 문서에 "exciting" 라는 id 값은 더 이상 사용 할 수 없다.
class : id 속성과 달리 여러번 사용이 가능하다. (주로 css를 작성할 때 사용된다.)
예시 코드
<p class="foo" style="color: green">This is a paragraph.</p>
결과 화면
This is a paragraph.
반응형