[HTML] HTML로 웹페이지 구조 잡기 / <header>,<nav>,<main>,<article>,<main>,<footer>,<div>

[HTML] HTML로 웹페이지 구조 잡기 / <header>,<nav>,<main>,<article>,<main>,<footer>,<div>

 

 

 

 

<header>, <nav>

 

1.<header>

웹 사이트의 머리글을 담는 상단 영역의 공간이다.

티스토리의 header

 

2.<nav>

<header></header> 사이에 들어간다.

navigation의 줄임말로 메뉴 버튼을 담는 공간이다.

<ul>,<li>,<a>와 함께 사용한다.

 

<header>
	<img src="tistory_logo.png" alt = "티스토리 로고">
	<nav>
    	<ul>
            <li>피드</li>
            <li>스토리</li>
            <li>스킨</li>
            <li>포럼</li>
        </ul>
    </nav>
</header>

 

티스토리의 header을 작성한 코드이다.

 

 

 

 

<main>,<article>

 

 

1. <main>

 

가장 중요한 부분이다. 책으로 말하자면 본문 내용이 들어갈 부분이다.

 

 

2. <article>

 

본문 정보를 담고있는 article이라고 한다.

위 사진 처럼 본문 안 내용 하나하나가 article속에 들어가 있다고 보면 된다.

 

<main role = "main">
	<article>
    	<h#>...</#h>
    </article>
</main>

 

<main></main>사이에 <article></article>을 넣어주면 된다.

<article></article> 사이에는 태그 안에 구역을 대표하는 타이틀 <h#>태그가 존재해야한다.

Internet explorer는 지원하지 않기 때문에 main 속성에 role = "main"을 꼭 입력해주어야한다.

 

 

 

<footer>,<div>

 

 

1.<footer>

HTML의 좋은 특징 중 하나는, 이름이 명확하다는 것이다.

footer는 명사로 꼬리말이라는 뜻이다. 말 그대로 사이트의 가장 아래에 정보를 나타내주는 부분이다.

 

 

2.<div>

내용이 들어갈 박스를 만든다고 생각하면된다.

크기를 조정해서 그리드를 만들고 여백을 넣어줄 수 있다.

위 사진의 경우 크게 4개의 박스가 존재할 것으로 예상할 수 있다.

 

 

 

---

웹디자인하면서 사용했던 용어와 비슷비슷해서

비교적 익히기 수월했다.

 

사실 HTML 자체로는 더 이상 포스팅 할 것이 없는 것같다..

CSS나 JS등과 만나야 큰 효력을 발휘하는 것같다!