HTML, CSS 기초 : HTML과 레이아웃

웹사이트의 공간

상단 : <header>

중앙 : <main>, <section>

하단 : <footer>

작은 구역 : <div>

 

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

• <header> 태그 : 웹 사이트의 머리글.  로고, 메뉴, 회원가입, 검색창 등을 표시할 때 사용. <header>태그 안에는  <h1>~<h6> 태그를 이용하여 회사 이름이나 슬로건을 작성.

<header> 태그

 

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

<nav> 태그

 

• <section> 태그 : 웹 사이트 영역을 설정할 때 사용. (ex)책에서의 각 챕터의 내용을 담은 영역). <section> 태그 안에는 반드시 <h2>~<h6>태그 중 하나는 있어야 한다.

<section> 태그

 

• <main> 태그 : 웹 사이트의 본문 내용 전체를 감쌀 때 사용. 따라서 HTML 문서 한 개당 한 번만 사용 가능. 홈페이지의 주요 컨트롤러(상품소개, 최근 best상품 등)를 입력함.

<main> 태그

 

• <footer> 태그 : 웹 사이트 하단에 들어가는 정보를 담는 공간. 사업자등록번호, 주소, 연락처, 이메일 주소, 저작권 표시 등을 작성.

<footer> 태그

 

• <div> 태그 : 작은 구역. 내용을 그룹화 시켜줄 때, 이미지나 텍스트 등을 묶을 때 사용하는 태그. <section>태그가 큰 그룹이라면 <div> 태그는 작은 그룹이라고 할 수 있다.

HTML의 두가지 요소
(구분 : 줄 바꿈 현상 유무 / width와 height 속성 적용 유무 / margin과 padding 속성 적용 유무)

• Block 요소 
  -줄바꿈 o : <h1>~<h6>, <p>, <header>, <section>, <main>, <footer>, <div>, <ul>, <li>
  ex) <li>태그는 줄 바꿈 현상이 일어나는데, 만약 x축 방향으로 정렬된 메뉴로 만들고 싶다면 <li>태그의 성격을 Inline요소로 바꿔야 한다. 이때 display: inline; 속성을 사용하면 변경이 가능하다.
  
  -width, height 속성 적용 o
  
  -margin, padding 속성 적용 o
  
  
• Inline 요소
  -줄바꿈 x : <span>, <a>, <input>
  
  -width, height 속성 적용 x
  ex) 적용하려면 display : block;을 추가하여 Block요소로 바꾸어 준다.
  
  -margin, padding 속성 적용 x 
  
  
• display: inline-block; : Block요소와 Inline 요소를 결합
  ex)줄바꿈 현상은 일어나지 않지만 width, height값은 적용하고 싶을 때