seeyoujeong blog

HTML의 의미와 특징

HTML은 Hyper Text Markup Language의 줄임말이다.

Hyper Text는 단순한 텍스트를 넘어서 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트 즉, 링크를 의미한다.

Markup Language는 프로그래밍 언어의 한 종류로 정보를 구조적, 계층적으로 표현 가능하다는 특징이 있다.

빈 태그

빈 태그는 내용이 없어서 종료 태그가 필요하지 않다.

빈 태그는 내용만 비어있을 뿐 속성을 통해서 화면에 나타내거나

화면에 표시되지 않더라도 다른 용도로 사용되는 태그이다.

빈 태그의 대표적인 경우는 브라우저가 직접 화면에 내용을 그려줘야 하는 경우이다.

이런 태그는 브라우저가 내용을 대체한다고 하여 replacement 태그, 대체되는 태그라고 한다.

빈 태그에 대체되는 태그만 있는 것은 아니며 실제로 화면에 출력될 내용이 없어 다른 용도로 쓰이는 태그도 존재한다.

아래는 빈 태그의 예시이다.

<br>

<img src="">

<input type="">

요소

내용을 포함한 태그 전체를 요소(Element)라고 한다.

태그와 요소는 의미가 다르기때문에 혼동하지 않도록 주의해야 한다.

속성

속성(Attribute)은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미한다.

속성은 이름과 값으로 이루어져 있다.

시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현한다.

속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현한다.

의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있다.

여러 속성을 선언할 때는 공백으로 구분해서 사용한다.

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분된다.

또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분된다.

주석

주석은 화면에 노출되지 않고 메모의 목적으로만 사용하는 것을 의미한다.

HTML 파일 내에 주석으로 표시를 해주면 브라우저는 해당 부분을 인식하여 해석하지 않는다.

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

기본 구조

HTML의 기본 구조는 웹 문서를 작성할 때 반드시 들어가야 하는 기본적인 내용으로

크게는 문서 타입 정의와 <html>요소로 구분한다.

문서 타입 정의는 보통 DTD(doctype)라고 부른다.

이 문서가 어떤 버전으로 작성되었는지 브라우저에 알려주는 선언문이며

반드시 문서 내 최상단에 선언되어야 한다.

문서 타입 선언 후에는 <html>태그가 나와야 하고, 자식으로는 <head>태그와 <body>태그가 있다.

<html>태그의 lang 속성은 문서가 어느 언어로 작성되었는지를 의미한다.

<head>태그에 위치하는 태그들은 브라우저 화면에 표시되지 않는다.

대신 문서의 기본 정보 설정이나 외부 스타일 시트 파일 및 js 파일을 연결하는 등의 역할을 한다.

<body>태그에는 실제 브라우저 화면에 나타나는 내용이 들어간다.

제목 태그

제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그이다.

태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 <h1>~<h6>까지 있다.

보통 <h1>은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며,

숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 된다.

현재 웹 페이지의 내용은 제목과 본문 식의 문서 형태보다는

주로 이미지나 그림처럼 시각적인 형태로 표현되고 있어서 제목 태그를 <h6>까지 쓰는 경우는 거의 없다.

제목 태그를 사용하면, 일반 텍스트보다 더 강조되는 스타일이 적용되는데

이는 브라우저가 기본적으로 제목 태그에 제공하는 스타일이다.

단락 태그

단락(paragraph) 태그는 paragraph를 줄여서 p로 쓴다.

<p>를 사용해서 단락으로 구분하면 자연스럽게 개행이 된다.

개행

개행을 위해 쓰이는 태그는 <br>이다. (linebreak를 줄여서 br 이라고 한다.)

<br>은 닫기 태그와 내용이 존재하지 않는 빈 태그이다.

개행하고자 하는 곳에서 <br>을 선언하면 개행이 된다.

텍스트 표현 태그

웹 표준화가 대두하면서 웹 문서의 구조와 표현을 분리하였다.

그 과정에서 많은 표현용 태그들이 사라졌고, 지금은 표현용 태그가 얼마 남지 않았다.

<b> : bold 태그는 글자를 굵게 표현하는 태그

