웹개발독학4 CSS clamp() 반응형 폰트-미디어쿼리, 유동타이포그래피, 접근성 브라우저 창을 천천히 드래그해본 적 있으신가요? 저는 예전에 클라이언트 검수 중 태블릿 구간에서 글자가 갑자기 커 보인다는 피드백을 받고 처음 그 동작을 해봤습니다. 폰트가 계단처럼 뚝뚝 바뀌는 걸 보는 순간, 이건 구조적으로 뭔가 잘못됐다는 생각이 들었습니다. clamp()는 그 문제를 해결해준 함수입니다.여기서 미리 한 가지 짚고 싶습니다. clamp()가 좋은 도구라는 건 분명한데, 이 함수를 소개하는 글들 중 상당수가 "미디어쿼리를 대체한다"는 표현을 쓰는 경우가 있습니다. 이 말이 반은 맞고 반은 오해를 부릅니다. 그 경계를 이 글에서 분명히 하려 합니다.미디어쿼리로 폰트를 관리하던 시절의 한계반응형 웹을 구현할 때 미디어쿼리를 쓰면 된다고 알려져 있습니다. 미디어쿼리란 특정 화면 너비 구간을 .. 2026. 4. 17. 순위 번호를 손으로 고치다가 같은 번호가 두 개 생긴 날 CSS Counter - counter-reset, 자동번호, 가상요소 솔직히 저는 꽤 오랫동안 순위 번호를 HTML에 직접 손으로 입력했습니다. 번호 하나 바꾸려고 태그를 하나씩 열고 닫는 게 당연한 줄 알았거든요. CSS Counter를 알게 된 건 실수를 반복하고 나서였는데, 알고 보니 이미 CSS 안에 자동 번호 기능이 내장되어 있었습니다.이 글을 쓰면서 드는 생각이 있습니다. CSS Counter가 존재한다는 것을 늦게 알았다는 사실 자체보다, 그걸 몰랐던 이유가 더 흥미롭습니다. 저는 CSS를 "스타일을 입히는 도구"로만 인식하고 있었고, 번호 매기기는 당연히 HTML이나 JavaScript의 영역이라고 생각했습니다. 그 선입견이 학습의 범위를 좁혀놓고 있었던 겁니다.하드코딩 번호가 무너지던 날TOP 10 추천 글을 처음 발행했을 때 저는 모든 순위 번호를 HTM.. 2026. 4. 17. CSS 변수 - 커스텀 프로퍼티, 유지보수, 다크 모드 색상 코드를 Ctrl+F로 하나씩 뒤지며 교체하다가 결국 배포 후에 버그를 발견한 적 있으신지요. 저는 있습니다. 그것도 클라이언트 블로그에서요. 그 사건 이후 CSS 변수를 모든 스킨 작업에 기본으로 도입하기 시작했습니다. 써보기 전과 후의 체감 차이가 생각보다 컸습니다.그런데 사실 이 이야기를 하기 전에 먼저 짚고 싶은 게 있습니다. 그 버그는 단순히 색상 코드를 놓쳐서 생긴 문제가 아니었습니다. 근본적으로는 같은 값이 코드 곳곳에 흩어져 있던 구조 자체가 문제였습니다. CSS 변수는 그 구조적 문제를 해결하는 도구입니다. 색상 관리 편의성만으로 설명하면 반쪽짜리 이해가 됩니다. 저는 이 구분을 제대로 하는 데도 꽤 시간이 걸렸습니다.커스텀 프로퍼티, 실제로 어떻게 동작하는가CSS 변수는 공식 명칭으.. 2026. 4. 16. HTML/CSS 독학, 어디서 시작해야 하는가 처음 HTML을 배워보겠다고 결심했던 날, 저는 이틀을 유튜브 영상 목록 스크롤에 날렸습니다. 조회수 높은 강의를 클릭했다가 닫고, 또 다른 걸 클릭했다가 닫는 걸 반복했습니다. 지금 돌이켜보면 그건 배우기를 망설이는 게 아니었습니다. 잘못된 방법으로 시작할까봐 두려워하는 상태였습니다. 비전공자가 HTML/CSS를 독학할 때 가장 먼저 막히는 건 개념이 아닙니다. "어디서 시작하느냐"입니다. 직접 겪어보고 정리한 순서와 무료 학습 사이트, 그리고 중간에 포기하지 않는 방법을 공유합니다. 일단 치고 보는 것, 그게 시작이었습니다저는 결국 W3Schools에서 태그를 하나씩 따라 치는 것으로 시작했습니다. 머리로 먼저 이해하려고 하지 않고, 눈에 보이는 코드를 그냥 손으로 입력하는 방식이었습니다. 그렇게 했.. 2026. 4. 15. 이전 1 다음
