비전공자코딩3 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. HTML/CSS 독학 (시작법, 무료사이트, 로드맵) HTML/CSS 독학 (시작법, 무료사이트, 로드맵)처음 HTML을 배워보겠다고 결심했던 날, 저는 이틀을 유튜브 영상 목록 스크롤에 날렸습니다. 조회수 높은 강의를 클릭했다가 닫고, 또 다른 걸 클릭했다가 닫는 걸 반복했습니다. 비전공자가 HTML/CSS를 독학할 때 가장 먼저 막히는 건 개념이 아니라 "어디서 시작하느냐"입니다. 직접 겪어보고 정리한 순서와 무료 학습 사이트, 그리고 중간에 포기하지 않는 방법을 공유합니다.일단 치고 보는 것, 그게 시작이었습니다저는 결국 W3Schools에서 태그를 하나씩 따라 치는 것으로 시작했습니다. 머리로 먼저 이해하려고 하지 않고, 눈에 보이는 코드를 그냥 손으로 입력하는 방식이었습니다. 그렇게 했더니 생각보다 빨리 감이 잡혔습니다. 제 경험상 이건 정말 효과.. 2026. 4. 15. 이전 1 다음
