[HTML] 📚 <p> <div> <span> 태그정리

: css속성 inline 이 자동으로 적용되어있다.

• 와의 차이

  : block level element (줄 바꿈 O) : inline level element (줄 바꿈 X) display 속성을 사용해서

  를 inline 으로 바꾼다던지 을 block 으로 바꾸는 것도 가능은 하다.

Display 요소값의 특징(Block, Inline)
Display 요소는 두개의 특징을 가진다

Block-level Element : 왼쪽에서 오른쪽으로 하나의 가로 영역(Block) 전체를 차지하는 태그들

Inline-level Element : 자기의 고유 영역이 없이 그저 자신이 둘러싸고 있는 내용들의 양에 따라 길이가 결정되어 지는 태그들

Block-level 요소
Block 레벨은 아래 그림과 같이 한 부분을 통째로 블럭처럼 사용하는 것이다.

새로운 Block 요소는 새로운 라인에서 Block을 시작한다.

그래서 두 Block간에는 겹치는 일이 없다.

p-div-span

Block-level 요소 종류는 아래와 같다.

p-div-span
Inline-level 요소
Inline-level 요소는 문단 중간에 들어간다고 생각하면 된다.

새로운 라인에서 시작하지 않는다.

또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

p-div-span

inline 특징을 가지는 태그나 속성값은 아래와 같이 많다.

block vs inline
Hello World에 빨간색 네모박스는 span을 사용한 것이다. 단락을 차지하지않아 중간에 들어가 저렇게 일부분을 꾸밀수가 있다.

p-div-span