HTML기초

HTML 기초

HYPER TEXT MARKUP LANGUAGE

웹 페이지를 만드는 언어
Hyper Text = 링크
Markup Language : 정보를 구조적, 계층적으로 표현 가능
확장자로 .html을 사용

HTML의 역사

1990년대 영국의 물리학자 팀 버너스리가 제안하여 개발
초기 개발 목적은 연구원들이 신속하게 정보와 문서를 공유하기 위함

HTML 문법

속성

태그에 추가적으로 정보를 제공하거나 태그의 동작이나 표현을 제어하는 설정값

속성은 이름과 값으로 이루어져 있다.
시작태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름=”속성값” 으로 표현한다.

<h1 id="title">Hello, HTML</h1>

<h1>에 id속성를 추가해 title값을 선언한 코드

<h1 id="title" class="main">Hello, HTML</h1>

<h1>에 id와 class 2개의 속성을 선언한 코드

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에만 사용할 수 있는 속성으로 구분됨
또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분된다.

태그 중첩

태그 안에 다른 태그를 선언할 수 있다
단, 중첩되는 태그는 부모 태그를 벗어나면 안됨

잘못된 태그 선언

<h1>Hello, <i>HTML</h1></i>

<h1> 안에서 <i>가 시작되었으나, 부모인 <h1>의 종료태그가 먼저 선언되었으므로 잘못되었다.

올바른 태그 선언

<h1>Hello, <i>HTML</i></h1>

빈 태그

시작 태그와 종료 태그 2개가 1쌍으로 이루어져 있지 않은 태그

<br>
<img src="">
<input tpye="">

빈 태그는 내용이 없어서 종료태그가 필요하지 않다.
브라우저가 화면에 내용을 그려주는 경우, 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 경우

공백

HTML은 두 칸 이상의 공백을 모두 무시한다.

주석

화면에 노출되지 않고 메모의 목적으로만 사용하는 것

주석의 시작은 표시로 종료한다.

문서의 기본구조

HTML의 기본구조

웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로 크게는 문서 타입 정의와 <html>요소로 구분한다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML</title>
    </head>
    <body>
        <h1>Hello, HTML</h1>
    </body>
</html>

문서 타입

문서 타입은 보통 DTD(doctpye)라고 부른다.
이 문서의 작성 버전을 브라우저에 알려주는 선언문이며 반드시 문서 내 최상단에 선언되어야 함

html 요소

문서 타입 선언 후에는 <html>태그가 나와야 하고 <head>, <body>를 자식태그로 갖는다.
<html>의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미
<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않음, 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 한다.
<meta>태그의 charset 속성은 문자의 인코딩 방식을 지정
<body>태그는 실제 브라우저 화면에 나타는 내용이 들어감

dongkwon