html시맨틱태그2 details 태그 (JS 없이 토글, 아코디언, SEO) FAQ 페이지 작업을 처음 맡았을 때, 저는 JavaScript로 토글 기능을 직접 짰습니다. 기능은 됐지만 코드가 생각보다 많아졌고, 항목이 늘어날 때마다 JS까지 함께 손봐야 했습니다. 그러다 HTML 레퍼런스를 뒤지다 details 태그를 발견했고, 솔직히 처음엔 '이게 진짜 되나?' 싶었습니다. 테스트해보니 JS 한 줄 없이 열리고 닫혔습니다. 그 허탈함이 아직도 기억납니다.JS 없이 토글이 된다고?FAQ 페이지 의뢰를 처음 받았을 때, 저는 당연히 ul 태그로 질문과 답변을 쭉 나열했습니다. 결과물을 보니 페이지 스크롤이 끝없이 이어졌고, 클라이언트도 "한눈에 보기 어렵다"고 했습니다. 그래서 querySelector로 요소를 잡고 classList.toggle을 써서 토글 기능을 붙였습니다. .. 2026. 4. 19. H 태그 사용법 (구조적 오류, 헤딩 위계, SEO 최적화) H1을 한 포스팅에 네 번 썼습니다. 강조하고 싶은 문장마다 H1을 붙였고, 그게 문제라는 생각은 전혀 없었습니다. 소스 보기 버튼을 처음 눌러봤을 때 제 글이 얼마나 구조적으로 엉망이었는지 한눈에 보였습니다. 그날부터 H 태그가 다르게 보이기 시작했습니다.H 태그를 글자 크기 조절 도구로 쓰고 있진 않으신가요?블로그를 처음 만들었을 때 저는 H 태그가 단순히 글꼴 크기를 바꾸는 수단이라고 생각했습니다. H1을 쓰면 크게, H3를 쓰면 조금 작게. 그 이상의 의미는 몰랐습니다. 강조하고 싶은 문장이 생기면 망설임 없이 H1을 붙였고, 한 포스팅에 H1이 네 개 들어간 글도 있었습니다.그런데 헤딩 태그(Heading Element)는 디자인 도구가 아닙니다. 헤딩 태그란 HTML 문서에서 콘텐츠의 계층 구.. 2026. 4. 6. 이전 1 다음
