본문 바로가기
WEB

HTML5 레이아웃 및 시맨틱 태그

by 둥바 2022. 6. 9.
공간 분할 태그

- 태그 자체의 의미나 기능보다는 페이지 공간 분할 단위로 사용

- 같은 공간에 위치한 엘리먼트를 담는 컨테이너 역할

- 하위 태그들을 특정 공간에 그룹화하여 공간 배치 용이하게 만듬

 

<div>와 <span>태그

- 그룹화된 공간을 하나의 단위로 하여 스타일 적용하면 웹 문서 전체의 레이아웃 쉽게 구성 가능

  • div 태그
    • 공간 분할을 위해 가장 많이 사용되는 태그
    • 태그들을 묶어 그룹화하는 컨테이너, 전체 문서 구조화
    • 스타일시트와 결합하면 그룹에 속한 태그들을 모두 같은 스타일로 한번에 적용 가능
  • span 태그
    • 내용 일부를 다른 엘리먼트들과 분리하고자 할 때 사용
    • 내용을 강조하거나 각기 다른 스타일 적용
공간 분할 형식

- 블록 형식과 인라인 형식

- 줄바꿈의 여부가 블록형식과 인라인 형식을 구분하는 기준

- 일반 태그들도 블록 형식과 인라인 형식의 공간 분할 방식을 적용 받는다.

- 형식 태그들을 하나로 묶어서 감쌀 때는 <div> 태그를, 내부에 인라인 형식태그들을 감쌀 때는 <span>태그를 사용.

 

  • 블록형식
    • <div> : 블록형식으로 공간 분할하는 영역 정의, 영역 공간이 매번 줄바꿈이 되어 새로운 행에 생성되는 방식으로 하위에 다른 블록 형식 태그나 인라인 형식의 태그를 포함할 수 있다.
    • 일반태그 : <h1>~<h6>,<p>,<table>,<url>,<ul>,<ol>,<li>,<form>
  • 인라인형식
    • <span> : 인라인 형식으로 공간을 분할하는 영역을 정의, 영역 공간이 입력 내용의 길이만큼만 차지하면서 줄바꿈 없이 같은 줄에 계속 추가되는 방식이다. 반드시 블록 형식 태그의 하위에 포함되어야 하며, 하위에 블록 형식 태그를 포함할 수 없다.(자체적으로 여백,크기 가질 수 없다.)
    • 일반태그 : <span>,<img>,<a>,<input>,<i>,<b>,<strong>,<small>,<sub>,<sup>,<ins>,<del>
    • (단, html5에서는 <a>태그 내부에 블록 태그 포함 가능)
<head> </head> 영역 안에 <style> css영역 존재

<style>영역 안에서 id(중복불가)로 접근할 때는 #으로, class로 접근할 때는 .으로 접근

float를 통해 원하는 방향으로 띄우는 역할
그러나 이후의 영역에 영향을 주므로, 영향을 제거하기 위해서 clear사용

https://developer.mozilla.org/ko/docs/Web/CSS/margin --마진 이해하러 가기

