공부한다/HTML
-
html heading outline - part2공부한다/HTML 2021. 5. 8. 16:28
part1에서 헤딩 태그에 대해서 알아보았다. 오늘은 1.영역별 타이틀 지정, 2.조금 더 의미있는 영역 구분과 타이틀 지정에 대해 알아보려고 한다. 1. 그럼 영역별 타이틀은 어떻게 지정하지? 방법은 아주 간단하다. 영역을 감싸는 최상위 태그 안에서 헤딩태그를 써주면 된다. 아래 이미지를 보면 h1태그로 첫번째 div 영역의 타이틀을 지정해주고, 두번째 div 영역에 h2태그로 타이틀을 지정해주었다. 문서의 아웃라인은 이렇게! 위의 예시는 헤딩 태그의 순서에 따라 지정이 되는건지 아니면 태그의 포함관계에 의한 타이틀 지정인지가 살짝 헷갈릴 수 있겠다. 그래서 딱히 그럴 일은 없겠지만 같은 h1태그로 각 영역의 타이틀을 지정해서 아웃라인을 확인하는 테스트를 해보았다. div를 사용하였을때에는 헤딩태그의 ..
-
html heading outline - part1공부한다/HTML 2021. 4. 25. 22:48
html 문서의 heading outline은 웹접근성과 웹표준과 관계가 있다. heading outline을 따라가면 사이트의 구조가 어떻게 짜였는지 확인할 수 있다. 책으로 치면 문서 목차와 같은 역할을 하기도 하고, 제목과 부제목 등을 관련있는 컨텐츠끼리 묶는 역할을 한다고 보면 된다. 새로운 섹션을 지정할때 div로 구조를 나눌 수도 있지만, html 문서 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시한다. 크롬 확장프로그램에서 html5 outliner을 추가하여 사용하면 웹사이트의 문서적 흐름과 구조에 대하여 편하게 확인할 수 있다. h1에서 h6까지 사용하여 문서의 제목을 지정해보았다. html5 outliner를 사용하여 문서 흐름을 확인해보면 아래와 같이 문서의 흐름을 보여준다..