HTML
: 문서 간의 이동이 가능한(Hyper) 텍스트(Text)의 구조(Markup)를 나타낸 언어(Language)
→ 웹페이지를 띄우기 위해, 태그를 이용하여 데이터 구조를 나타내는 언어
- HTML은 태그들로 이루어져 있고, 이 태그는 여러 속성과 텍스트로 이루어진 내용을 가짐
- HTML 문서를 브라우저 화면에 띄우는 과정에서 태그로부터 요소(element)가 생성됨
- HTML의 표준 어휘와 문법은 W3C에 의해 정의됨 → W3Schools
HTML5 공간 분할
공간 분할 태그
웹페이지 레이아웃 구성을 위해 사용되는 태그는 대표적으로 <div>와 <span>이 있다.
<div>는 block 요소를 생성하고, <span>은 inline 요소를 생성하는데, 이에 대해 알아보자.
block 요소
: display라는 css 특성값으로 block을 가지는 요소
특징
- 수직으로 쌓임 (한 줄에 하나의 블록 요소만 위치)
- css default : {width: 100%; height: auto;}
- 크기 지정 가능 (width, height)
- 상하좌우 여백 지정 가능 (padding, margin)
→ div, h1~h6, p, pre, ol, ul, li, table, form 등
inline 요소
: display라는 css 특성값으로 inline을 가지는 요소
특징
- 수평으로 쌓임
- css default : {width: auto; height: auto;}
- 크기 지정 불가능 (width, height)
- 좌우만 여백 지정 가능 (padding, margin)
→ span, a, input, select, img 등
위 요소들이 해당 특성값을 가지는 이유는 user agent stylesheet라고 불리는
브라우저의 내장 스타일이 적용되었기 때문이다.
기본 적용되어 있는 display 특성값은 원하는 값으로 CSS를 이용하여 변경이 가능하다.
display CSS property는 대표적으로 block, inline, inline-block 값 3가지를 가지고,
inline-block의 특징은 아래와 같다.
+ inline-block 요소
특징
- 수평으로 쌓임
- css default : {width: auto; height: auto;}
- 크기 지정 가능 (width, height)
- 상하좌우 여백 지정 가능 (padding, margin)
시맨틱 태그 Semantic tag
: <div>와 기능은 똑같지만, 의미가 담겨있는 태그
→ HTML 문서의 가독성 향상 & 유지보수 편이
cf) semantic : 의미론적인
시맨틱 웹
: 프로그램이 코드의 의미를 인식할 수 있는 지능형 웹 = 태그에 의미를 부여해 만든 웹
→ 검색 엔진 최적화(SEO) & 웹 접근성 향상
📋 시맨틱 태그 종류
| 태그 | 설명 |
|---|---|
<header> | 머리말, 도입부 |
<nav> | 하이퍼링크를 모아 둔 웹 페이지 메뉴 |
<hgroup> | 제목과 부제목을 묶어서 나타내는 요소 |
<main> | 사이트의 본문 (페이지 내 한 번만 사용 가능) |
<section> | 문서의 장이나 절에 해당하는 내용 |
<article> | 독립적인 내용을 나타내는 영역 |
<aside> | 본문 흐름에 벗어나는 노트나 팁 등 |
<figure> | 이미지와 설명을 담고 있는 영역 |
<footer> | 관련 정보를 담고 있는 꼬리말 |
해보자구