블록타입 N 인라인타입

블록 엘리먼트

블록 엘리먼트의 특징

• 한줄을 혼자 다 차지해서 뒤에 오는 내용들은 자동으로 줄바꿈 된다.

• 블록 엘리먼트는 그 안에 또 다른 블록엘리먼트나 인라인엘리먼트가 들어와도 상관없다.
  예외)h태그나 p태그는 블록엘리먼트이지만, 그 안에 블록엘리먼트는 들어가지 못하고 인라인 엘리먼트만 들어갈 수 있다

• 블록 엘리먼트는 가로,세로,여백 등과 같은 값을 잘 인식한다.

  블록 엘리먼트의 종류
  div, h, p, ul,ol,li,dl,dt,dd,form 등
  

인라인 엘리먼트

인라인 엘리먼트의 특징

• 다른 인라인 엘리먼트와 같은 줄에 표시함

• 인라인 엘리먼트는 사이즈가 작기때문에 블록엘리먼트는 들어갈 수 없고 인라인 엘리먼트만 들어갈 수 있다.
  예외)a태그는 인라인엘리먼트이지만 그 안에 블록태그를 포함시킬 수 있다.

• 인라인 엘리먼트는 가로,세로,여백 등과 같은 값을 잘 인식하지 못한다.

  인라인 엘리먼트의 종류
  span, a, img, strong, input, select 등

  ---

  float,position:absolute,position:fixed스타일을 사용하면 자동으로 블록엘리먼트로 변환된다. 하지만 넓이는 안에 있는 컨텐츠만큼 줄어든다. 그래서 원하는 넓이를 주고싶다면 css에서 width값을 따로 설정해야한다.