Inline: 옆으로 쭈르륵 흐르는 성질, 라인 속에 있는다
block과 정반대의 행동패턴 !!
Inline인 block의 부모 요소가 갖는 영역이 충분하지 않아 들어가기 모자란 상황일때, 줄바꿈처럼 그 밑에 다시 라인을 만든다.
(사진참고 김버그의 HTML&CSS는 재밌다)
Block과 Inline의 차이: 면(영역) vs 선(흐름)
inline은 컨텐츠들을 옆으로 흐르게 하기 위한 흐름같은 느낌.
우리가 문서 작성할때 텍스트와 비슷하다
가장 중요한 inline의 특징:
width, height, padding-top, padding-bottom, border-top, border- bottom, margin-top, margin-bottom 사용불가 !!
->inline의 흐름을 해치기 때문.
padding-left/right나 margin-left/right 같이 가로 길이와 관련된 애들은 흐름을 깨지 않기 때문에 상관없다.
Inline-Block: 블록과 인라인의 장점을 모두 가짐.
인라인처럼 기본적으로 가로로 흐르는 동시에 블록처럼 영역도 잡을 수 있음!
상황마다 이것들이 각자 어떤 부분에 적합한지 다른데, 이는 해보면서 익혀야 할 듯 하다.
짱이되어야지