분류 전체보기73 CSS 툴팁 구현 (attr함수, 인접형제선택자, 접근성) 버튼에 마우스를 올렸는데 아무 반응이 없다는 QA 피드백, 받아보신 적 있습니까? 저는 있습니다. JavaScript로 툴팁을 만들었는데 스크립트 로딩이 조금 늦으면서 생긴 문제였습니다. 그날 이후 CSS만으로 툴팁을 구현하는 방법을 진지하게 파고들었고, 생각보다 쓸 만한 방법이 세 가지나 있다는 걸 알게 됐습니다.attr() 함수로 HTML 속성 값을 CSS에서 읽는 방법CSS 툴팁의 첫 번째 방법은 data-tooltip 속성과 attr() 함수를 조합하는 방식입니다. attr() 함수란 HTML 요소에 직접 작성한 속성 값을 CSS가 읽어서 화면에 출력할 수 있도록 해주는 CSS 내장 함수입니다. 쉽게 말해, HTML에 data-tooltip="저장하시겠습니까?"라고 써두면 CSS의 content:.. 2026. 4. 18. CSS clamp() 반응형 폰트 (미디어쿼리, 유동타이포그래피, 접근성) 브라우저 창을 천천히 드래그해본 적 있으신가요? 저는 예전에 클라이언트 검수 중 태블릿 구간에서 글자가 갑자기 커 보인다는 피드백을 받고 처음 그 동작을 해봤습니다. 폰트가 계단처럼 뚝뚝 바뀌는 걸 보는 순간, 이건 구조적으로 뭔가 잘못됐다는 생각이 들었습니다. clamp()는 그 문제를 해결해준 함수입니다.미디어쿼리로 폰트를 관리하던 시절의 한계일반적으로 반응형 웹을 구현할 때 미디어쿼리(media query)를 쓰면 된다고 알려져 있습니다. 미디어쿼리란 특정 화면 너비 구간을 지정해두고, 그 구간에 해당할 때만 스타일을 적용하는 CSS 기법입니다. 저도 오랫동안 320px, 768px, 1200px 세 개의 브레이크포인트(breakpoint)를 기준으로 폰트 크기를 각각 따로 선언하는 방식을 써왔습니.. 2026. 4. 17. CSS Counter (counter-reset, 자동번호, 가상요소) 솔직히 저는 꽤 오랫동안 순위 번호를 HTML에 직접 손으로 입력했습니다. 번호 하나 바꾸려고 태그를 하나씩 열고 닫는 게 당연한 줄 알았거든요. CSS Counter를 알게 된 건 실수를 반복하고 나서였는데, 알고 보니 이미 CSS 안에 자동 번호 기능이 내장되어 있었습니다. 이 글은 그 기능을 어떻게 써먹었는지, 그리고 실제로 써보니 어떤 점이 좋고 어떤 점은 주의해야 하는지에 대한 이야기입니다.하드코딩 번호가 무너지던 날TOP 10 추천 글을 처음 발행했을 때 저는 모든 순위 번호를 1, 2 형태로 직접 HTML에 박아 넣었습니다. 그 당시에는 별 생각이 없었는데, 문제는 글을 올린 다음 날 생겼습니다. 3위와 4위 항목을 바꿔야 하는 상황이 생긴 거죠.텍스트만 옮기면 끝날 것 같았지만, 번호 태그.. 2026. 4. 17. CSS 변수 (커스텀 프로퍼티, 유지보수, 다크 모드) 색상 코드를 Ctrl+F로 하나씩 뒤지며 교체하다가 결국 배포 후에 버그를 발견한 적 있으신지요. 저는 있습니다. 그것도 클라이언트 블로그에서요. CSS 변수(Custom Properties)는 그 사건 이후 제가 모든 스킨 작업에 기본으로 도입한 도구입니다. 써보기 전과 후의 체감 차이가 생각보다 컸습니다.커스텀 프로퍼티, 실제로 어떻게 동작하는가CSS 변수는 공식 명칭으로 커스텀 프로퍼티(Custom Properties)라고 부릅니다. 커스텀 프로퍼티란 개발자가 직접 이름을 정해 값을 저장하고, 필요한 곳 어디서든 꺼내 쓸 수 있는 CSS 고유의 변수 시스템을 의미합니다. 변수 이름 앞에 하이픈 두 개(--)를 붙이고, :root 선택자 안에 선언하면 페이지 전체 어디서나 접근할 수 있습니다. 값을 .. 2026. 4. 16. Flexbox 레이아웃 (주축 교차축, flex-shrink, 반응형) 솔직히 저는 float 레이아웃이 잘못됐다는 걸 한참 동안 몰랐습니다. 사이드바가 본문 아래로 밀려나는 현상을 며칠째 붙잡고 있으면서도 clearfix를 빠뜨린 탓인지, 너비 계산이 틀린 건지 갈피를 잡지 못했습니다. 그러다 Flexbox를 처음 써본 날, 부모 요소 하나에 display: flex 한 줄을 추가했더니 자식 요소들이 나란히 붙어버렸습니다. 너무 간단해서 오히려 뭔가 빠진 게 있는 줄 알고 코드를 두세 번 다시 확인했습니다.주축과 교차축, 개념부터 잡아야 실수가 줄어든다Flexbox를 처음 배울 때 가장 먼저 막히는 부분이 주축(main axis)과 교차축(cross axis) 개념입니다. 주축이란 flex 컨테이너 안에서 자식 요소들이 나열되는 기본 방향을 말하고, 교차축은 그 방향에 수.. 2026. 4. 16. CSS Grid로 티스토리 카드형 레이아웃 (반응형, 스킨충돌, 매거진) float 코드 수십 줄을 다 버리고 CSS 다섯 줄로 끝낸 날, 솔직히 허탈했습니다. 그 전날 밤을 새웠거든요. 티스토리에 카드형 레이아웃을 넣고 싶다면 CSS Grid가 거의 유일한 정답에 가깝습니다. 단, 코드를 복붙하기 전에 반드시 확인해야 할 게 있습니다.반응형 카드 그리드, 코드보다 스킨 구조가 먼저입니다CSS Grid를 처음 제대로 써본 건 티스토리 리스트형 스킨을 카드형으로 바꾸려고 했을 때였습니다. float로 2열 레이아웃을 만들었는데, 카드 높이가 조금만 달라지면 레이아웃 전체가 어긋났습니다. clearfix를 추가하고, 음수 마진도 써보고, 온갖 방법을 시도했는데 결국 근본적인 해결이 안 됐습니다. 그때 Grid로 갈아탔고, display: grid에 repeat(2, 1fr) 한 .. 2026. 4. 16. 이전 1 ··· 5 6 7 8 9 10 11 ··· 13 다음
