<HTML5+CSS3>배치와 관련된 블록 레벨과 인라인 레벨

블록 레벨 요소와 인라인 레벨 요소

-블록레벨요소: 태그를 사용해 혼자서 한 줄을 차기하는 요소(왼쪽or오른쪽에 다른 요소가 못옴 div태그나 p태그)

-인라인 레벨요소: 줄을 차지하지 않는 요소,다른 요소가 와도 상관 X (img태그,strong태그 등)

예를 들어, 목록은 블로레벨 요소이기 때문에 각 항목들이 한 줄에 하나씩 세로로 표시되지만, 목록을 인라인 레벨 요소로 바꿔서 지정하면 각 항목을 가로로 배치할 수 있다. 이런 방법으로 목록을 이용해 내비게이션 메뉴를 만들게 됩니다.

블록레벨태그 : p,h1~h6 , ul, ol, div, hr,table, fieldset , address

인라인 레벨 태그 : img, object, br , sub , sup, span, input, textarea, label, button

display속성-요소를 어떻게 보여줄까

-이 속성은 화면에 어떻게 보여질 것인지 지정하는 것이다.

ex)display:속성 값;

 

속성 값

 

인라인 레벨 요소에 display:block으로 지정하면 블록 레벨 요소처럼 사용할 수 있고 <div>태그같은 요소에 display:table-cell이라고 지정하면 표처럼 사용할 수 있다. 따라서 display속성을 익혀두면 레이아웃을 만들 때 편리하다.

 

<div>태그에 display:inline을 사용하면 태그 요소의 특성을 그대로 유지하면서 가로로 배치할 수 있다. 단, 이 경우 float 속성을 사용해서 <div>태그 요소를 정렬해야 한다.

 

ex) ul li { display : inline; ->항목을 가로로 배치

float:left ; ->왼쪽부터 배치

}