블로그CSS2 CSS Counter (counter-reset, 자동번호, 가상요소) 솔직히 저는 꽤 오랫동안 순위 번호를 HTML에 직접 손으로 입력했습니다. 번호 하나 바꾸려고 태그를 하나씩 열고 닫는 게 당연한 줄 알았거든요. CSS Counter를 알게 된 건 실수를 반복하고 나서였는데, 알고 보니 이미 CSS 안에 자동 번호 기능이 내장되어 있었습니다. 이 글은 그 기능을 어떻게 써먹었는지, 그리고 실제로 써보니 어떤 점이 좋고 어떤 점은 주의해야 하는지에 대한 이야기입니다.하드코딩 번호가 무너지던 날TOP 10 추천 글을 처음 발행했을 때 저는 모든 순위 번호를 1, 2 형태로 직접 HTML에 박아 넣었습니다. 그 당시에는 별 생각이 없었는데, 문제는 글을 올린 다음 날 생겼습니다. 3위와 4위 항목을 바꿔야 하는 상황이 생긴 거죠.텍스트만 옮기면 끝날 것 같았지만, 번호 태그.. 2026. 4. 17. CSS 눈 피로 줄이기 (색상 설정, 줄 길이, 다크모드) 한참 모니터를 들여다보다가 퇴근하면서 눈이 뻑뻑하고 화면이 잔상처럼 남는 느낌, 한 번쯤 겪어봤을 거다. 나는 그게 당연한 줄 알았다. 컴퓨터를 많이 써서 그런 거라고. 그런데 어느 날 CSS를 조금 손봤더니 같은 시간을 봐도 눈이 덜 피로한 걸 느꼈다. 모니터가 바뀐 것도, 안경을 새로 맞춘 것도 아니었는데.그 뒤로 화면이 눈에 주는 피로감이 설정에 따라 달라진다는 걸 체감했다. 오늘은 내가 직접 써보고 "이건 확실히 다르다"고 느낀 CSS 설정 다섯 가지와, 그걸 다크모드까지 연결하는 방법을 정리한다.배경색, 글자색, 줄 길이 — 숫자로 보는 색상 설정배경색을 순수 흰색인 #ffffff 대신 #faf9f6으로 바꾸는 것은 단순한 취향 문제가 아닙니다. 이 차이는 광도(Luminance) 값의 차이로 .. 2026. 4. 10. 이전 1 다음
