display
display는 CSS에서 레이아웃을 제어하기 위한 가장 중요한 프로퍼티입니다. 모든 엘리먼트에는 엘리먼트의 유형에 따라 기본 표시값 있음.
block element ( block-level )
요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없음.
태그를 사용해 요소를 삽입했을 때, 혼자 한 줄(너비100%)을 차지하는 요소. 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스레 줄넘김 됨.
<p>, <h1>~<h6>, <ul>, <ol>,
<div>, <blockquote>, <form>,
<hr>, <table>, <fieldset>, <address>
inline-block
속성은 인라인처럼 컨텐츠 크기 만큼 표현하면서 margin, padding, width, height 속성을 정의하면 표현해줌.
inline element ( inline level )
요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
줄을 차지 하지 않는 요소. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음. 따라서 한 줄에 여러 개 인라인 레벨 요소를 표시하는 것이 가능
<a>, <img>, <object>, <br>, <sub>, <sup>,
<span>, <input>, <textarea>, <label>, <button>
요소 성질 변경
inline -> block
inline 성질을 갖도록 하는 CSS property는 display 와 float 이 있음
.inline-p {
display: inline-block;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
해당 property에 위와 같은 값을 부여하면, 요소 옆에 요소가 위치하는 inline 성질로 변하게 됨.
float속성 : 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치 되어야 함을 지정.
block -> inline
.block-span {
display: block;
}
display : none
해당 요소는 화면에서 보이지 않음. interactive한 웹을 구현할 수 있음. 엘리먼트가 존재하지 않는 것처럼 페이지가 렌더링됨. visibility: hidden;으로 설정하면 엘리먼트가 감춰질 테지만 해당 엘리먼트는 완전히 보이지 않게 되더라도 여전히 공간을 차지함.