HTML + CSS 주요개념 정리(2) - HTML과 레이아웃

1-1. 웹 사이트 공간을 정의 하는 태그

머리  : <header>

가슴  : <main> or <section>

배     : <footer>

HTML5에는 상단, 중앙, 하단 등 공간을 정의 하는 태그가 있다. 상당에는 header, 중앙에는 main 또는 section, 하단에는 footer 태그를 사용합니다.

   

 

---

 

1-2. 웹 사이트 공간을 정의하는 태그: <header>와 <nav>


<header>태그는 문자 그대로 웹 사이트의 머리글에 해당.  <header> 태그 안에는 <h1> ~ <h6> 태그를 사용하여 회사 이름이나 슬로건을 입력하고, <img> 태그를 사용하여 회사 로고를 삽입 하거나 페이지 전환을 위한 메뉴 버튼을 작성한다.

<nav> 태그는 메뉴 버튼을 담는 공간이다. <nav> 태그 안에는 버튼을 만들 때 사용한 <ul>, <li>, <a> 태그를 입력 할 수 있다.

<header>와<nav> 예제 소스

 

<header>와<nav> 실행 결과

---

1-3. 웹 사이트 공간을 정의하는 태그: <section>, <article>, <aside>

1. <section> 태그는 웹 사이트 영역을 설정할 때 사용. <article> 태그는 웹 사이트 주요 내용을 담기는 공간이고 <article> 태그는 본문 내용과 연관성이 적은 내용이 담기는 공간이다.

<section> 태그는 책으로 치면 각 장의 내용을 담는 영역이다.

<section>_예제

<section>_실행 결과

2. <article> 태그는 신문 기사의 본문 영역처럼 웹 사이트의 실제 내용을 담는 공간입니다. 기사 내용을 다른 곳에서도 인용할 수 있는 것처럼 <article> 태그 안에 있는 내용은 다른 곳에서 재사용할 수 있습니다.  웹 사이트 본문이나 블로그 포스트 등이 해당한다.
3. <section> 태그와 <article>태그 안에는 <h2> ~ <h6> 태그 중 하나는 꼭 있어야 한다

 

1-4. 웹 사이트 공간을 정의하는 태그: <main>

<main> 태그는 웹 사이트의 본문 내용 전체를 감쌀 때 사용합니다. 따라서 HTML 문서 한개당 한 번만 사용 가능.

 

1-5. 웹 사이트 공간을 정의하는 태그: <footer>

<footer> 태그는 웹 사이트 하단에 들어가는 정보를 담는 공간입니다. 

<header>, /<section>, <article>, <aside>/, <footer> 태그 예제

<header>, /<section>, <article>, <aside>/, <footer> 태그 실행 결과

1-6. 웹 사이트 공간을 정의하는 태그: <div>

작은 구역을 만들 때 사용 하는 태그

2-1. HTML의 두 가지 혈액형: Block요소와 lnline 요소

	태그 종류	줄 바꿈 유무
Block 요소	<h1>~<h6>, <p>, <header>, <main>, <aside>, <footer>, <div>	o
inline 요소	<span>, <a>, <input>	x

---

후기

 

HTML의 기초 부분의 복습이 완료 된거 같다.

다음에는 HTML을 꾸며주는 CSS부분을 복습해보고자 한다.