display
-
요소의 화면 출력
-
각 요소에 이미 지정되어 있는 값
block: 상자 요소
inline: 글자 요소
inline-block: 글자 + 상자 요소 -
따로 지정해서 사용하는 값
flex: 플렉스 박스(1차원 레이아웃)
grid: 그리드 (2차원 레이아웃)
none: 보여짐 특성 없음, 화면에서 사라짐
기타: table, table-row, table-cell등
block
하나의 라인안에서 요소끼리 바로 옆에 위치할 수 있다.
display: block
- 대부분 HTML element는 block 요소.
- block 요소 : header, footer, p, li, table, div, h1
- block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻.
- 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다.
width,height,margin,padding값을 지정할 수 있다.- 기본적으로 width:100% 이므로 한 줄 전체를 차지한다.
inline
대부분의 HTML element로 좌우측에 다른 요소가 위치할 수 없다.
display: inline
- span, a, img 태그 등이 inline 요소
- inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있다는 뜻
- 기본적으로 block 레벨 요소는 새로운 줄에서 시작하지만, inline 요소는 줄의 어느 곳에서나 시작할 수 있다.
- 태그 내부의 컨텐츠 크기만큼만 차지한다.
width,height,margin(상하),padding(상하)는 지정할 수 없다.- 단,
margin(좌우),padding(좌우)는 지정 가능하다 !
inline-block
inline과 block 두 가지 속성을 다 가지고 있다. 기본적으로 inline으로 배치되지만, 브라우저의 크기가 줄어들면 block으로 변한다.
display: inline-block
display: inline-block가 입력된 태그는text와 같이 취급된다.inline-block사이에 공백이 생기게 되는데, parent 태그에font-size: 0를 적용하면 해결된다.inline-block끼리 높이가 안맞을 때 상위 공백이 생기게 되는데vertical-align: top을 적용하면 해결할 수 있다.
- 줄 바꿈 없이 한줄에 다른 요소들을 나란히 배치할 수 있다.
inline에서 불가능 하던 너비, 높이 지정가능 (width/height)width/hegiht를 지정하지 않으면,inline처럼 컨테츠 만큼 영역이 잡힌다.margin/padding의 상하 간격 지정이 가능하다.- 대표적 inline-block 태그 :
button,select
float
왼쪽 혹은 오른쪽으로 붙이고 싶은 요소에게 float: left 또는 float: right 속성을 부여한다.
float: left / float: right
<div id="wrap">
<div>box1</div>
</div>
#wrap div{
float: left;
}
float으로 작성시rap(부모요소)의height가0으로 지정된다.
때문에,float를 부여한 요소의 부모요소의class에
<div id="wrap" class="clear">
<div>box1</div>
</div>
<style>
.clear::after{
display: block;
content: "";
clear: both;
}
</style>와 같이 css에
clear: both;를 지정하여 타 블럭이 겹쳐지지 않도록 방지하여 준다.
float: left를 이용해 왼쪽으로 배치했다면clear : left
float: right를 이용해 왼쪽으로 배치했다면clear : right
clear: both;는 float 속성값이 left와 right인지 상관없이 기본 상태 (알반적으로clear: both사용)
none
display: none
- 내용을 보이지 않도록 처리한다.
- 반응형 웹에서 자주 쓰인다. (필요에 따라 내용이 보이다 or 안 보이다 하게 할 때)
