Q.<p>와 <span>의 차이

<p></p> 태그는 paragraph, 즉 문단의 약자로, 하나의 문단을 만들 때 쓰인다.

 

<P>는 블록요소(block element),<span>은 인라인 요소(inline element)이다.

<div>div 태그</div>
<p>p 태그</p>
<span>span 태그</span>

위 코드를 실행 했을 때

출처 https://dasima.xyz/div-vs-span-vs-p-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%ED%8F%AC%ED%95%A8-%EC%9C%A0%EB%AC%B4/

다음과 같은 결과가 나온다.

블럭요소는 브라우저의 양 끝을 모두 차지하는 반면, 인라인 요소는 태그 안에 적인 문자 정보의 길이만큼만 영역을 차지한다.

 

HTML의 태그는 블럭요소와 인라인요소로 나누어지는데 이 부분을 명확히 이해해야 한다.

 

블록요소

- 모든 인라인 요소를 포함할 수 있고 다른 블록 요소도 일부 포함 가능

- 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태(기본 너비값은 100%)

- 크기값을 가질 수 있다(width, height, margin, padding 등을 사용하여 가로너비&세로길이 지정이 가능하다)

- 블럭 요소 다음에는 줄바꿈이 이루어진다.

display:inline CSS명령어로 블록 요소를 인라인 요소의 속성으로 변경 할 수 있다.

div {display:inline}

HTML5의 블록요소 종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

 

 

인라인 요소

- 항상 블록 요소 안에 포함되어 있으며 인라인 요소 안에 다른 인라인 요소가 포함될 수 있다.

- 컨텐츠 너비민큼의 영역을 사용한다.

- width, height로 변형을 줄 수 없고 line_height로 줄의 높낮이를, text-aling으로 텍스느의 중앙, 좌, 우측 정렬을 할 수 있다.

- 인라인 요소 다음에는 줄바꿈이 없고 우측으로 바로 이어서 표시가 된다.

display:block CSS명령어로 인라인 요소를 블록 요소의 속성으로 변경 할 수 있다.

div {display:block}

HTML5의 인라인 요소 종류

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

 

 

 

 

참고 https://dasima.xyz/div-vs-span-vs-p-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%B8%94%EB%A1%9D-%EC%9A%94%EC%86%8C%EC%99%80-%ED%8F%AC%ED%95%A8-%EC%9C%A0%EB%AC%B4/

div vs span vs p 차이는 블록 요소와 포함 유무 - dAsImA

https://junistory.blogspot.com/2017/07/html5.html

HTML5 태그의 블록 요소와 인라인 요소