CSS) [Block / Inline] 기본 개념과 구분 방법

간단하게 예제를 통해 핵심만 설명한다.

 

 

첫 번째 사진의 코드를 적용시킨 결과가 두 번째 사진이다.

 

html의 body 태그쪽을 보자.

 

첫 번째 태그는 너비와 높이를 설정하지 않은 block,

두 번째 태그는 너비와 높이를 설정한 block,

세 번째 태그는 너비와 높이를 설정한 inline,

네 번째 태그는 너비와 높이를 설정한 inline에 display:block; 특성까지 설정했다.

 

결론만 말하자면, inline은 너비와 높이를 가지지 않는다. 아무리 설정해줘도 변경할 수 없다.

너비와 높이는 오직 block만의 특권이다.

 

따라서, 너비와 높이를 이용하기 위해서는 display:block 이 기본이 되어야 한다.

 

---

다행히도 inline 태그는 몇 종류 없다. 아래의 주요 태그들만 알아놓고 나머지는 다 block이라고 생각해도 된다.

 

<span>, <a>, <img>, <button>, <input>, <label>