01. [CSS] 블록 요소, 인라인 요소

▪ 블록 요소

1. 종류 : DIV, H1, P
2. 사용 가능한 최대 가로 너비를 사용
3. 크기를 지정할 수 있다.
4. 생성 시 시작 사이즈 : width: 100%; height: 0;
5. 수직으로 쌓임 ⬇
6. margin, padding 위, 아래, 좌, 우 사용 가능하다.
7. 레이아웃을 잡는 용도로 활용

▪ 인라인 요소

1. 종류 : SPAN, IMG
2. 안에 내용이 없으면 영역이 생성되지 않음 (필요한 만큼의 너비만 사용 한다.)
3. 크기를 지정할 수 없다.
4. 수평으로 쌓임 ➡
5. 생성 시 시작 사이즈 : width: 0; height: 0;
6. margin, padding 위, 아래는 사용 할 수 없다.
7. 텍스트를 작업하는 용도로 활용
8. 줄 바꿈시 띄어 쓰기가 생김

<span>SPAN</span><span>SPAN</span><span>SPAN</span> <!--띄어쓰기 안생김-->
<span>SPAN</span> <!--띄어쓰기 생김-->
<span>SPAN</span> <!--띄어쓰기 생김-->

블럭요소 ↔ 인라인 요소 변경

/* 블록 요소 ➡ 인라인 요소 */
div {
    display:inline;
}

/* 인라인 요소 ➡ 블록 요소 */
span {
    display: block;
}