HTML
≡ 목차 (Table of Contents)
HTML을 절대로 프로그래밍 언어라고 하지 말자.
HTML(Hyper Text Markup Language)은 웹 페이지의 내용을 구성하는 언어다. 사실 언어라고 하기에 조금 빈약한 측면은 있어서 마크 업 언어라는 표현을 쓴다.
HTML은 문서의 구조와 내용을 정의하기 위한 다양한 요소로 구성되어 있다. 그래서 과거에는 흔히 인터넷이라 부르는 거의 대부분의 것이 이 HTML로 구성되어 있었다.
하지만 요즘은 HTML 만으로 웹 사이트를 만드는 것은 너무 구닥다리 세대로 불릴만한 일이고, CSS나 Javascript가 사이트 구축에 필수적으로 같이 사용되고 있다.
이후로 이어지는 글들은 HTML 5 버전에 한한 메모다.
효율적인 이미지 로딩
<img loading="lazy" decoding="async" src="..." />
필요할 때(lazy) 디코딩을 비동기(async)로 진행하도록 해서 초기 이미지 로딩의 부하를 줄여 로딩 속도를 빠르게 할 수 있다.
이 기능을 지원하지 않는 브라우저라도 모르는 옵션이라 그냥 넘어갈 테니 호환성에 관해서는 걱정할 필요는 없을 것 같다.
다운로드 전용 하이퍼링크
A 태그에 download 라는 속성을 부여하면 다운로드 전용 링크를 만들 수 있다.
<a download href="foo/bar">Download Here</a>
이 링크를 클릭하면 Save As 다이얼로그가 뜬다.
루비 문자
일본어의 발음을 표기하는 그 루비 표기법을 의미한다.
<ruby> <rb>원문</rb> <rp>(</rp> <rt>발음</rt> <rp>)</rp> </ruby>
rb- ruby base
rt- ruby text
rp- ruby parentheses
Input
// 숫자 입력 전용 필드 <input type="number".../> // 숫자 입력 필드 (권장) <input type="numeric".../> // 전화번호 입력 필드 <input type="phone".../>
모바일에서 가상 키패드 속성을 설정할 수 있다.
<input inputmode="none" />
inputmode 는 아래와 같은 타입들이 있음:
nonetextdecimal: 소수점이 있는 숫자형numerictelsearch: return 버튼 대신 go 버튼이 나타나는 형태emailurl
인증 번호 등의 일회성 패스워드 입력을 위해서는 아래와 같은 속성을 추가할 수 있다.
<input autocomplete="one-time-code"/>
이러면 SMS 등으로 날아오는 메시지에 인증 번호가 있을 경우 이를 자동으로 입력할 수 있는 인터페이스가 보인다.