Semantic을 검색 하면
쨋든간에,
html의 각 태그는 의미를 가지고 있다.
- 이것은 제목이에요. h1~ h6
- 이것은 문단이에요. p
- 이것은 목록이에요. ul/ol
- 이것은 목록에 각 리스트에요. li
- 이것은 이미지에요. 무엇에 대한 이미지이고 안에 내용은 이래요. img
- 이것은 의미가 없는 태그에요. div
결국 시멘틱 마크업은?
컨텐츠를 적절한 tag로 마크업 하는 것이다.
제목에 해당하는 컨텐츠에는 제목에 해당하는 태그으로
목록에 해당하는 컨텐츠에는 목록에 해당하는 태그로
알맞게 작성하는 것. 그게 전부다.
이 컨텐츠는 제목(해딩요소)구나
> h1~h6 태그를 사용하여 마크업
이 컨텐츠는 문단이구나
> p태그를 사용하여 마크업
의미가 없는것이 의미인 태그는?
의미가 없는 것이 의미인 태그는 css스타일링을 위해서 있는 것이다. 필요한 경우에만 감싸서 쓰도록 하자
- div (the content division element): 순수한 블록레벨 컨테이너를 위해서 존재, 쉬운말로 css 꾸밈을 위해서 하나더 감싸거나 할 때 사용한다고 보면 될것 같다. 다만, 불필요한 div태그는 지양해야함.
- span : 인라인요소, 나머지는 div와 같음.
시멘틱 마크업의 예시
div의 시멘틱적 의미는 의미가 없는 것이 의미인 태그이기 때문이다.
어떤 목록 리스트가 있고, 각 한개의 목록마다 제목 사진 내용이 들어간다면 다음과 같을 것이다.
댓글