1. inline요소와 block요소
1) inline
- 줄 속에 넣는 요소,
<b>,<span>,<a>태그와 같이 특정 문자열을 선택할 때 사용하는 태그가 그 예이다. - inline태그는 줄바꿈이 되지 않는다는 특징을 갖고있다.
- 태그에 속하는 내용만큼의 높이, 너비를 가지며 높이 너비를 따로 지정해도 적용되지 않는다.
2) block
- block 요소는 가로화면 100%를 차지하기때문에 자동으로 앞뒤 줄바꿈이 된다.
<p>,<h1>,<div>,<ul>과 같은 태그가 그 예이다.- 높이, 너비를 지정할 수 있다.
2. display 속성
display 속성은 요소를 어떻게 표시할 지를 선택한다.
1) display: block & inline
- display 속성을 활용하면 inline 요소를 block 요소로 보이게 만들수 있고 그 반대도 가능하다.
2) display: inline-block
- inline-block은 block 요소처럼 높이와 너비를 지정할 수 있으나, 요소들이 줄바꿈 되지 않고, inline 요소처럼 옆으로 따라붙게 된다.
3) display: none
- none을 적용하면 요소가 차지하고 있던 공간과 그 내용도 사라진다.
