기존 방식의 문제점
<div class="text-content"> <span>Timeless Design</span> <h3>실내 인테리어</h3> <p>공간에 감성을 더하고, 삶에 아름다움을 선사하는 디자인의 새로운 기준</p> </div>
<h3>앞에<span>이 배치되면서 잘못된 헤딩 계층 구조가 발생<span>은 제목 역할을 하지 못하기 때문에 비의미적 마크업이 됨- 검색 엔진(SEO) 및 웹 접근성(Accessibility) 문제 발생 가능
해결 방법 1: 올바른 헤딩 구조 적용
서브 타이틀을 <h4>로 설정하고, 스타일로 크기 조정
HTML
<div class="text-content">
<h4>Timeless Design</h4>
<h3>실내 인테리어</h3>
<p>공간에 감성을 더하고, 삶에 아름다움을 선사하는 디자인의 새로운 기준</p>
</div>
<style>
h4 {
font-size: 1.2em; /* 작은 제목 크기 */
font-weight: normal; /* 강조 효과 줄이기 */
text-align: center; /* 가운데 정렬 (선택 사항) */
margin-bottom: 5px; /* 제목과의 간격 */
}
</style>장점:
- 논리적인 문서 구조 유지
- HTML의 의미론적 태그 사용 → SEO와 웹 접근성 개선
- 스타일을 통해
<h4>를 서브 타이틀처럼 작은 폰트로 표현 가능
해결 방법 2: Flexbox를 활용한 순서 조정
HTML 순서는 유지하고, CSS를 사용해 서브 타이틀을 먼저 보이게 설정
<div class="text-content">
<h3>실내 인테리어</h3>
<span>Timeless Design</span>
<p>공간에 감성을 더하고, 삶에 아름다움을 선사하는 디자인의 새로운 기준</p>
</div>
<style>
.text-content {
display: flex;
flex-direction: column;
}
span {
order: -1; /* 가장 먼저 배치 */
font-size: 1.2em;
font-weight: bold;
text-align: center;
}
p, h3 {
order: 1; /* 나중에 배치 */
}
</style>장점:
- HTML 구조를 변경하지 않고 순서만 조정 가능
- SEO 영향 없이 화면에서만 순서 변경
- 유지보수 용이
결론
- 서브 타이틀이 제목보다 먼저 보여야 할 경우,
<h4>태그를 사용하고 스타일을 조정하는 것이 가장 좋은 방법 <span>을 사용해야 한다면 Flexbox를 활용해 순서를 조정하는 것이 최선- SEO와 접근성을 고려하면
<h4>방식이 더 적절