태그
19개의 글
100vh가 잘리고 1px이 안 커지는 이유, 단위마다 기준이 달라서예요.
다섯 포맷 다 올리지 않아도 돼요, WOFF2 한 줄로 끝나거든요.
이미지에 치수만 적어도 레이아웃이 안 밀려요. 웹폰트 교체는 조금 더 까다롭고요.
자식을 보고 부모를 골라야 하는 순간, JavaScript 없이 CSS만으로 해결할 수 있어요.
클래스명 충돌에 지쳤다면, BEM이 제안하는 '이름으로 구조를 말하는 법'.
선택자 한 줄이 마법처럼 동작하는 이유는 캐스케이드와 결합자에 있습니다.
Tailwind냐 CSS-in-JS냐는 취향 싸움이 아닙니다. 각자 다른 문제를 푸는 도구예요.
flex-basis로 2차원을 흉내 내는 순간, 이미 Grid가 풀 문제입니다.
브라우저가 텍스트를 어떻게 처리하고 줄바꿈을 결정하는지 기본 원리를 이해합니다.
white-space 속성의 다양한 값들을 활용해 공백, 탭, 줄바꿈을 자유자재로 제어하는 방법을 학습합니다.
아이콘을 매번 요청하는 게 아까워서 인라인했는데, CSS 파일이 더 커졌어요.
16:9 비율 만들겠다고 padding-top에 56.25%를 넣고 있나요? 더 나은 방법이 있어요.
페이지 이동할 때마다 화면이 뚝 끊기죠. 브라우저 API 하나면 매끄럽게 이어줄 수 있어요.
width: 200px인데 220px로 렌더링되는 이유, border-box 한 줄이 해결합니다.
z-index를 아무리 올려도 안 먹히는 순간이 있습니다. 범인은 숫자가 아니에요.
한 줄이면 끝나는 최적화 같지만, 잘못 쓰면 오히려 더 느려집니다.
top/left는 매 프레임 레이아웃을 다시 계산합니다. transform은 그 과정을 건너뛰죠.
반응형 디자인, 다국어 지원, 접근성을 고려한 실제 프로젝트 사례와 모범 사례를 소개합니다.
word-break의 모든 값들과 실제 사용 사례를 통해 단어 단위 줄바꿈을 마스터합니다.
