#layout
노트 19개
Frontend
CSSHTML 요소의 모양과 배치를 지정하는 스타일 언어.
Frontend › CSS
박스 모델과 display모든 요소를 content·padding·border·margin의 네모로 다루는 박스 모델, 내용이 크기를 정하는 내재적 크기와 바깥이 정하는 외재적 크기, margin·padding·gap으로 간격을 주는 방법과 margin 병합, 병합과 float를 안에 가두는 블록 서식 맥락(BFC), 배치 방식을 결정하는 display.
Frontend › CSS
쓰기 모드와 논리적 속성writing-mode가 정하는 블록·인라인 축, 그리고 top·left·width 같은 물리 속성 대신 block-start·inline-end·inline-size처럼 글의 흐름을 기준으로 쓰는 논리적 속성. 그리드와 플렉스박스가 왜 start·end로 생각하는지도 여기서 풀린다.
Frontend › CSS
팝오버와 앵커 위치 지정툴팁·드롭다운·토스트를 JS 위치 계산 없이 만드는 두 기능. popover 속성은 auto·manual·hint 세 종류의 열고 닫기 규칙과 최상위 레이어를 주고, CSS 앵커 위치 지정은 anchor-name·position-anchor·position-area·anchor()로 요소를 다른 요소 옆에 붙이며 position-try-fallbacks로 화면 밖으로 나갈 때의 대안 위치를 정한다.
Frontend › CSS
CSS 그리드 레이아웃행과 열을 동시에 다루는 2차원 레이아웃 CSS 그리드의 용어, 핵심 속성, fr·minmax·auto-fill 같은 크기 도구와 명시적·묵시적 그리드, 서브그리드, 그리고 접근성과 플렉스박스와의 역할 분담 같은 실무 원칙.
Frontend › CSS
CSS 실전 팁: 리셋과 작은 패턴프로젝트마다 반복해 쓰는 짧은 CSS 패턴 모음. 새 프로젝트의 출발점이 되는 최소 리셋(box-sizing·margin·line-height·미디어·폼 글꼴)과 all: unset으로 버튼 초기화하기, 쉼표 목록·빈 링크 주소 표시·깨진 이미지 꾸미기·연속 <br> 숨기기 같은 생성 콘텐츠·선택자 패턴, table-layout: fixed와 높이 펼치기 애니메이션, 그리고 다른 노트에 집이 있는 팁의 위치와 이제 쓰지 않는 옛 팁.
Frontend › CSS
CSS 오버플로와 스크롤: 넘침 처리와 스크롤 스냅내용이 박스보다 클 때 보일지·자를지·스크롤할지를 정하는 overflow, 한 줄 말줄임을 만드는 text-overflow, 스크롤 영역의 키보드 접근성, 스크롤바 스타일, scroll-behavior와 overscroll-behavior, 갤러리처럼 칸마다 멈추는 스크롤 스냅까지 정리한다.
Frontend › CSS
CSS 점진적 향상: 폴백과 피처 쿼리새 CSS 기능을 지원하지 않는 브라우저를 '똑같이 보이게'가 아니라 '쓸 만하게' 지원하는 방식. 모르는 CSS는 무시된다는 규칙, 새 레이아웃이 옛 레이아웃을 덮어쓰는 규칙, @supports 피처 쿼리로 폴백을 정리하는 패턴, 브라우저 대신 컴포넌트에 매기는 지원 등급, 무거운 폴리필을 피하는 이유, 실제 브라우저 테스트까지.
Frontend › CSS
CSS position과 z-index요소를 문서 흐름 안팎에서 원하는 위치로 옮기는 position 속성, 쌓임 순서를 정하는 z-index와 쌓임 맥락, 다른 요소에 붙여 배치하는 앵커 위치 지정.
Frontend › CSS
CSS가 동작하는 방식: 핵심 개념과 픽셀이 되기까지속성 암기보다 먼저 익혀야 할 CSS의 핵심 개념(캐스케이드·상속·특정도, 박스 모델, 일반 흐름, 서식 맥락, 흐름 안팎, 정렬, 크기 결정)과, 브라우저가 CSS를 해석·캐스케이드·계산해 레이아웃으로 넘기는 과정.
Frontend › CSS
CSS의 역사로 본 CSS가 어려워진 이유문서를 꾸미려고 만든 CSS가 웹 애플리케이션을 만들게 되면서 생긴 두 구조적 문제(전역 범위와 명시도)와, 이를 풀려고 등장한 시맨틱·Sass·BEM·Flexbox·CSS Modules·CSS-in-JS·유틸리티 CSS, 그리고 @layer·@scope·네이티브 중첩처럼 문제를 CSS 스스로 푸는 최근 스펙까지의 흐름을 정리했다.
Frontend › CSS
Float와 Flexbox 레이아웃Normal Flow를 벗어나 요소를 배치하는 float와 flow-root로 float 담기, 축을 기준으로 아이템을 정렬하는 1차원 레이아웃 모델 Flexbox. 속성의 초깃값과 flex 키워드, 내용 기반 공간 분배, auto margin으로 그룹 나누기, 쓰기 모드에 따라 바뀌는 축, min-width: auto 함정, 그리고 글을 여러 단으로 흘리는 다단 레이아웃까지.
Frontend › CSS
line-height와 vertical-align: 글꼴 지표와 인라인 서식 맥락같은 font-size라도 글꼴마다 높이가 다른 이유(em 사각형과 ascent·descent 지표), 인라인 요소의 두 높이(content-area와 line-height가 만드는 가상 영역), 줄 상자(line box)의 높이가 정해지는 방식, line-height: normal의 실제 값, vertical-align이 줄 상자를 키우는 원리와 이미지 아래 틈 같은 증상의 원인.
Frontend › CSS
transform: 이동·회전·확대·기울이기요소를 문서 흐름에 영향 없이 이동·확대·회전·기울이는 transform 함수들과, top·left 50%에 translate(-50%, -50%)를 더하는 가운데 정렬 패턴.
Frontend › JavaScript
요소 크기·스크롤·좌표JavaScript로 요소와 창의 크기·스크롤·위치를 읽고 바꾸는 법. offset·client·scroll 계열 기하 속성이 각각 무엇을 재는지, CSS width 대신 기하 속성을 읽는 이유, 창 크기와 문서 높이, scrollTo·scrollIntoView와 스크롤 막기, 창 기준(clientX·getBoundingClientRect)과 문서 기준(pageX) 좌표, elementFromPoint를 정리한다.
Frontend › UI Design
레이아웃 그리드와 간격 체계: 12단 그리드, 8pt 그리드, 수직 리듬화면에 질서를 주는 세 가지 수치 체계. 단위·거터·칼럼·필드로 이뤄진 칼럼 그리드와 3·4·6단으로 나뉘는 12단 그리드, 모든 크기·간격을 8의 배수로 맞추는 8pt 그리드(하드·소프트 방식, 4pt 기준선), 본문 줄 높이를 기준으로 세로 간격을 맞추는 수직 리듬과 모듈러 스케일을 정리하고, CSS Grid·rlh·text-box-trim·디자인 토큰으로 구현하는 법을 붙였다.
Frontend › UI Design
반응형 UI 패턴: 내비게이션, 캐러셀, 데이터 표작은 화면의 디자인은 큰 화면을 줄인 것이 아니고, 큰 화면은 작은 화면을 늘린 것이 아니다. 좁은 화면에서 공간이 모자라면 먼저 숨기지 않고 보이게 다듬고, 다음은 가로로 넘겨 보는 오버플로 패턴, 마지막이 버튼으로 여닫는 점진적 공개다. 캐러셀은 좁은 화면에서만 가로 스크롤로 두고 넓은 화면에서는 그리드로 펼친다. 데이터 표는 첫 열 고정·카드로 쌓기·열 숨기기 중 사용 목적에 맞춰 고르고, 페이지는 Mostly Fluid·Column Drop 같은 레이아웃 패턴으로 바꾼다.
Frontend › UI Design
웹 레이아웃 디자인: 인쇄와 다른 매체웹은 크기가 고정되지 않은 매체다. 화면 폭 대응은 고정폭·리퀴드·적응형을 거쳐 반응형으로 왔고, 지금은 플렉스박스·그리드·컨테이너 쿼리로 콘텐츠에 맞게 늘고 줄어드는 본질의 웹 디자인(Intrinsic Web Design)이 기본이다. 페이지(매크로)와 컴포넌트(마이크로) 레이아웃을 나눠 설계하고, 인쇄의 단락·문자 스타일은 CSS의 블록·인라인 규칙으로, 칼럼 그리드와 8pt 간격 체계는 CSS 그리드와 디자인 토큰으로 이어지며, 이미지 위 텍스트는 대비·위치·심도로 읽히게 한다.
Frontend
Quasar 프레임워크 기초Vue 3 기반 UI 프레임워크 Quasar의 q- 컴포넌트와 유틸리티 클래스, 레이아웃·페이지 구조와 중첩 라우팅, 플러그인으로 쓰는 기능(Dialog), 폼 검증 라이브러리 연동을 정리한다.