#html
노트 47개
Frontend
브라우저와 모바일 화면에서 사용자가 직접 만나는 UI를 만드는 분야의 지식 모음.
Frontend
Accessibility장애가 있는 사람도 웹을 인지하고 조작하고 이해할 수 있게 만드는 일. 장애는 능력과 환경의 불일치이고, 브라우저는 시맨틱 HTML로 접근성 트리를 만들어 보조 기술에 넘기며, WCAG가 최소선을 정한다. 표준을 지켜도 쓰기 어려울 수 있어 장애인과의 사용성 테스트와 조직 차원의 우선순위가 필요하다. 사용자 관점과 WCAG, 시맨틱 구조·대체 텍스트·폼·ARIA·키보드·위젯·CSS 기법, 자동·수동 평가와 스크린 리더 테스트를 하위 노트로 잇는다.
Frontend › Accessibility
대체 텍스트, 링크, 쉬운 글대체 텍스트는 이미지가 그 자리에서 하는 일을 글로 바꾼 것이라 같은 사진도 맥락에 따라 alt가 달라진다. 링크는 맥락 없이 목록으로만 들어도 뜻이 통해야 하고, 본문 글은 짧은 문장·익숙한 낱말·논리적 구성으로 인지 부담을 줄인다.
Frontend › Accessibility
복합 위젯의 ARIA 패턴: 콤보박스·날짜 선택기·메뉴·상태 알림네이티브 요소가 없는 복합 위젯을 스크린 리더가 이해하고 조작할 수 있게 만드는 패턴. 자동완성 콤보박스, 날짜 선택기(grid)와 날짜 직접 입력, 사이트 메뉴와 menubar의 구분, 수량 조절 버튼, 정렬 표, 페이지 번호, 툴팁, 좌석 배치 같은 2차원 선택, 그리고 로딩·토스트·글자 수·실시간 검증 같은 상태 알림을 정리한다.
Frontend › Accessibility
자막, 대본, 음성 해설동영상과 오디오에는 소리를 글로 바꾼 자막, 소리와 화면을 모두 글로 담은 대본, 화면 정보를 말로 전하는 음성 해설이 필요하다. 자막은 동기화·동등·접근 가능해야 하고, 실시간 콘텐츠는 속기나 사람이 검수한 음성 인식으로 자막을 단다. 웹에서는 <track>과 WebVTT로 붙인다.
Frontend › Accessibility
장애 유형별 웹 사용시각·청각·운동·인지·발작과 전정·말하기 장애 사용자가 어떤 보조 기술로 웹을 쓰고 어디서 막히는지 정리한다. 진단명보다 기능적 어려움으로 보고, 하나의 설계가 사용자의 조정과 보조 기술을 받아들이게 만드는 것이 핵심이다.
Frontend › Accessibility
접근 가능한 위젯: 펼침·탭·캐러셀펼침(디스클로저)·아코디언은 <details>/<summary>와 name 속성으로 먼저 만들고, 직접 만들면 button + aria-expanded + hidden을 쓴다. 탭은 APG 패턴대로 tablist·tab·tabpanel과 로빙 tabindex, 방향키를 갖추고, 캐러셀은 정지 버튼·포커스 시 정지·숨은 슬라이드 차단·라이브 영역을 갖춘다.
Frontend › Accessibility
접근 가능한 페이지 구조스크린 리더·키보드 사용자는 페이지를 위에서부터 읽지 않고 제목·랜드마크·링크 목록으로 건너뛰며 탐색한다. 페이지 제목, 문서 언어, 제목 계층, 영역, 목록, 건너뛰기 링크, 사이트 검색, iframe 제목, 데이터 표의 머리글 연결이 그 탐색 경로를 만든다.
Frontend › Accessibility
접근 가능한 폼과 오류 처리모든 입력 칸에는 코드로 연결된 이름이 있어야 한다. label을 기본으로, 표처럼 일대일이 안 되는 곳은 aria-labelledby, 보조 설명은 aria-describedby로 잇고, 묶음은 fieldset·legend로 준다. 검증은 서버와 클라이언트를 함께 두고, 오류는 알리고·데려가고·다시 제출하게 하는 세 단계로 복구시킨다. WCAG 2.2의 중복 입력 금지와 인지 테스트 없는 인증까지 다룬다.
Frontend › Accessibility
ARIA와 접근 가능한 이름ARIA는 HTML로 표현할 수 없는 role·state·property를 접근성 트리에 더하지만 동작은 더하지 않는다. 다섯 가지 사용 규칙, 접근 가능한 이름과 설명이 계산되는 순서(aria-labelledby > aria-label > 네이티브 label·alt > 내용 > title > placeholder), Label in Name, 라이브 영역을 정리한다.
Frontend › Accessibility
WCAG와 POUR 원칙WCAG는 인지·운용·이해·견고(POUR) 네 원칙 아래 13개 지침과 성공 기준으로 웹 콘텐츠 접근성의 최소선을 정한다. 2026년 기준 권고안은 WCAG 2.2(86개 기준, 4.1.1 삭제)이고 따로 요구되는 기준이 없으면 AA를 목표로 한다. 형제 지침(ATAG·UAAG)과 각국 법, 원칙별 점검 질문, 모든 성공 기준의 체크리스트를 정리했다.
Frontend › CSS
팝오버와 앵커 위치 지정툴팁·드롭다운·토스트를 JS 위치 계산 없이 만드는 두 기능. popover 속성은 auto·manual·hint 세 종류의 열고 닫기 규칙과 최상위 레이어를 주고, CSS 앵커 위치 지정은 anchor-name·position-anchor·position-area·anchor()로 요소를 다른 요소 옆에 붙이며 position-try-fallbacks로 화면 밖으로 나갈 때의 대안 위치를 정한다.
Frontend › CSS
CSS 목록과 카운터목록 항목은 display: list-item이라 ::marker를 가진다. list-style로 기호 종류·위치·이미지를 바꾸고, ::marker로 기호를 직접 꾸미고, @counter-style로 새 번호 체계를 만든다. counter-reset·counter-increment·counter()·counters()로 각주·절 번호·중첩 번호를 매기는 법과 reversed 목록까지 정리한다.
Frontend › JavaScript
JavaScript 주석: 쓰는 법과 네 가지 문법무엇을 주석으로 쓰고 무엇을 코드로 말할지(무엇·어떻게 대신 왜, 함수 추출, JSDoc), 그리고 ECMAScript 명세에 정의된 주석 네 가지(//, /* */, #! 해시뱅, <!-- --> HTML 유사 주석)의 문법과 동작, 유래를 정리한다. 주석은 공백처럼 취급되지만 줄바꿈을 품은 여러 줄 주석은 줄바꿈으로 취급되고, 나머지 두 형식은 인터프리터 지정과 옛 브라우저 호환을 위해 생겼다.
Frontend › Testing
접근성 기반 UI 테스트 자동화UI 테스트가 xpath·CSS 선택자 때문에 쉽게 깨지던 문제를 WAI-ARIA의 role과 접근 가능한 이름(accessible name)으로 요소를 찾는 방식으로 푸는 법. getByRole 쿼리, aria-label·aria-labelledby·aria-current·aria-expanded 활용, 헤드리스 컴포넌트, 인수·회귀 테스트로서의 효과, 접근성 트리를 LLM·AI 에이전트의 입력으로 쓰는 법을 정리한다.
Frontend › UI Design
디자이너는 어떻게 코드를 배우나디자이너가 코드를 배우는 목적은 엔지니어가 되는 것이 아니라 디자인의 재료를 이해하는 것이다. 터미널과 코드 에디터, Git의 포크·커밋·풀 리퀘스트, 시맨틱 HTML과 CSS 기초, 토큰·컴포넌트·DRY 같은 공학 개념을 순서대로 익히고, 공학적 결정은 엔지니어에게 맡긴다.
Frontend › UI Design
UI 요소 용어집: 입력·내비게이션·정보·컨테이너디자이너와 같은 말을 쓰기 위한 UI 요소 32가지를 입력 컨트롤·내비게이션·정보·컨테이너 네 범주로 묶고, 각각 언제 쓰는지와 구현할 때 기댈 HTML 요소·ARIA 패턴을 함께 정리한다. 햄버거·케밥·미트볼·벤토·도너 메뉴처럼 헷갈리는 아이콘 메뉴 이름도 구분한다.
Frontend
Web브라우저가 문서를 해석하고 서버와 상태를 주고받는 웹의 기본 구조.
Frontend › Web
구조화된 콘텐츠와 기계가 읽는 웹음성 비서·검색 엔진·AI 답변 엔진은 웹 페이지를 그대로 보여 주지 않고 내용을 뽑아 합치고 추론한다. 화면에만 맞춘 마크업은 기계가 오해한다. 시맨틱 HTML로 관계를 드러내고, schema.org 어휘의 링크드 데이터(JSON-LD)로 개념의 의미를 붙이고, CMS가 구조를 강제하게 만들면 어떤 인터페이스에서도 정확한 답이 나간다.
Frontend › Web
다국어 페이지: lang·hreflang과 국제화여러 언어로 페이지를 제공할 때 언어마다 URL을 나누고 lang·dir·hreflang으로 표시하는 법, Accept-Language를 쓰되 강제로 넘기지 않는 언어 선택, 문자열 연결 금지·Intl API·텍스트 길이·방향·이미지 속 글자 같은 국제화 설계 주의점을 정리했다.
Frontend › Web
더 나은 폼을 만드는 팁폼 사용성은 사용자의 통제권을 지키고 노력을 줄이는 데서 나온다. 묻는 칸 줄이기, 짧은 라벨과 한 열 배치, 브라우저 기본 동작 존중, 모바일 키보드(inputmode), 보이는 검증 메시지, 커서·포커스를 빼앗지 않는 입력 처리, 그리고 기기·사람·데이터로 폼을 시험하고 측정하는 법을 정리한다.
Frontend › Web
동영상 성능: 형식·poster·자동 재생·임베드동영상은 컨테이너와 코덱을 고르고 FFmpeg로 줄여 여러 source로 준다. 움직이는 GIF는 muted·loop·playsinline 자동 재생 video로 바꾼다. 사용자가 누를 동영상은 preload='none'과 poster, 화면 밖은 지연 로딩, 무거운 서드파티 플레이어는 퍼사드로 늦춘다. poster와 첫 프레임은 LCP 후보다.
Frontend › Web
로그인·가입 폼과 인증 입력가장 좋은 가입 폼은 없는 가입 폼이다. 필요할 때만 계정을 요구하고, 로그인·가입 폼은 비밀번호 관리자가 알아보게 만든다(new/current-password, 다른 name·id, 성공 감지, 붙여넣기 허용). 비밀번호 보기 버튼, 두 단계 로그인, 모바일 키보드 가림, 패스키 자동 완성(username webauthn), 일회용 코드(one-time-code·WebOTP), NIST SP 800-63B-4의 비밀번호 규칙, 계정 설정과 /.well-known/change-password까지 정리한다.
Frontend › Web
리소스 힌트와 미리 불러오기: preconnect·preload·fetchpriority·Speculation Rules브라우저가 스스로 늦게 발견하는 자원을 앞당기는 힌트. 다른 출처 연결은 preconnect·dns-prefetch, 늦게 발견되는 중요한 자원은 preload, 우선순위는 fetchpriority로 조정한다. 다음 이동을 위해서는 prefetch, Speculation Rules의 prefetch·prerender, 서비스 워커 프리캐싱을 쓰되 확신이 있을 때만 쓴다.
Frontend › Web
링크와 내비게이션 마크업<a href>가 가리킬 수 있는 곳(절대·상대 URL, 프래그먼트, mailto·tel, blob·data), download로 내려받기, target과 rel=noopener·noreferrer, 이름 붙은 브라우징 맥락으로 탭 폭증 막기, rel·hreflang·type·ping, 그리고 링크 목록을 <nav>로 묶는 건너뛰기 링크·목차·브레드크럼·로컬·전역 내비게이션 패턴을 정리한다.
Frontend › Web
목록과 표 마크업ul·ol·dl의 허용 자식과 중첩 규칙, ol·li의 번호 속성, dl을 div로 묶는 법, 그리고 표의 자식 순서(caption → colgroup → thead → tbody → tfoot), th·scope·headers, colspan·rowspan, colgroup·col로 열 꾸미기, 표 CSS를 정리한다. 목록인지·용어 쌍인지·표인지 고르는 기준도 함께 둔다.
Frontend › Web
문서 head와 메타데이터<head>는 화면에 보이지 않지만 인코딩·제목·뷰포트·스타일·스크립트·아이콘·대체 버전·대표 URL·검색과 SNS 미리보기 정보를 모두 담는다. 모든 페이지에 넣을 다섯 줄, 성능을 위한 요소 순서, link의 rel 종류, meta의 세 갈래(charset·http-equiv·name)와 이제 쓰지 않는 태그, Open Graph와 SEO의 관계, 미리보기가 안 나오는 이유, base의 함정, 웹 앱 매니페스트로 정리한다.
Frontend › Web
반응형 이미지: srcset·sizes와 picture같은 이미지를 크기만 바꿔 줄 때는 srcset·sizes로 브라우저에 선택을 맡기고(서술형), 자르기·형식 대체처럼 규칙을 강제할 때는 picture를 쓴다(지시형). 크기만 맞춰도 작은 화면의 이미지 용량이 70% 넘게 준다. sizes는 레이아웃에서의 폭이라 도구가 알 수 없으니 근삿값을 주거나, 지연 로딩 이미지는 sizes="auto"에 맡긴다.
Frontend › Web
스크립트·스타일 로딩 순서와 점진적 렌더링<script>, async, defer, type=module이 HTML 파싱과 실행 순서에 주는 차이, 프리로드 스캐너가 못 보는 늦게 발견되는 자원, CSS는 <head>에 두고 스크립트는 defer로 미루는 이유와 예외, @import를 피하고 중요 CSS만 인라인하는 CSS 경량화, 콘텐츠를 받는 대로 먼저 보여 주는 점진적 렌더링 기법을 정리했다.
Frontend › Web
시맨틱 HTML과 문서 구조태그로 모양이 아니라 의미를 표시하는 시맨틱 HTML. 랜드마크 태그, 제목 계층(h1~h6), <article>과 <section>을 언제 쓰는지, 요소의 암묵적 역할과 role 속성의 한계를 접근성 관점에서 정리했다. 아웃라인 알고리즘은 구현되지 않았으니 제목 수준은 직접 매긴다.
Frontend › Web
웹 앱 매니페스트웹 앱 매니페스트는 설치된 PWA의 이름·아이콘·시작 URL·표시 방식·색·바로 가기를 정하는 JSON이다. 앱을 식별하는 id, 내비게이션 범위 scope, 마스크 가능 아이콘, display와 display_override의 대체 순서, 설치 화면을 키우는 description·screenshots, iOS가 따로 쓰는 link·meta, 그리고 바뀐 메타데이터가 플랫폼마다 언제 반영되는지 정리한다.
Frontend › Web
웹 컴포넌트: template·slot·Shadow DOM라이브러리 없이 재사용 가능한 요소를 만드는 웹 표준. <template>은 렌더링되지 않는 HTML 조각, 커스텀 요소는 HTMLElement를 상속한 클래스와 라이프사이클 콜백, Shadow DOM은 마크업과 스타일을 캡슐화하는 별도 트리, <slot>은 바깥 내용을 끼울 자리다. :host·::slotted()·::part()·커스텀 속성으로 경계를 넘어 꾸미고, 이벤트는 리타게팅되며 composed 이벤트만 밖으로 나간다. 선언적 Shadow DOM으로 서버에서 그린다.
Frontend › Web
웹 표준은 어떻게 만들어지나: W3C·WHATWG·WICG웹 플랫폼의 표준은 W3C 권고안 트랙(WD → CR → REC), WHATWG의 리빙 스탠더드, WICG의 인큐베이션, TC39의 단계별 제안이라는 서로 다른 절차로 만들어진다. 권고안의 성숙 단계와 '독립적인 구현 둘' 같은 진입 조건, CSS가 레벨 단위 모듈로 쪼개진 이유, WHATWG가 HTML·DOM을 맡게 된 경위, 표준 상태와 브라우저 구현 상태를 확인하는 곳을 정리한다.
Frontend › Web
이미지·오디오·비디오 임베드내용인 이미지는 HTML, 장식은 CSS다. <img>의 필수 src·alt, 레이아웃 이동을 막는 width·height, loading·fetchpriority, figure·figcaption, SVG의 role="img"를 정리하고, <video>·<audio>의 source·type·codecs, poster, controls, autoplay와 muted, track의 다섯 kind, 배경 영상과 사용자 정의 컨트롤의 원칙을 다룬다.
Frontend › Web
자동 완성과 autocomplete 토큰브라우저는 name·id·type과 autocomplete 값으로 칸의 정체를 짐작해 저장된 주소·카드·비밀번호를 채운다. 짐작에 맡기지 말고 autocomplete 토큰을 명시하고, section-·shipping/billing·home/work·webauthn 순서 문법, 이름·주소·전화·카드·비밀번호 토큰표, autocomplete="off"가 듣지 않는 경우, :autofill 스타일링, 자동 완성을 깨는 흔한 실수를 정리한다.
Frontend › Web
제약 검증: required·pattern·ValidityState브라우저 내장 검증은 HTML 속성(required·type·minlength·pattern·min·max·step)으로 켜고, CSS 의사 클래스(:invalid·:user-invalid)로 보여 주고, Constraint Validation API(ValidityState·setCustomValidity·checkValidity·reportValidity)로 넓힌다. pattern이 v 플래그로 컴파일되는 점, 빈 값은 pattern 검사를 하지 않는 점, 언제 오류를 띄울지, 서버 검증이 왜 따로 필요한지를 정리한다.
Frontend › Web
지연 로딩: 이미지·iframe·퍼사드화면 밖 이미지·iframe은 loading='lazy'로 미뤄 첫 화면 자원에 대역폭을 몰아 준다. 첫 화면 이미지와 LCP 후보에는 절대 쓰지 않는다. 무거운 서드파티 임베드는 가짜 UI(퍼사드)를 보여 주다 상호작용할 때 바꾸고, 네이티브로 미룰 수 없는 video·배경 이미지는 IntersectionObserver 기반 라이브러리로 미룬다.
Frontend › Web
텍스트 의미 요소와 문자 참조문단·인용·강조·기술 문서·정의·수정 이력·줄 바꿈을 표현하는 HTML 텍스트 요소를 용도별로 고르는 법. blockquote·q·cite의 구분, em·strong·mark·i·b·u·s의 의미 차이, code·kbd·samp·var·data·time, abbr·dfn, br·hr·wbr, 그리고 꼭 이스케이프해야 하는 문자 참조를 정리한다.
Frontend › Web
포커스 속성과 details·dialogHTML만으로 포커스를 다루는 속성(tabindex·contenteditable·autofocus·disabled·inert)과 JavaScript 없이 동작하는 두 인터랙티브 요소를 요소 사전처럼 정리한다. 포커스를 빼는 세 방법의 차이, <details>/<summary>의 open·name·마커·오류 처리, <dialog>의 show·showModal·close, method="dialog"와 returnValue, ::backdrop, 열고 닫을 때의 포커스, commandfor로 스크립트 없이 여는 법까지 다룬다.
Frontend › Web
폼 제출과 데이터 전송<form>은 Enter 제출·검증·자동 완성·보조 기술 지원을 공짜로 주므로 데이터를 보내는 곳에는 항상 쓴다. GET과 POST 고르기, 제출 버튼의 종류와 type="button" 함정, 제출 버튼을 언제 막는가, FormData와 fetch로 새로 고침 없이 보내는 점진적 향상, 같은 엔드포인트에서 HTML·JSON 응답 나누기, HTTPS·데이터 최소화·허니팟 같은 보안·개인정보 원칙을 정리한다.
Frontend › Web
프론트엔드 웹 개발 용어집API부터 Yarn까지 프론트엔드 개발에서 자주 듣는 용어 70여 개를 주제별로 묶어 한두 줄로 설명하고, 자세한 노트가 있는 용어는 그 노트로 연결했다.
Frontend › Web
프론트엔드의 등장 배경초기 웹에는 프론트엔드라는 개념이 없었다. 이미지·CSS·JavaScript·AJAX가 차례로 등장하고 Flash가 물러나고, 구글·페이스북이 웹을 앱 플랫폼으로 밀어붙이면서 화면을 만드는 일이 전문 영역이 되었고, 트래픽이 커지자 프론트엔드와 백엔드가 나뉘었다. React 이후에는 프레임워크·상태 관리·타입·스타일링·빌드 도구·렌더링 방식이 해마다 바뀌었지만, 갈래별로 보면 방향은 일정했다.
Frontend › Web
CLS 최적화: 자리를 먼저 잡기레이아웃 이동은 늦게 도착한 것이 자리를 비집고 들어올 때 생긴다. 이미지·동영상에는 width·height나 aspect-ratio, 광고·임베드에는 min-height, 늦게 뜨는 배너는 자리 확보나 오버레이, 애니메이션은 transform, 웹 폰트는 font-display와 대체 폰트 지표 보정으로 막는다. 필드와 실험실 값의 차이로 로딩 중 이동인지 이후 이동인지 가른다.
Frontend › Web
HTML 기초와 HTML5웹 문서의 구조와 의미를 태그로 표현하는 마크업 언어와 그 핵심 문법. 요소와 태그, 대체·빈 요소, 생략 가능한 태그, 불리언·열거형·전역 속성, data-* 속성, 속성 하나로 끝나는 기능(enterkeyhint·form·download·loading·fetchpriority·integrity·popover 등), DOCTYPE, form 데이터 규칙, HTML5까지 다룬다.
Frontend › Web
HTML 입력 요소 치트시트input의 22가지 type과 label·select·textarea·fieldset·datalist까지, 폼에서 쓰는 입력 요소를 용도별로 정리하고, 값의 성격에 맞는 type·선택 컨트롤 고르기와 inputmode 8가지 값까지 다룬다.
Frontend › Web
LCP 최적화: 네 구간으로 나눠 줄이기LCP는 TTFB, 자원 로드 지연, 자원 로드 시간, 요소 렌더 지연의 합이다. 두 「지연」 구간은 0에 가깝게, 나머지 둘은 40%씩이 목표다. LCP 자원을 HTML에서 바로 발견되게 하고, fetchpriority로 앞당기고, 지연 로딩하지 않고, 작게 만들고, 막는 CSS·JS와 긴 작업을 걷어 낸다.
Frontend › Web
SEO 기초: 크롤링부터 메타 태그까지검색 엔진이 페이지를 크롤링·색인·순위 매기는 흐름과, 프론트엔드가 챙길 robots.txt·사이트맵·메타 태그·canonical·리다이렉트·렌더링 방식, 링크와 버튼의 구분을 정리했다.