블럭박스(Block box), 인라인박스(Inline box), 라인박스(Line box)의 기본개념을 정확히 알아야

뒤에 나올 'float'을 이해하는데 한결 수월해진다.

 

 

이것들이 어떠한 형태로 이루어져있는지 보자면,

 

위와 같이 하나의 문장에는 보이지 않는 인라인박스들이 무수히 존재한다.
만일 인라인박스에 부분부분 어떠한 스타일을 주려면 span같은 인라인 태그를 삽입하여

그 부분을 지정해 사용하는 것이다.
그러니까 결국 <span>이 빠져있는 각각의 단어들은 선택만 할 수 없을뿐 전부 인라인박스인 것.

그리고 이런 인라인요소들을 감싸는 라인박스가 있으며 또다시 라인박스를 감싸는 블럭박스가 존재한다.

 

실제 라인이 그려져있지 않더라도 문장 하나하나가 이런식으로 이루어져있다고 머릿속으로 생각할 것.
   

 

 

 

 

그럼 여기서중요한 블럭박스에 사용되는 블럭요소와 인라인박스에 사용되는 인라인요소의 차이를 보자.

 

 

*블럭요소*

 

<p>태그나 <div>와 같은 블럭요소는 화면 한줄의 100%를 자기의 영역으로 가진다.
때문에 width값을 별도로 지정해주지 않으면 브라우저의 창을 줄이던 늘리던 끝까지 꽉차게 보여지는 것이다.
자리를 전부 차지해버리는 블럭요소들은 이러한 성질때문에 width값을 별도로 주지 않을 시

다른 것의 옆에 배치될 수 없다. (자신이 한줄을 다 차지해야 하므로...)

 

이때, div는 특히 모든것을 아우르는 맡형같은 존재이다.
div > p
이렇기 때문에 같은 블럭요소라도 <p>안에 <div>를 자식으로 넣을 수 없다.

 

 

*인라인요소*

 
<span>같은 인라인요소들은 width값과 height값을 줄 수 없고,

padding과 margine의 값은 인라인 글줄인 옆으로만 적용되며

위,아래의 간격은 듣지 않느다. (line-height 로만 문장의 위아래 공간을 지정할 수 있다.)

 

이때, 인라인요소 중 예외적으로 이미지<img> 태그만 width값과 height값을 지정해 줄 수 있으며
만일 이미지를 블럭요소인 <div>로 감싼다면 이미지가 한칸을 전부 차지하여
이미지 옆에 글씨를 배치시킬 수 없는 것이다.

 

 

 

 

 

실제로 해보면 아래와 같다.

 

<div>안에 50x50사이즈의 이미지 하나와 텍스트를 넣으면 

인라인요소인 이미지<img> 옆으로 텍스트가 들어가고, 남는 텍스트는 아래로 흘러내린다.

'여름방학'부분에 인라인 요소인<span>을 넣어 파란색의 점선을 그어보면 글자 양 옆으로의 '20px' 패딩은

적용되지만 위 아래로의 패딩은 먹지않아 글 높이 간격이 벌어지지 않았다.

게다가 width값 '300px', height값 '300px' 역시 아무런 영향을 미치지 않았다.

(파란색 점선은 padding값만 적용 되었을 뿐이다.)

 

 

 

 

 

 

 

 

여기서 이미지에다 블럭요소인 <div>로 감싸주고 스타일로 파란색 테두리를 쳤더니

이미지 옆에 있던 텍스트들이 아래쪽으로 밀려났다.

게다가 파란테두리 라인은 자신이 차지할 수 있는 영역만큼 전체를 꽉 채웠다.

(빨간색 바깥쪽 테두리와의 간격은 빨간색에 10만큼 패딩을 주었기 때문)

 

 

 

 

 

 

 

만일 여기에 이미지와 텍스트들을 감쌌던 <div>대신 같은 블럭요소인 <p>를 넣는다면 어떻게 될까?

 

<p>안에 이미지를 감싼 <div>가 들어갔더니 아래처럼 <p>가 <div>를 감당하지 못하고

스타일만 바깥쪽으로 빠져버렸다.

 

 

 

 

 

 

 

그럼 여기서 한가지 의문.

인라인박스와 블럭박스는 알았다쳐도 인라인박스 요소들로 이루어진 가상의 라인박스라는 개념은 왜 필요할까?이는 뒤에 float에서 알아보자.

 

 

 

 

 
 
 
 

 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. 쪼랩

    이미지에 스타일을 줄때 css로 넣으니까 이미지에만 테두리가 잡히고[img{border:1px solid blue;}] div에 직접 스타일을 줬더니 [<div style="border:1px solid blue;"><img src="http://placehold.it/50x50"/></div>]라인전체에 테두리가 잡히네요.. 말씀하신것처럼 라인전체가 이미지 영역이 되어서 텍스트들은 아래로 자연스레 내려와버렸구요..
    일하면서 공부하는거라 진도가 빨리 나가진 않지만 매일매일 재미있어요 ~
    벌써 금요일이네요..불금되세용!!

    2013.08.02 10:59 [ ADDR : EDIT/ DEL : REPLY ]
    • 네 뭐니뭐니해도 본인이 직접 이것저것 해보면서 문제에 부딪히고 해결해 나가는 과정이 중요합니다.^^
      이건 수학이랑 좀 비슷한거 같아요.
      풀이과정 보면 다 알겠지만 막상 문제만보고 직접 풀려고하면 안되잖아여 ㅋ
      많이많이 연습해볼수록 좋겠죠~

      점심식사 맛나게 하세요^^

      2013.08.02 11:33 신고 [ ADDR : EDIT/ DEL ]
  2. byeol

    블로그로 차근차근 배우고 있어요 ! ㅎㅎ 늘 감사드려요 어찌 이렇게 설명을 쉽게 써 놓으셨나요

    2014.05.28 18:36 [ ADDR : EDIT/ DEL : REPLY ]
    • 제가 배웠던 선생님이 잘 가르쳐주셨던 듯 해요...

      여기서 배울 수 있는 정보는 정말 기초중의 기초이겠지만 무엇이든 시작하려면 기초가 중요하니까 도움이 되실거예요~
      열심히 하세요^^

      2014.05.29 10:13 신고 [ ADDR : EDIT/ DEL ]