margin:auto; -- <div>가 가운데에서 출력됨 --처리하지 않으면 왼쪽으로 붙어서 나온다.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.div2{
	display:inline;
	float:right;
	border:1px solid red;
}
/*display:inline - 블록을 인라인요소로 바꿔줌
float-clear는 서로 영향받지 않게 */
#footer{
 clear: both;
}
</style>
<!-- 클래스는.으로 접근가능 
아이디는#으로 처리-->
</head>
<body>
<!--요소 간의 공간을 딱 붙어버리게 함 , padding은 안쪽여백 -->
 <div style="margin: 0px; padding: 5px 0px; ">
  <div style="background-color:green; margin:0px; padding: 5px 0px;">
	<h1>Header</h1>  
  </div>
  <div style="background-color:olive; margin:0px; padding: 5px 0px;">
  	<h2>Contents I</h2>
  	<p>
  	<!--lipsum.com : 내용채울 때 활용  -->
  	Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  	Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  	when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  	It has survived not only five centuries, but also the leap into electronic typesetting,
  	remaining essentially unchanged.
  	</p>
  </div>
  <div class="div2" style="background-color:orange; margin: 0px; padding: 5px 0px;">
	<h3>Contents II</h3>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have 
	suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 
	</p>  
  </div>
  <!-- id는 중복될 수 없지만, class는 중복가능 -->
  <div class="div2" style="background-color: orange; margin: 0px; padding: 5px 0px;">
	<h3>Contents III</h3>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have 
	suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 
	</p> 
  </div>
  <div class="div2" style="background-color: orange; margin: 0px; padding: 5px 0px;">
	<h3>Contents IV</h3>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have 
	suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 
	</p> 
  </div>
  <div class="div2" style="background-color: orange; margin: 0px; padding: 5px 0px;">
	<h3>Contents V</h3>
	<p>
	There are many variations of passages of Lorem Ipsum available, but the majority have 
	suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 
	</p> 
  </div>
  <div id="footer" style="background-color:green; margin: 0px; padding: 5px 0px;">
	<h3>Bottom</h3>
  </div>
  
 </div>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

시맨틱 태그

1) HTML5 : 웹 페이지의 구성 방식 변화 포함

- 문서에 정보의 의미도 고려

- <div> 태그를 세분화하여 태그에 의미를 부여해서 페이지를 의미 단위로 분할

  • 시맨틱 태그
    • 태그만으로 문서를 쉽게 이해할 수 있도록 의미 부여한 새로운 태그
    • 어떤 표현이나 행위 지시보다는 웹 문서의 내용이 담고 있는 의미를 명확히 전달하기 위한 목적
    • <header> : 페이지(내용) 상단의 머리말 지정, 페이지의 제목이나 소개 글, 로고 이미지 등 포함,<body>,<section>,<article> 태그 안에서도 여러 번 포함이 가능
    • <nav> : 페이지 이동을 위한 메뉴 영역, 이전이나 다음 페이지, 특정 페이지나 사이트에 대한 연결 등 네비게이션 요소로 구성되어 있으며, <header>,<aside>,<footer>태그 안에 여러 번 포함 가능하다.
    • <aside> : 페이지의 좌,우,측면 공간과 같은 보조 영역을 지칭하며 광고, 즐겨찾기 링크, 관련 이미지 정보 등을 제공한다. <section>,<article>태그 안의 내용과 간접적으로 관련된 내용을 포함한다.
    • <section> : 제목을 갖는 연관된 내용 영역을 지정하는데, 하나의 제목을 중심으로 내용들을 그룹화한다.
    • <article> : 독립적인 개별 내용 영역을 지정한다. 블로그나 댓글,신문,잡지,기사 등을 제공하는데 별도로 배포되거나 재사용 가능한 내용으로 그룹화한다. <section>태그와 <article>태그 사이의 중첩 가능
    • <footer> : 페이지 하단의 꼬리말을 지정한다. 작성자와 작성 날짜, 저작권 등 웹 페이지 관련 추가 정보를 포함한다.
  • 기존의 레이아웃 방식은 모든 레이아웃 영역에 <div>태그를 사용해서 세부적인 구별이 어려웠다. 보완을 위해서 <div>에 id속성값과 class속성값으로 의미를 표현했다.
  • 시맨틱 레이아웃 방식으로 세분화하여 표시하면 보다 문서의 의미를 간결하고 명확하게 표현할 수 있다.

 

'WEB' 카테고리의 다른 글

UI 설계 및 구현  (0) 2022.06.22
XML, JSP 맛보기 및 입력 태그  (0) 2022.06.13
HTML5 기본 태그  (0) 2022.06.08
웹의 개요  (0) 2022.06.07
톰캣 설치 및 웹 개발환경 설정  (0) 2022.06.06

관련글

티스토리툴바