컴퓨터 프로그래밍/HTML
div, span and sementic tag
깝돌이
2020. 5. 19. 19:05
div와 span은 html 에서 영역을 지정할 때 사용하는 대표적인 태그
거의 똑같습니다. 아래의 내용만 다릅니다.
div : 줄바꿈이 일어난다. : blocking tag ------h로 시작하는 것은 다 줄바꿈 됨.(h1....hn), p, img
span: 줄바꿈이 안일어 난다. : inline tag ----- a
div tag로 영역을 지정하는 코드를 짜봅니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div tag:: 영역을 지정하는 태그</title>
</head>
<body>
<div id = "header">
<h1>html5 Header</h1>
</div>
<div id = "menu">
<ul>
<li><a href = "#">Menu -1</a></li>
<li><a href = "#">Menu -2</a></li>
<li><a href = "#">Menu -3</a></li>
</ul>
</div>
<div id = "article">
<div id = "section1">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet urna vitae lacus dignissim lacinia. Nunc in lacus at mauris aliquam tempus sed vitae risus. Aliquam erat volutpat. Donec nulla ex, auctor vitae lorem eu, eleifend luctus turpis. Proin eu ultrices dolor. Duis vitae dignissim lorem. Aliquam euismod sem est, quis dignissim mauris lacinia molestie. Maecenas elementum, quam in blandit dictum, arcu leo efficitur elit, at rutrum arcu neque eu erat. Mauris dapibus posuere quam, non consequat leo sodales sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div id = "section2">
<h1>Nam sed massa suscipit erat finibus ultricies pellentesque ac odio.</h1>
<p>Integer vulputate hendrerit nunc, a pharetra sapien blandit nec. Fusce tempor libero eros, vitae laoreet sapien dapibus quis. Proin eu consectetur nisl. Nullam ac aliquet mi. Vestibulum iaculis sed magna ac ultrices. Vivamus iaculis vestibulum leo, sit amet luctus arcu eleifend at. In porta vehicula dolor. Aenean id imperdiet erat. Nulla eleifend risus vel eros tempus facilisis. In hendrerit fringilla elementum. Fusce porttitor congue efficitur. Vestibulum bibendum purus sit amet luctus tempus. Praesent blandit non dui eget scelerisque. Duis et justo sit amet augue hendrerit consequat. Ut sem risus, ornare id mollis ac, lacinia quis nibh. Ut consectetur suscipit est, rutrum semper felis interdum quis.</p>
</div>
<div id = "section3">
<h1>Maecenas dapibus tortor et convallis interdum.</h1>
<p>Etiam eu libero eleifend, porttitor sapien non, suscipit nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vulputate dui ac mollis ornare. Maecenas rhoncus risus ac dui cursus facilisis. Ut non est vitae magna scelerisque lacinia. Vestibulum malesuada quam id lacus convallis blandit. In cursus arcu sit amet justo commodo, at venenatis ligula blandit. Nunc condimentum hendrerit venenatis. Fusce vulputate vitae augue eget euismod. Quisque lacinia at enim ac dapibus. Suspendisse non quam eget orci tincidunt pharetra. Quisque vitae nunc gravida enim tempus tincidunt vitae sit amet urna. Mauris fringilla dolor ex, et fermentum turpis rutrum non. Nunc gravida a nunc non suscipit.</p>
</div>
</div>
<div id = "footer">
<span>서울 특별시 강서구 내발산동 789-63</span>
</div>
</body>
</html>
각각의 div에 id = ""를 지정해서 각각 다른 스타일 및 동작을 넣어 줄 수 있습니다.
성격에 맞게 id를 지정해 줍니다. HTML5에서는 div와 span 이외에도 성격에 맞게 영역을 지정해 줄 수 있는 tag가 생겼습니다.
바로, sementic tag입니다.
sementic tag를 이용하는 것이 div를 이용해서 각각 id를 지정하는 것보다 성능 및 여러가지 면에서 장점이 많습니다.
html5의 가장 큰 변화는 sementic tag의 도입입니다.
이때문에 일반적으로 html5의 웹페이지를 시멘틱 웹페이지라고 합니다.
(시멘틱은 '의미론적'이라는 영어 단어)
header : 헤더를 의미
nav: 네비게이션
aside: 사이드에 위치하는 공간을 의미
section: 여러중신 내용을 감싸는 공간을 의미
article: 글자가 많이 들어가는 기사같은 공간 부분을 의미
footer: 바닥글 공간
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>sementic tag</title>
</head>
<body>
<header>
<h1>html5 Header</h1>
</header>
<nav>
<ul>
<li><a href = "#">Menu -1</a></li>
<li><a href = "#">Menu -2</a></li>
<li><a href = "#">Menu -3</a></li>
</ul>
<nav>
<section>
<article>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet urna vitae lacus dignissim lacinia. Nunc in lacus at mauris aliquam tempus sed vitae risus. Aliquam erat volutpat. Donec nulla ex, auctor vitae lorem eu, eleifend luctus turpis. Proin eu ultrices dolor. Duis vitae dignissim lorem. Aliquam euismod sem est, quis dignissim mauris lacinia molestie. Maecenas elementum, quam in blandit dictum, arcu leo efficitur elit, at rutrum arcu neque eu erat. Mauris dapibus posuere quam, non consequat leo sodales sit amet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</article>
<article>
<h1>Nam sed massa suscipit erat finibus ultricies pellentesque ac odio.</h1>
<p>Integer vulputate hendrerit nunc, a pharetra sapien blandit nec. Fusce tempor libero eros, vitae laoreet sapien dapibus quis. Proin eu consectetur nisl. Nullam ac aliquet mi. Vestibulum iaculis sed magna ac ultrices. Vivamus iaculis vestibulum leo, sit amet luctus arcu eleifend at. In porta vehicula dolor. Aenean id imperdiet erat. Nulla eleifend risus vel eros tempus facilisis. In hendrerit fringilla elementum. Fusce porttitor congue efficitur. Vestibulum bibendum purus sit amet luctus tempus. Praesent blandit non dui eget scelerisque. Duis et justo sit amet augue hendrerit consequat. Ut sem risus, ornare id mollis ac, lacinia quis nibh. Ut consectetur suscipit est, rutrum semper felis interdum quis.</p>
</article>
<article>
<h1>Maecenas dapibus tortor et convallis interdum.</h1>
<p>Etiam eu libero eleifend, porttitor sapien non, suscipit nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum vulputate dui ac mollis ornare. Maecenas rhoncus risus ac dui cursus facilisis. Ut non est vitae magna scelerisque lacinia. Vestibulum malesuada quam id lacus convallis blandit. In cursus arcu sit amet justo commodo, at venenatis ligula blandit. Nunc condimentum hendrerit venenatis. Fusce vulputate vitae augue eget euismod. Quisque lacinia at enim ac dapibus. Suspendisse non quam eget orci tincidunt pharetra. Quisque vitae nunc gravida enim tempus tincidunt vitae sit amet urna. Mauris fringilla dolor ex, et fermentum turpis rutrum non. Nunc gravida a nunc non suscipit.</p>
</article>
<section>
<footer>
<span>서울 특별시 강서구 내발산동 789-63</span>
</footer>
</body>
</html>