전체 글118 CSS 이미지 오버레이 - 구현 방식, 접근성 JavaScript 없이 이미지 위에 설명을 띄울 수 있다는 말, 처음엔 반신반의했습니다. 포트폴리오 페이지를 만들면서 mouseenter 이벤트 리스너를 카드마다 붙이던 저도 결국 CSS :hover 한 줄로 갈아탔고, 코드가 절반 이하로 줄었습니다. 그런데 직접 써보고 나서 느낀 건, 구현 방법을 배우는 것보다 그 전에 생각해야 할 것들이 더 많다는 점이었습니다. 효과가 화려할수록 그 뒤에 숨어 있는 문제가 더 많았습니다.opacity, translateY, clip-path: 세 방식의 실질적인 차이가장 흔하게 쓰이는 방법은 position:absolute와 opacity를 조합하는 방식입니다. 컨테이너에 position:relative를 주고, 오버레이를 absolute로 얹은 뒤 :hover 시.. 2026. 4. 21. CSS only 탭 UI-radio input, :target, details 사용방법 JavaScript 없이도 탭 UI를 구현할 수 있다는 말, 처음 들었을 때 저도 반신반의했습니다. 그런데 직접 세 가지 방식을 다 구현해보고 나서 생각이 바뀌었습니다. 쓸 수 있는 상황이 분명히 있고, 쓰면 안 되는 상황도 분명히 있습니다. 문제는 "CSS only로 모든 걸 해결할 수 있다"는 식의 글들이 그 경계를 잘 알려주지 않는다는 점입니다. 저는 그 경계를 직접 부딪히며 알게 됐습니다. 그리고 솔직히 말하면, 부딪힌 뒤에도 한동안 "내가 뭔가 잘못하고 있는 건가"를 먼저 의심했습니다. 방법의 한계라는 걸 인정하기가 쉽지 않았습니다.radio input으로 탭 만들기CSS only 탭의 가장 대표적인 방법은 radio input과 label을 조합하는 방식입니다. radio input에는 같은 .. 2026. 4. 20. details 태그 - JS 없이 토글, 아코디언, SEO FAQ 페이지 작업을 처음 맡았을 때, 저는 JavaScript로 토글 기능을 직접 짰습니다. 기능은 됐지만 코드가 생각보다 많아졌고, 항목이 늘어날 때마다 JS까지 함께 손봐야 했습니다. 그러다 HTML 레퍼런스를 뒤지다 details 태그를 발견했고, 솔직히 처음엔 '이게 진짜 되나?' 싶었습니다. 테스트해보니 JS 한 줄 없이 열리고 닫혔습니다. 그 허탈함이 아직도 기억납니다.이 글을 쓰면서 동시에 드는 생각이 있습니다. details 태그가 HTML에 이미 있는데 왜 몰랐냐는 자책보다, 왜 이런 기능이 잘 알려져 있지 않은지가 더 흥미로운 질문입니다. HTML 입문 튜토리얼 대부분이 div와 span, 기본 입력 요소에 집중되어 있고 details처럼 인터랙티브한 시맨틱 요소는 후반부에 짧게 지나.. 2026. 4. 19. CSS 툴팁 구현 - attr함수, 인접형제선택자, 접근성 버튼에 마우스를 올렸는데 아무 반응이 없다는 QA 피드백, 받아보신 적 있습니까? 저는 있습니다. JavaScript로 툴팁을 만들었는데 스크립트 로딩이 조금 늦으면서 생긴 문제였습니다. 그날 이후 CSS만으로 툴팁을 구현하는 방법을 진지하게 파고들었고, 생각보다 쓸 만한 방법이 세 가지나 있다는 걸 알게 됐습니다.다만 이 글을 시작하면서 한 가지 전제를 먼저 말씀드리고 싶습니다. CSS 툴팁이 JavaScript 툴팁보다 무조건 낫다고 결론 내리는 건 경계해야 합니다. 상황에 따라 CSS가 더 적합한 경우가 있고, JavaScript가 더 적합한 경우도 있습니다. 이 글은 CSS 툴팁 세 가지 방식을 직접 써본 경험과 그 과정에서 마주친 한계를 함께 이야기합니다.attr() 함수로 HTML 속성 값을 .. 2026. 4. 18. 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. 이전 1 ··· 12 13 14 15 16 17 18 ··· 20 다음
