[HTML] Tag & Display 속성

Hannahhh·2022년 6월 29일
0

HTML5

목록 보기
5/9

✔ 자주 쓰이는 태그


Tag설명특징Display 속성
divDivison한 줄을 차지한다block
p문단하나의 문단을 표현block
ol & ul & liList & List itemol : ordered, ul : unorderedblock
spanSpan컨텐츠 크기만큼 공간을 차지한다, 텍스트의 특정 부분을 묶음inline
img Imagesrc속성, 닫는 태그가 없다inline
aLinkhref속성, 새 창에 열때 target="_blank"사용inline
inputInput(Text, Radio, Checkbox)type속성으로 input 타입 결정, radio 사용 시, name 속성 이용해서 그룹핑 해줘야함
textareaMulti-line Text input줄바꿈이되는 입력폼
buttonButtontype속성



✔ Display 속성

블록(block) : 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

인라인(inline) : 새로운 라인(line)에서 시작하지 않으며, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.


✔ p 태그 와 div 태그의 차이

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>



✔ div와 section의 차이

section 태그는 html5 시맨틱 요소 중 하나로, 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다. 그러나, div 태그는 시맨틱 요소가 아니며, html5 이전에서 section의 역할을 했지만, 현재는 사용이 지양된다.




Reference: 코드스테이츠

0개의 댓글