inline / block level

css를 처음으로 시작하면서 가장 먼저 들었던 이야기는 인라인과 블럭 요소의 구분이었다.

블럭 방식은 부모의 가로 넓이를 모두 채움

인라인 방식은 딱 자기 크기만큼 채움

인라인을 블럭 레벨로 블럭을 인라인으로 마음껏 바꿀 수 있다.

대표적인 블럭 레벨의 html테그로는 hn이 있다.

처음 html 을 접했을 때 제목 부분에 사용하는h1 테그가 줄 바꿈을 자동으로 해 주는 것을 볼 수 있었을 것이다.

이처럼 블럭 레벨은 혼자서 가로를 다 차지한다는 특성이 있다. 그래서 제목 다음에 바로 내용(p)이 나오지 않고 다음 줄에 나오도록 할 수 있는 것

h1 스타일에 border값을 1px적용을 하면 가로를 차지한다는 것이 무엇인지 알 수 있다.

인라인 방식은 줄바꿈을 야기하지 않는다.

대표적으로 a테그가 있는데 우리가 a테그로 링크를 지정 해 놓아도 뒤에 내용이 밑으로 내려가지 않는 다는 것을 볼 수 있다.

원래 블럭 레벨인 h1테그를 inline으로 바꿀 수 있는데

h1{ display: inline;}

a{ displsy: block; }

이런 방식을 사용하면 된다.

이처럼 display를 사용해서 인라인 레벨을 블록 레벨로, 또 블록은 인라인레벨로 속성을 바꿀 수 있다.

댓글