웹사이트의 구성과 구조

Header

<header>
		
		<h1>
			<a href="#">
				<img>
			</a>
		</h1>

		<nav>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
			</ul>
		</nav>

	</header>
</body>

보통 헤더를 작성할 때는 네이버나 다음처럼 h1 쓰고 이미지도 넣어준다.

그다음엔 상단의 네비 태그를 이용해서 내비게이션 메뉴를 만들어준다.

Main

• main 태그 사용시 익스플로러에서는 이 태그를 인식하지 못하기 때문에 role="main"이라고 코딩함으로써 이 태그의 역할이 main이다라는 것을 알려줘야 한다.

Section

• 웹 페이지 내에서 Service, Portfolio 이런 식으로 영역을 구분해 놓을 때 section을 쓰고 페이지에서 타이틀(Service)을 볼 수 있듯이 이러한 타이틀은 h2 태그를 사용해서 만들어준다.

	<main role="main">
		<section>
			<h2>Service</h2>
		</section>

		<section>
			<h2>Portfolio</h2>
		</section>

		<article></article>
	</main>
</body>

article

실제 정보가 들어가는 공간 자체

aside

본문 정보와 관계성이 떨어지는 내용을 넣는 곳

main 바깥쪽에 작성한다.

footer

사이트 가장 하단에 입력하는 정보를 작성

div

설계 도면에 표기하기엔 애매한 임의의 작은 공간을 만들 때 쓴다.

아마 우리가 가장 많이 쓸 태그 같다.

동일한 성격을 가진 태그들을 한데 묶어주는 역할을 한다.

---

Inline과 Block의 차이점

• Inline 요소는 공간을 만들지 못하는 반면 Block은 공간을 만들 수 있다.

<style>
		tr, td, th {
			border: solid 1px #000000;
		}

		span {
			width: 300px;
			height: 300px;
			background-color: yellow;

			margin-top: 100px;
		}

		h1 {
			width: 300px;
			height: 300px;
			background-color: yellow;
		}
	</style>
</head>

먼저 디자인 코드를 써주고 차이점을 보자.

• Block 요소는 상하 배치가 가능하다. inline은 상하 배치 작업이 불가하다.
• inline은 x축으로 확장, block은 y축으로 줄 바꿈 현상이 일어난다.

<!-- Inline(한줄로 출력) / Block(줄바꿈) 차이점 -->
	<span>Inline</span>
	<span>Inline</span>
	<span>Inline</span>

	<h1>Block</h1>
	<h1>Block</h1>
	<h1>Block</h1>

</body>

Incline은 옆쪽으로 확장되는 반면 Block은 아래쪽으로 확장된다.