<i> : italic 태그는 글자를 기울여서 표현하는 태그(기술적인 용어, 외국어 문구, 소설 속 인물의 생각 등으로 다른 글자와 구분하기 위해 사용)

<u> : underline 태그는 글자의 밑줄을 표현하는 태그

<s> : strike 태그는 글자의 중간선을 표현하는 태그

앵커 태그

<a>(anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불린다.

링크를 만들기 위해 <a>는 반드시 href(hypertext reference) 속성을 가지고 있어야 한다.

target 속성

target 속성은 링크된 리소스를 어디에 표시할지를 나타내는 속성이다.

속성값으로는 _self, _blank, _parent, _top이 있다.

_self는 현재 화면에 표시한다는 의미로, target 속성이 선언되지 않으면 기본적으로 self와 같이 동작한다.

_blank는 새로운 창에 표시한다는 의미로 외부 페이지가 나타나게끔 하는 속성이다.

_parent와 _top은 프레임이라는 특정 조건에서만 동작하는 속성이다.

내부링크

<a>를 통해 만들어진 링크가 꼭 외부 페이지로만 이동하는 것은 아니다.

<a>를 통해 페이지 내부의 특정 요소로 초점을 이동할 수도 있는데, 이를 내부 링크라고 한다.

내부 링크를 사용할 때는 href 속성값에 #을 쓰고 그 뒤에 페이지 내에서 이동하고자 하는 요소의 id 속성값을 적으면 된다.

의미가 없는 컨테이너 요소

태그 자체에 아무 의미가 없으며, 단순히 요소들을 묶기 위해 사용되는 태그이다.

스타일을 주거나 서버에 보내는 데이터를 담기 위한 용도로 이런 의미 없는 요소들이 사용된다.

이런 의미 없는 태그의 사용빈도는 매우 높다. 그 이유는 html 태그들은 문서를 웹에 나타내기 위해 제작되어 기본적으로 문서에 최적화되어있는 의미를 지니는데, 현재 웹의 형태는 문서 형태에서 많이 벗어났기 때문이다.

<div>태그와 <span>태그

div(division) 태그는 블록 레벨 태그이다. 블록 레벨 요소는 기본적으로 한 줄을 생성해서 내용을 표현한다.

반면, span 태그는 인라인 레벨 태그이다. 인라인 레벨 요소들은 블록 레벨 요소의 한 줄 안에서 표현되는 요소들이다.

리스트 요소

리스트는 일련된 항목들이 나열된 것들을 의미한다.

콘텐츠가 많은 포털이나 검색 엔진같은 사이트에는 분야나 항목으로 구분할 것이 많으므로 리스트가 자주 사용된다.

<ul>태그

ul(unordered list) 태그는 순서가 없는 리스트를 표현할 때 사용한다.

<ol>태그

ol(ordered list) 태그는 순서가 있는 리스트를 표현할 때 사용한다.

<dl>태그

dl(definition/description list) 태그는 용어와 그에 대한 정의를 표현할 때 사용한다.

<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다르다.

<ul>, <ol>은 항목을 단순히 나열하는 구조지만, <dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조다.

<dt> : 용어를 나타내는 태그

<dd> : 용어에 대한 정의 또는 설명을 나타내는 태그

이미지 요소

<img>는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그이다.

src 속성

<img>의 필수 속성으로 이미지의 경로를 나타내는 속성이다.

alt 속성

이미지의 대체 텍스트를 나타내는 속성이다.

대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성이다.

src 속성과 더불어 반드시 들어가야 하는 속성이다.

width/height 속성

이미지의 가로/세로 크기를 나타내는 속성이다.

값의 단위는 필요하지 않으며, 값을 입력하면 자동으로 픽셀 단위로 계산된다.

width/height는 선택적인 속성이지만 이미지의 크기가 고정적이라면 width/height 속성을 선언하는 것이 성능적인 측면에서 좋다.

width/height 속성이 없으면 이미지는 원본 크기대로 노출되며, 둘 중 하나만 선언하면 나머지 한 속성은 선언한 속성의 크기에 맞춰 자동으로 비율에 맞게 변경된다. 반면 두 속성 모두 선언하면 이미지는 비율과 무관하게 선언한 크기대로 변경된다.

상대경로와 절대경로

src 속성에는 이미지의 경로가 들어가며, 이미지의 상대경로와 절대경로가 있다.

상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이고, 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로이다.

테이블 요소

<table>은 이름에서 느껴지는 바와 같이 데이터를 표로 나타낼 때 사용되는 태그이다.

표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있다.

표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 한다.

<table> : 표를 나타내는 태그

<tr> : 행을 나타내는 태그

<th> : 제목 셀을 나타내는 태그

<td> : 셀을 나타내는 태그

하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며, <tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 된다.

표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 된다.

브라우저에서 제공하는 테이블의 기본 스타일에는 테두리가 없다.

표의 구조

<caption>: 표의 제목을 나타내는 태그

<thead>: 제목 행을 그룹화하는 태그

<tbody>: 본문 행을 그룹화하는 태그

<tfoot>: 바닥 행을 그룹화하는 태그

폼 요소

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소이다.

<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 된다.

type="text"

주로 아이디, 이름, 주소, 전화번호 등 단순한 텍스트를 입력할 때 사용한다.

type="text"에는 placeholder 속성이 존재한다. placeholder 속성은 사용자가 입력하기 전 미리 화면에 노출하는 값으로, 입력하는 값의 양식을 표현할 수 있다.

type="password"

암호와 같이 공개할 수 없는 내용을 입력할 때 사용한다.

화면에는 type="text"와 같게 나타나지만 실제로 입력할 때 값을 노출하지 않는다.

type="radio"

라디오 버튼을 만들 때 사용한다.

라디오 버튼은 중복 선택이 불가능하며 하나의 항목만을 선택해야 한다.

type="checkbox"

체크박스를 만들 때 사용한다.

체크박스는 중복 선택이 가능하다.

라디오 버튼과 체크박스에는 checked, name 속성이 존재한다.

checked 속성은 값이 별도로 존재하지 않는 boolean 속성이다.

name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성이다.

type="file"

파일을 서버에 올릴 때 사용한다.

브라우저에 따라 표현되는 형태는 조금씩 다르지만, 모두 같은 역할을 한다.

type="submit|reset|image|button"

submit, reset, image, button 타입은 모두 클릭 가능한 버튼을 만든다.

submit : form의 값을 전송하는 버튼

reset : form의 값을 초기화하는 버튼

image : 이미지를 삽입할 수 있는 버튼 (submit과 동작이 동일함)

button : 아무 기능이 없는 버튼

<select>

<select>는 선택 목록 상자 또는 콤보박스라고도 한다.

몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그이다. (multiple 속성을 사용하면 다중 선택도 가능하다.)

<select>내부의 <option>으로 각 항목을 나타낸다.

<option>의 속성으로는 selected가 있으며 이는 선택된 항목을 의미한다.

<textarea>

한 줄만을 입력할 수 있는 <input type="text" >와 달리 여러 줄의 텍스트를 입력할 때 사용한다.

<textarea>에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있다.

cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 글자 수를 나타내지는 않는다.)

