Tag | 설명 | 특징 | Display 속성 |
---|---|---|---|
div | Divison | 한 줄을 차지한다 | block |
p | 문단 | 하나의 문단을 표현 | block |
ol & ul & li | List & List item | ol : ordered, ul : unordered | block |
span | Span | 컨텐츠 크기만큼 공간을 차지한다, 텍스트의 특정 부분을 묶음 | inline |
img | Image | src속성, 닫는 태그가 없다 | inline |
a | Link | href속성, 새 창에 열때 target="_blank"사용 | inline |
input | Input(Text, Radio, Checkbox) | type속성으로 input 타입 결정, radio 사용 시, name 속성 이용해서 그룹핑 해줘야함 | |
textarea | Multi-line Text input | 줄바꿈이되는 입력폼 | |
button | Button | type속성 |
블록(block) : 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.
인라인(inline) : 새로운 라인(line)에서 시작하지 않으며, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.
p태그는 하나의 문단을 표현하는 용도로 사용되기때문에 다음 문단과의 구분을 위해 한 줄을 무조건 비움으로서 단락이 나누어진다.
div태그는 단지 영역을 구분하는 것으로, p태그들이나 단락을 그룹핑하여 영역을 지정하는 것이 가능하다.
<!--p와 div의 차이-->
<body>
<p style="background:#81dfd7">1- p 사용 시, 문장 사이가 구분되어 채색된다.</p>
<p style="background:#f8bcfd">2- p 사용 시, 문장 사이가 구분되어 채색된다.</p>
<div style="background:rgb(173, 186, 245); width:300; height:120; padding:10px">
<p> 1- div 사용 시, 문장 사이까지 채색된다. div태그 안에 p태그 사용</p>
<p> 2- div 사용 시, 문장 사이까지 채색된다. div태그 안에 p태그 사용</p>
</div>
</body>
section 태그는 html5 시맨틱 요소 중 하나로, 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다. 그러나, div 태그는 시맨틱 요소가 아니며, html5 이전에서 section의 역할을 했지만, 현재는 사용이 지양된다.
Reference: 코드스테이츠