블록 요소와 인라인 요소
블록요소
하나의 태그가 브라우저에서 좌우공간을 다 차지하면서 독립적인 덩어리 공간을 가지는 요소. 즉 브라우저의 너비가 바뀌어도 문장이나 단어의 위치가 변하지 않음.
<div>,<table>,<h1>~<h6>,<p>,<pre>등
인라인요소
하나의 태그가 브라우저에서 실제로 코딩된 그 영역만 차지하여 좌우로 다른 태그가 나란히 위치할 수 있는 요소. 브라우저의 너비가 바뀜에 따라 문장과 단어의 배열이 달라짐.
<a>,<br>,<b>,<i>,<em>,<strong>등
블럭요소 vs 인라인요소
- 블록요소는 내부에 블럭요소와 인라인요소를 포함할 수 있고 인라인요소는 내부에 블록요소를 포함할 수 없다
- 블록요소들 중에서도 인라인요소만 포함할 수 있는 것들이 있다 :
<h1>~<h6>,<p> - 인라인요소를 css로 블럭화하여 내부에 블럭요소를 포함시킬 수도 있는데, 브라우저에 보여지는데는 아무런 문제가 없지만 유효성에 어긋난다
text 관련 태그들
인라인 요소 중 강조를 위해 사용되는 태그
<b>,<i>: 중요성 보다는 텍스트 자체에 주의를 끌게 사용됨.<strong>,<em>: 해당 콘텐츠의 중요성을 나타내며 실제로 강조함.
용어를 정의해주는 태그
-
<abbr>: WC3, HTML 등 단어의 축약형이나 머리글자로 되어있는 단어들을 정의할때 사용. 사용자가 검색어의 일부만 쳐도 문서를 찾기 쉽게 함. -
<dfn>: 문서에 처음 등장하는 용어를 정의해줄 때 사용. 이때 부모 요소에는 해당 용어의 대한 설명이나 정의가 반드시 필요하다. -
<a>: 하나의 페이지에서 다른 페이지를 연결할 때 사용하는 하이퍼링크(hyperlink)를 정의할 때 사용. html5에서는 하이퍼링크로만 사용함.
<pre>: 미리 정해진 글꼴로 텍스트에 사용된 여백과 줄바꿈이 그대로 브라우저 화면에 나타남.
추가적인 글꼴을 변경해주는 태그
입력
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>텍스트 태그</title> </head> <body> <p><abbr title="International Olympic Committee">IOC</abbr> (국제 올림픽 위원회)는 스위스 로잔에 본부를 둔 국제 스포츠 기구이다. </p> <p> <a href="https://www.naver.com/">naver</a> <a href="https://www.daum.net/">daum</a> </p> <p>Lorem ipsum dolor sit amet <b>bbb</b></p> <p>Lorem ipsum dolor sit amet <i>bbb</i></p> <p>Lorem ipsum dolor sit amet <strong>bbb</strong></p> <p>Lorem ipsum dolor sit amet <em>bbb</em></p> <p>Lorem ipsum dolor sit amet <small>bbb</small></p> <p>Lorem ipsum dolor sit amet <sup>bbb</sup></p> <p>Lorem ipsum dolor sit amet <ins>bbb</ins></p> <p>Lorem ipsum dolor sit amet <del>bbb</del></p> <p> <!--줄바꿈과 공백은 밑의 문단과 같다--> Lorem ipsum dolor sit, amet con sectetur adipisicing elit. Maiores, officiis, cumque animi delectus soluta numquam consequuntur officia illo, imped it corrupti voluptates nulla aut dignissimos odit quo hic at natus? Iste! </p> <pre> Lorem ipsum dolor sit, amet con sectetur adipisicing elit. Maiores, officiis, cumque animi delectus soluta numquam consequuntur officia illo, imped it corrupti voluptates nulla aut dignissimos odit quo hic at natus? Iste! </pre> </body> </html>
출력
div 태그와 sectioning
<div>: HTML 문서에서 특정 영역이나 구획을 지정할 때 사용함.
여러 html요소들을 묶어서 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너로 자주 사용됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>div 그룹화</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>LOGO</h1>
<h2>menu</h2>
</div>
<div id="content">
<div><h2>Sub menu</h2></div>
<div><h2>Main content</h2></div>
</div>
<div id="footer">
<h2>footer</h2>
</div>
</div>
</body>
</html>id : 특정 '유일' 요소에만 style을 적용할 수 있게 하는 선택자.
유사하게 쓰이는 것으로 복수의 요소에 특정 style을 적용할 수 있게 해주는 class 선택자가 있음.
시맨틱 태그(Sementic Tag)
- html5에 처음 등장한 의미를 부여한 태그. 웹 문서 레이아웃을 만들 때 시맨틱 태그를 사용하지 않고
<div>태그를 활용하는것 만으로도 웹 문서를 똑같이 만들 수 있다. 하지만 시맨틱 태그를 쓰는 이유가 있는데
-
HTML문서의 가독성과 유지보수가 쉬워진다.
<div>태그만을 활용한 문서가 있다고 가정했을 때 코드가 길어질수록 한눈에 알아보기가 힘든데, 시맨틱 태그 사용시 유지보수를 할 때나 다른 작업자가 보기 편하다 -
웹 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer), 사이드(aside) 어느 영역인지 쉽게 알 수 있다.
-
검색엔진이 검색을 수행할 때 HTML내의 태그를 분석할수 있다.
예를 들자면 검색엔진의 검색로봇에서는
<article>태그가 사용된 콘텐츠를 재배포할 수 있는 콘텐츠로 인식하고, 반대로<section>태그로 묶은 콘텐츠는 재배포를 금지하는 콘텐츠로 인식한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>시멘틱 태그</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>LOGO</h1>
<h2>menu</h2>
</header>
<main>
<aside><h2>Sub menu</h2></aside>
<section>
<h2>Main content</h2>
<article>
<h3>article title</h3>
<p>article contents</p>
</article>
<article>
<h3>article title</h3>
<p>article contents</p>
</article>
<article>
<h3>article title</h3>
<p>article contents</p>
</article>
</section>
</main>
<footer>
<h2>footer</h2>
</footer>
</div>
</body>
</html>시맨틱 태그의 종류
출처 :
https://sdsupport.cafe24.com/reference/html/block-inline.html
https://coding-factory.tistory.com/883