rows : 세로 크기를 조절하는 속성(화면에 보여지는 줄 수)

<button>

버튼을 만들 때 사용하며 submit, reset, button 3가지의 타입이 있다.

각 버튼은 이전에 배웠던 input 타입의 submit, reset, button과 모두 같은 기능을 가진 버튼이다.

다만, 빈 태그가 아니며 내용을 안에 직접 넣을 수 있으므로 좀 더 자유로운 스타일 표현이 가능하다.

<label>

<label>은 form 요소의 이름과 form 요소를 명시적으로 연결시켜주기 위해 사용한다.

모든 form 요소에 사용할 수 있다.

form 요소의 id 속성값과 <label>의 for 속성값을 같게 적어주어야 한다.

<label>을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작한다.

또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 <label>을 함께 읽어주게 된다.

<label>은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋다.

<fieldset>, <legend>

<fieldset>, <legend>는 form 요소를 구조화 하기 위해 필요한 태그이다.

<fieldset> : 여러 개의 폼 요소를 그룹화하여 구조적으로 만들기 위해 사용

<legend> : 폼 요소의 제목으로 <fieldset> 내부에 작성

<fieldset>은 보통 form의 성격에 따라 구분한다.

<legend>는 <fieldset>의 자식으로 반드시 최상단에 위치해야 한다.

