구조 관련 요소

구조 관련 요소

<header>,<section>,<footer>,<nav>,<article>,<aside>

요소 유형	태그명	태그의 의미 및 특징
블록 레벨 요소	<header></header>	1. HTML 문서의 헤더 영역을 의미하는 태그로 제목이나 내비게이션, 검색 등의 내용들을 포함할 수 없습니다.
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>,<footer> 태그는 포함할 수 없습니다.
	<section></section>	1. HTML 문서에서 맥락이 같은 요소ㅡㄹ을 주제별로 그룹화 해주는 태그이며 섹션 주제에 대한 제목요소 <h2>~<h6>를 포함하는 것이 좋습니다.
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.
	<footer></footer>	1.HTML 문서의 푸터 영역을 의미하는 태그로 섹션 작성자나 저작권에 대한 정보, 관련된 문서의 링크를 포함할 수 없습니다.
		2. 텍스트, 인사인 요소, 블록 레벨 요소를 포함할 수 있지만 <header>,<footer>태그는 포함할 수 없습니다.
	<nav></nav>	1. HTML 문서의 메인 메뉴나 목차등을 정의해 주는 태그입니다.
		2. 텍스트, 인라인 요소,, 블록 레벨 요소를 포함할 수 있습니다.
	<article></article>	1.HTML 문서에서 독릭적으로 배포 또는 재사용이 가능한 게시물, 뉴스 기사, 블로그 포스팅 등을 의미하는 태그이며 제목요소(<h2>,<h6>)를 포함하는 것이 좋습니다.
		2. 텍스트, 인라인 요소,, 블록 레벨 요소를 포함할 수 있습니다.
	<aside></aside>	1. 메인 콘텐츠와 직접적으로 관련이 없는 영역을 의미하는 태그이며 HTML문서의 오른쪽이나 왼쪽의 사이드 메뉴나 광고 등의 영역으로 사용됩니다.
		2. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다.

관련요소를 사용하여 레이아웃을 만들어 보았습니다.

관련요소를 사용하여 레이아웃을 제작해 보았습니다. 구조관련요소들을 최대한 활용하였고 기본적으로 <header>,<contents>,<footer> 로 전체적인 틀을 잡고 작업하였습니다. (원하는 곳으로 배치하기 너무 어려운 것 같습니다.) flex를 많이 사용하였는데 구조에 대해 다시 생각해보는 시간이였습니다. 초반에 구조를 탄탄하게 구성하지 않아서 계속 추가하느라 css태그 우선순위를 정하기 어려웠고 그 결과 나중에 flex태그를 사용하여도 우선순위가 밀려서 제대로 동작하지 않았습니다. 다음부터는 초반부터 클래스를 정확하게 지정하여 작업하도록 해야겠습니다.

원본 소스 보기