#responsive
노트 7개
Frontend › Accessibility
접근성을 위한 CSS와 타이포그래피CSS는 표현만 맡고 의미는 HTML이 진다. 소스 순서와 화면 순서를 맞추고, 숨김은 모두에게 숨길지(display:none·hidden) 화면에서만 숨길지(visually-hidden) 구분한다. 400% 확대에서도 가로 스크롤 없이 읽히게(1.4.10 Reflow), 사용자가 줄·글자 간격을 넓혀도 깨지지 않게(1.4.12 Text Spacing) 만들고, 글꼴·정렬·글줄 길이로 읽기 부담을 줄인다.
Frontend › CSS
노치와 폴더블 화면 대응: env()와 뷰포트 세그먼트노치·둥근 모서리·홈 표시줄처럼 화면을 가리는 하드웨어는 viewport-fit=cover와 env(safe-area-inset-*)로 비켜 간다. 두 화면에 걸친 폴더블은 horizontal·vertical-viewport-segments 미디어 기능으로 감지하고 env(viewport-segment-*)로 경첩을 피해 칸을 나눈다. 세그먼트 기능은 아직 실험 단계라 점진적 향상으로만 쓴다.
Frontend › CSS
미디어 쿼리 문법과 미디어 기능미디어 쿼리는 미디어 타입(all·screen·print)과 미디어 기능으로 이루어진다. and·or·not과 범위 문법으로 조건을 묶고, 뷰포트 크기·화면 비율·해상도·갱신 속도·표시 모드·색 표현력·입력 장치·사용자 설정·스크립트 여부까지 묻는다. 입력 방식은 화면 크기로 짐작하지 않고 pointer·hover로 직접 묻는다.
Frontend › CSS
테마와 다크 모드 구현: theme-color, color-scheme, accent-color테마는 페이지 색만이 아니라 브라우저 UI(theme-color), 브라우저가 그리는 폼·스크롤바(color-scheme), 체크박스·라디오 강조색(accent-color), 아이콘과 사진까지 함께 바꿔야 완성된다. 색 값은 커스텀 속성에 모아 한 번만 재정의하고, 사진은 밝기를 낮추거나 picture로 바꿔 끼운다.
Frontend › CSS
CSS 함수: calc()·clamp()와 수학 함수CSS 함수는 인자를 받아 값을 돌려주는 내장 기능이다. 중첩해 쓸 수 있고, `@function`으로 직접 정의하는 기능은 아직 Chromium 계열만 지원한다. 값을 꺼내는 var()·attr()·url(), 단위를 섞어 계산하는 calc()·min()·max()·clamp(), 삼각·지수·부호 함수, 도형 함수, 변형 함수를 용도별로 묶고 브라우저 지원 범위를 정리한다.
Frontend › UI Design
반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표작은 화면의 디자인은 큰 화면을 줄인 것이 아니고, 큰 화면은 작은 화면을 늘린 것이 아니다. 좁은 화면에서 공간이 모자라면 먼저 숨기지 않고 보이게 다듬고, 다음은 가로로 넘겨 보는 오버플로 패턴, 마지막이 버튼으로 여닫는 점진적 공개다. 캐러셀은 좁은 화면에서만 가로 스크롤로 두고 넓은 화면에서는 그리드로 펼친다. 데이터 표는 첫 열 고정·카드로 쌓기·열 숨기기 중 사용 목적에 맞춰 고르고, 페이지는 Mostly Fluid·Column Drop 같은 레이아웃 패턴으로 바꾼다.
Frontend › UI Design
SVG 아이콘: 형식, 넣는 방법, 이름 붙이기, 스타일아이콘은 콘텐츠가 아니라 인터페이스의 일부라 글자처럼 커지고 색이 바뀌어야 한다. 그래서 크기마다 파일이 필요한 PNG보다 한 파일로 모든 크기를 그리는 SVG가 맞다. 글과 함께 있는 아이콘은 장식이니 숨기고, 아이콘만 있는 버튼은 뜻을 이름으로 준다. 인라인 SVG는 currentColor로 글자색과 테마를 따라가게 한다. 프레젠테이션 속성의 낮은 우선순위, transform-box: fill-box, 선 그리기 효과, 넣는 방법별로 되는 CSS도 다룬다.