의미없이 요소를 묶기 위한 태그 -> Container
문단도 블록 요소이다.
<div>? 콘텐츠 분할(division) 요소(The Content Divison Element)
무언가를 잡아 두는 또는 요소를 그룹화하는 제네릭 컨테이너이다.
전체 블록을 차지하고 위아래의 콘텐츠를 밀어낸다.
(CSS에서는 div로 콘텐츠를 그룹화 가능하다.)
block -level
block -level은 기본적으로 한 줄을 생성해서 내용을 표현한다.
<span>? 텍스트나 콘텐츠를 span으로 감싸면 하나의 그룹으로 묶어 css로 스타일을 정한다.
제너릭 컨테이너
inline-level (주로 block-level 안에 들어간다.)
<span>은 <div>와 비슷하지만 인라인이기 때문에 전체 블록을 차지하지 않는다.
무언가를 그룹화하기 위해 다른 스타일을 적용하는 방법
<p>는 블록 레벨 태그이고 그 안에서 텍스트를 꾸며주는 <b>, <i>, <u>, <s>는 모두 인라인 레벨 태그이다.
<div>
<span>Lorem</span> ipsum dolor sit.
</div>리스트를 표현하는 태그 <ul>, <ol>, <dl>
리스트는 일련된 항목들이 나열되는 것이다.
<ul>: unordered list로 순서가 없는 리스트
나열된 항목들이 순서와 상관없을때 쓰이는 리스트이다.
콩나물국 레시피
<ul>
<li>콩나물</li>
<li>파</li>
<li>국 간장</li>
</ul><ol>: ordered list로 순서가 있는 리스트
나열된 항목들이 순서와 관련있을 때 사용된다.
순서가 있는 리스트여서 숫자로 표시된다.
콩나물국 레시피
<ol>
<li>냄비에 국물용 멸치를 넣고 한 소금 끓여 멸치 육수를 만든다.</li>
<li>콩나물을 놓고 뚜껑을 덮어 콩나물이 익을 때까지 끓인다.</li>
<li>뚜껑을 열고 대파, 마늘, 고춧가루를 넣고 끓인다.</li>
</ol>
<dl>은 앞서 배운 <ul>, <ol>과는 구조가 조금 다르다
<ul>, <ol>은 항목을 단순히 나열하는 구조지만, <dl>은 용어와 설명이 하나의 세트로 항목을 이루고 하나 이상의 항목으로 리스트가 이루어지는 구조이다.
<dl>: desctiption list로 용어를 설명하는 리스트이다.
<dt>: definition term로 용어를 구분한다. 용어를 나타내는 태그이다.
<dd>: definition desctiption로 용어의 정의를 나타낸다. 용어에 대한 정의 또는 설명을 나타내는 태그이다.
용어 하나에 여러 정의가 들어갈때, <dd>를 한개 이상 쓰는 것이 가능하다.\
<dl>
<dt>리플리 증후군</dt>
<dd>허구의 세계를 진실이라 믿고 거짓된 말과 행동을 상습적으로 반복하는 반사회적 성격장애를 뜻하는 용어</dd>
<dt>피그말리온 효과</dt>
<dd>타인의 기대나 관심으로 인하여 능률이 오르거나 결과가 좋아지는 현상</dd>
<dt>언더독 효과</dt>
<dd>사람들이 약자라고 믿는 주체를 응원하게 되는 현상</dd>
</dl><hr>? horizontal rule, 닫는 태그가 없다.
수평 가로줄
문단 사이의 공백을 표시하거나 문단 레벨 요소들 사이의 고백을 의미
밑에 있는 구분선 같은 느낌
<br>? 줄바꿈 태그
<sup>? 윗 첨자 태그