항목 

인라인 

블록

인라인-블록

   영역

 컨텐츠 크기 만큼

지정 값 또는

지정 안할시 너비는 부모의 가로 크기, 세로는 컨텐츠 크기

지정 값 또는 지정 안할시 너비는 

   정렬

텍스트 정렬에 영향 받음.

(텍스트의 위치를 지정하는 모든 속성) 

마진(auto), 패딩 이용

(테이블 내의 경우 verertical aline)

 텍스트 정렬에 영향 받음.

(텍스트의 위치를 지정하는 모든 속성) 

   박스모델

margin-left,right / padding, border ,float

margin(width 값 고정일 때 auto 지정 가능),

padding,border ,float

margin(auto 불가),padding,border ,float

   중첩 요소

 인라인만 가능

블록,인라인 모두 가능 

인라인만 가능 

   특징

포지션이 텍스트와 

유사하게 처리된다.

(vertical-align 영향 받음)

 양 옆에 요소를 둘수 없다.

포지션이 텍스트와 유사하게 처리된다.

(vertical-align 영향 받음) 

   대표 엘리먼트

span, a, strong, em 

div, h1~6, p,  ul, li 

img, input 



여기까지 인라인, 블록, 인라인 블록에 대하여 살펴보았는데, 여기서 빼놓지 말아야 할 중요한 사실이 있다.


첫째. 바로 블록 요소 또는 인라인 요소 안에 어떤 요소를 중첩 시킬수 있느냐의 문제인데,

위 표에서는 블록 안에는 블록,인라인 모두 가능하고 인라인,안에는 인라인만 가능하다고 쓰여있는데 좀더 생각해볼 필요가 있

다.


1.인라인 내부에 인라인을 쓰더라도 문제가 되는 경우


의미만을 주거나 스타일만을 주는, 예컨대 strong, font, em, b, i등의 인라인 요소 안에는


다른 인라인 요소를 중첩 시켜서는 안된다.


가령, <i><a href="#">여기</a></i>

와 같은 중첩은 잘못이다. (여러의미, 스타일을 동시에 주기위한 중첩은 가능,


가령 <i><b>bold italic</b></i> 로 두효과를 주기위해 사용가능하다.)


2.블록 내부에 블록을 쓰더라도 문제가 되는 경우


다른 문제는 없지만, p,h1~6 류는 블록요소들이지만 다른 블록 요소를 중첩시킬수 없다.'


(+추가, ul,ol,dl 등 목록 밑에는 지정된 요소가 들어가야 한다.

예컨대 ul,ol 밑에는 li만을, dl 밑에는 dt,dd이다. 여담이지만 dt,dd,li 아래로는 예외없이 사용가능하다.)


3.강제로 display를 바꾼 경우의 문제


강제로 display를 바꿨더라도, 그 속성의 원래 속성을 상정한 후, 위 규칙을 따른다.


가령 span이 블록 요소가 되더라도 안에 div, p 등을 중첩해서는 안되고,


div가 인라인 요소가 되더라도 a 태그 안에 중첩될수 없다.


->validator 통과상 문제이기에 유효성 검사기는 그요소의 현재 display를 체크해주지는 않기 때문인데,


단순히 유효성 검사상 문제 떄문에 위 규칙을 지켜야 하는 것은 아니고, 조금 엄격한 브라우저에서는


레이아웃이 뒤틀리게 보여질수 있기 때문이다. 


(필자 같은 경우 span안에 div를 넣고 IE8에서 레이아웃이 틀어지는 것을 보고

무작정 IE8 탓만 한적이 있다. 그것은 IE가 나쁜것이 아닌 필자가 마크업을 잘못했기 때문이다. 아, 물론 IE8이 좋은브라우저 라는것은 아니다..^^;)


둘째는 float에 관한 문제인데,(자세한 이야기는 CSS이야기 탭에서 합시다.^^)


블록 요소에 float을 주기 전에, 기본적으로 width 값을 설정해 주는것이 맞다. 그러나 지정하지 않으면

마치 인라인에서 너비를 결정할 때 컨텐츠 크기로 결정하는 것처럼 컨텐츠 크기가 가로 사이즈가 된다.

(IE6같은 경우는 너비를 주지않고 float할 경우 문제가 발생한다.

----------------------------------------------------------


이상으로 인라인 ,블록 요소에 대해 정리해 보았는데,


나름 필자가 공부하면서 헷갈렸던 것 위주로 정리해보았다. 마크업을 하는데 있어


상당히 중요한 사실이지만 빼놓고 가기 쉬운부분이니 확실하게 알아두도록 하자.

  • 러브박스 2016.08.22 13:52

    블록요소인 li안에 div를 넣어도 되는건가요?

    • 이나라학생 2016.10.08 00:32

      됩니다.^^

  • 질문질문 2018.02.12 20:46

    질문이 있습니다.
    인라인 중에 a 요소는 블럭이든 인라인이든 상관없이 쓸수 있나요?
    레이아웃 짜다보면....
    접근성때문이라도 블럭요소를 a 로 감싸야 할때가 있는데
    이럴땐 어떻게 하는게 제일 좋은 방법인가요?

    • 이나라학생 2018.03.21 00:14

      a요소는 블럭인라인 상관없이 가능합니다.
      (HTML5상에서)

      display:block 후에
      a안에 div 넣고 해도 됩니다.