티스토리HTML2 CSS only 탭 UI-radio input, :target, details 사용방법 JavaScript 없이도 탭 UI를 구현할 수 있다는 말, 처음 들었을 때 저도 반신반의했습니다. 그런데 직접 세 가지 방식을 다 구현해보고 나서 생각이 바뀌었습니다. 쓸 수 있는 상황이 분명히 있고, 쓰면 안 되는 상황도 분명히 있습니다. 문제는 "CSS only로 모든 걸 해결할 수 있다"는 식의 글들이 그 경계를 잘 알려주지 않는다는 점입니다. 저는 그 경계를 직접 부딪히며 알게 됐습니다. 그리고 솔직히 말하면, 부딪힌 뒤에도 한동안 "내가 뭔가 잘못하고 있는 건가"를 먼저 의심했습니다. 방법의 한계라는 걸 인정하기가 쉽지 않았습니다.radio input으로 탭 만들기CSS only 탭의 가장 대표적인 방법은 radio input과 label을 조합하는 방식입니다. radio input에는 같은 .. 2026. 4. 20. CSS 강조 박스 (박스 모델, 박스 유형, 다크모드) - 박스가 독자에게 신호를 보내는 도구가 된 과정 CSS를 시작했을 때, 박스 하나 만드는 데 왜 이렇게 헤매는지 몰랐습니다. 테두리를 넣고, 배경을 바꾸고, 안쪽 여백이 왜 이렇게 튀어나오지 하면서 새로고침만 수십 번 눌렀습니다. 그러다 어느 순간 깨달았습니다. 박스는 그냥 사각형이 아니라 독자에게 신호를 보내는 도구라는 걸. 그 뒤로 박스를 만드는 방식이 달라졌습니다.이 글은 제가 블로그와 토이 프로젝트에서 실제로 써먹으며 "이건 진짜 쓸 만하다"고 느낀 7가지 강조 박스 유형을 정리한 기록입니다. 각각 어떤 상황에서 왜 써야 하는지, 그리고 직접 써보며 발견한 맹점까지 담았습니다.박스 모델 — 수치 뒤에 숨어 있는 구조의 진실CSS에서 강조 박스를 만들 때 가장 먼저 맞닥뜨리는 개념이 박스 모델입니다. 박스 모델이란 HTML 요소 하나가 화면에서 .. 2026. 4. 9. 이전 1 다음