<form>

<form>은 form 요소들을 감싸는 태그로 데이터를 묶어서 실제 서버로 전송해주는 역할을 하는 태그이다.

만약 <fieldset>으로 구조화되어있다면 <fieldset>도 함께 감싸는 역할을 한다.

<form>에는 대표적인 2가지 속성이 있다.

action: 데이터를 처리하기 위한 서버의 주소

method: 데이터를 전송하는 방식을 지정

method 속성값에는 get/post 2가지 방식이 존재한다.

get 방식은 데이터가 전송될 때 주소창에 파라미터 형태로 붙어 데이터가 노출된다.

반면, post 방식은 데이터가 전송될 때 데이터가 노출되지 않는다.

콘텐츠 모델

HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있다.

요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 한다.

이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 된다.

Content Models 의 7 분류

Metadata Content

Flow Content

Sectioning Content

Heading Content

Phrasing Content

Embedded Content

Interacitve Content

1. Metadata

" base, link, meta, noscript, script, style, title "

Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함된다.

메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 <head>내에 들어간다는 것이 특징이다.

2. Flow

" a, abbr, address,map>area, article, aside,audio, b, bdo, blockquote,br, button,canvas, cite, code, datalist, del, details, dfn, div, dl, em, embed,fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol,output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong,style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr "

Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함된다.

Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함된다.

3. Sectioning

" article, aside, nav, section "

Sectioning에는 문서의 구조와 관련된 요소들이 포함된다.

HTML5에서 새로 생긴 <article>, <aside>, <nav>, <section> 등이 포함되며 이 태그들은 문서의 구조, 아웃라인에 영향을 주게 된다.

4. Heading

" h1, h2, h3, h4, h5, h6 "

Heading에는 각 section의 header를 정의하는 heading 태그가 포함된다.

5. Phrasing

"a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time,var, video, wbr"

Phrasing에는 문서의 텍스트 또는 텍스트를 꾸며주는 문단 내부 레벨로 사용되는 요소들이 포함된다.

6. Embedded

" audio, canvas, embed, iframe, img, math, object, svg, video "

Embedded에는 외부 콘텐츠를 표현하는 요소들이 포함되며 오디오나 비디오, 이미지 등 멀티미디어 관련 요소들이 이에 해당한다.

7. Interactive

" a, audio[controls], button, details, embed, iframe, img[usemap], input, keygen, label, menu,object[usemap], select, textarea, video[controls] "

Interactive에는 사용자와 상호작용을 하는 요소들이 포함되며 대표적으로 form 요소들이 이에 해당한다.

시멘틱 마크업

시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다.

시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다.

애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지이다.

시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다.

HTML5 시멘틱 요소

<article>: 문서 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획

<aside>: 문서의 주요 내용과 간접적으로만 연관된 부분

<figcaption>: 부모 <figure> 요소가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례

<figure>: 독립적인 콘텐츠

<footer>: 가장 가까운 구획 콘텐츠나 구획 루트의 푸터

<header>: 소개 및 탐색에 도움을 주는 콘텐츠

<main>: 문서 <body>의 주요 콘텐츠

<mark>: 현재 맥락에 관련이 깊거나 중요해 표시한 부분

<nav>: 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획

<section>: 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용

<time>: 시간의 특정 지점 또는 구간

블록&인라인

블록 레벨 요소

부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소이다.

양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 된다.

블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있다.

" div, h1~h6, p, ul, li, table ..."

예외로 <h1> ~ <h6>(headings) 요소와 <p> 요소는 블록 레벨 요소지만, 내부 요소로 Phrasing Content만 허용한다.

인라인 레벨 요소

하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소이다.

라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있다.

인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없다.

즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없다.

" span, i, img, em, strong, a ..."

다만, HTML5 버전에서 생겨난 한가지 예외 경우가 있는데 <a>는 인라인 레벨 요소지만 자손으로 블록 레벨 요소를 가질 수 있다.

⬇️ 출처

https://www.boostcourse.org/web344