티스토리HTML2 CSS only 탭 UI (radio input, :target, details) JavaScript 없이도 탭 UI를 구현할 수 있습니다. CSS만으로 말이죠. 저도 처음엔 반신반의했는데, 실제로 써보니 생각보다 쓸 만한 상황이 분명히 있었습니다. 다만 "CSS only로 모든 걸 해결할 수 있다"고 단언하는 시각도 있는데, 제 경험상 그건 좀 다릅니다. 방법마다 분명한 한계가 있고, 어느 쪽이 낫다고 쉽게 말하기 어렵습니다.radio input으로 탭 만들기CSS only 탭의 가장 대표적인 구현 방식은 radio input과 label을 조합하는 방법입니다. 원리는 단순합니다. 브라우저가 radio input의 :checked 상태를 CSS로 감지할 수 있다는 점을 이용합니다. 여기서 :checked란 체크박스나 라디오 버튼이 선택된 상태를 CSS가 인식하는 가상 클래스(pseu.. 2026. 4. 20. CSS 강조 박스 (박스 모델, 박스 유형, 다크모드) 처음 CSS를 시작했을 때, 박스 하나 만드는 데 왜 이렇게 헤매는지 몰랐다. border를 넣고, 배경을 바꾸고, padding이 왜 이렇게 튀어나오지? 하면서 새로고침만 수십 번 눌렀다. 그러다 어느 순간 깨달았다. 박스는 그냥 사각형이 아니라 독자에게 신호를 보내는 도구라는 걸. 그 뒤로 박스를 만드는 방식이 달라졌다.이 글에서는 내가 블로그와 토이 프로젝트에서 실제로 써먹으며 "이건 진짜 쓸 만하다"고 느낀 7가지 강조 박스를 정리했다. 코드만 던지는 게 아니라, 각각 어떤 상황에서 왜 써야 하는지까지 담았다.박스 모델: 수치 뒤에 숨어 있는 구조의 진실CSS에서 강조 박스를 만들 때 가장 먼저 맞닥뜨리는 개념이 박스 모델(Box Model)입니다. 여기서 박스 모델이란 HTML 요소 하나가 화면.. 2026. 4. 9. 이전 1 다음
