선택자(Selector)
Class 선택자
block-level과 inline-level
table
border-collapse
table-layout
스크롤 테이블
마우스 커서
스크롤바 색상
링크 색상
필터
인쇄
@media print
page-break-before
ime-mode
포지셔닝(Positioning)
block-level과 inline-level
HTML element 를 크게 2가지로 구분해보면 head element 처럼 화면에 표시되지 않은 element가 있고 div, p, table...과 같은 element 처럼 화면에 표시되는 element로 나눌 수 있습니다.

그릭 화면에 표시되는 element를 다시 두 가지로 분류하면 block-level과 inline-level로 구분할 수 있습니다.

  • 화면에 표시되지 않는 element
  • 화면에 표시되는 element
    • block-level
    • inline-level

block-level과 inline-level의 구분

block-level과 inline-level을 가장 쉽게 구분할 수 있는 방법은 한 라인에 복수로 올 수 있나의 여부입니다.

block-level element는 한 라인에 하나만 위치할 수 있습니다. 반대로 inline-level element는 한 라인에 2개 이상 올 수가 있죠.

div(block-level element)와 span(inline-level element) element를 사용해 보면 이 차이를 확실하게 느낄 수 있습니다.

<div style="border:1px gray solid;">block-level element</div>
<div style="border:1px gray solid;">block-level element</div>

위와 같이 block-level element인 div element를 연속으로 2개를 넣으면 각각 한라인을 차지하게 됩니다.

반면 inline-level element는 한줄에 옆으로 여러개가 위치할 수 있습니다.

<span style="border:1px gray solid;">inline-level element</span>
<span style="border:1px gray solid;">inline-level element</span>

물론 block-level element가 한줄을 다 차지한다고 하더라도 자신을 포함한 element가 허용하는 한도내에서 차지합니다. 만일 테이블의 셀안에 넣어버리면 그 셀의 크기가 허용하는 범위내에서 width를 차지하게 됩니다.

<table width="400">
<tr>
    <td><div style="border:1px gray solid;">block-level element</div></td>
    <td><div style="border:1px gray solid;">block-level element</div></td>
</tr>
</table>

기타 다른 차이점은, block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가능합니다.

다소 개념적인 부분이라서 쉽게 이해하기 힘들 수도 있지만 block-level과 inline-level의 차이를 확실하게 알고 있어야 CSS를 전문적으로 사용할 수 있습니다.

block-level elements

  • p
  • h1~h6
  • ul
  • ol
  • pre
  • dl
  • div
  • noscript
  • blockquote
  • form
  • hr
  • table
  • fieldset
  • address

inline-level elements

  • samp
  • kbd
  • var
  • cite
  • abbr
  • acronym
  • a
  • img
  • object
  • br
  • script
  • map
  • q
  • sub
  • sup
  • span
  • bdo
  • input
  • select
  • textarea
  • label
  • button
Copyright © Homejjang.com All rights reserved.