CSS 인라인과 블록

 

block 은 옆에 다른 요소가 올 수 없다.

inline 은 옆에 다른 요소가 올 수 있다. (inline = in the same line) 이다.

 

대부분의 요소는 블록이기 때문에, 블록이 아닌 요소 즉 인라인인 요소를 외우는 게 더 편하다.

인라인 요소의 대표적인 것은 span, img, a 태그가 있다. (span 태그 ; 짧은 구문을 쓸 때 사용 태그 / a 태그 ; 링크를 걸 때 사용하는 태그 / imga 태그 ; 이미지를 첨부할 때 사용 태그) 

 

나머지는 대부분 블록이라고 알아두고 쓰자. 그게 편하다. 

 

 

그렇다면 인라인 요소를 블록요소로, 블록 요소를 인라인 요소로 바꿀 수 있을까 ? 

결론은 그렇다. 

span 태그는 기본 요소가 inline인데, 이를 블록으로 바꾸려면 

css에서 display 속성을 block 값으로 밸류 설정을 해주면 된다. 

display : block;

결과물은 이렇다. 블록요소처럼 옆에 같은 줄에 아무것도 올 수 없게 된다.

 

반대로 블록요소를 인라인 요소로 바꾸기 위해, div의 css에 displya 속성의 밸류를 inline으로 설정해본다. 

div에 display를 인라인으로 줌

결과물

 

결과물에 div가 사라진 것을 볼 수 있다 왜?

 

1. 어떤 요소가 인라인이면 그 요소는 높이와 너비를 가질 수 없기 때문이다.

그래서 div가 사라진 것이다. 

2. 그리고 div에 내용이 없어서이다. div에 한글자 a라도 넣었다면 a가 생길것이다. 아래와 같이

 

이처럼 인라인은 높이와 너비가 없고 블록은 있다.

인라인은 박스가 아니기 때문이다.