해당 요소를 블록레벨로 지정함.
Block ElementBlock Element
p 태그나 div 태그들은 처음부터 블록 레벨 요소였지만 img 태그 같은 인라인 레벨 요소도 블록 레벨 요소로 바꿀 수 있음.
display 속성을 inline으로 지정하면 블록 레벨 요소를 인라인 레벨로 바꿀 수 있음.
서로 다른 줄에 배치되는 요소들을 한 줄로 함께 표시하기 위해 사용되는데 주로 목록에서 사용됨.
Inline Element Inline Element 목록에서 사용되는 li 태그는 블록 레벨 요소이기 때문에 각 항목은 수직으로 배치됨.
하지만 display:inline; 을 지정하면 항목을 한 줄로 배치할 수 있고 목록을 수평 내비게이션용으로 사용할 수 있음.
display 속성을 inline으로 지정하면 한 줄로 배치할 수는 있지만 너비나 높이, 위 아래 마진, float 같은 값이 정확히 적용되지 않음. 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정하고 싶다면 inline-block 을 사용하면 됨.
Inline-block Element Inline-block Element 이 속성은 블록 레벨 요소와 인라인 레벨 요소 두 가지 특성을 모두 가짐.
display 속성을 none; 으로 지정하면 해당 요소를 화면에 아예 표시하지 않음
visibility:hidden; 도 비슷한 역할을 하는데 visibility 속성은 화면에서 감추기만 할 뿐 원래 요소가 있는 공간은 그대로 차지하지만, display:none; 은 아예 공간조차 차지하지 않음.
none Element none Element 웹 사이트를 반응형 웹 디자인 기법으로 작성할 때 PC용 화면에서는 표시하지만 모바일 화면에서는 보이지 않도록 하고 싶은 부분이 있다면 그 부분을 display:none; 으로 처리하면 됨.