CSS | display속성, 여러 속성

display속성

• none

말 그대로 보이지 않음. visivility: hidden;을 한 경우 보이지 않을 뿐 영역은 차지하지만 none은 영역도 차지하지 않는다.

 

• block

대표적으로 div, p, h, li태그가 해당된다. 가로영역을 모두 채우고 block요소 뒤에 등장하는 태그는 줄바꿈 된것처럼 보이게 된다. width, height를 지정할 수 있다.

 

• inline

대표적으로 span, a, br, img 태그가 이에 해당된다. block과 달리 줄 바꿈이 되지 않고 width, height를 지정할 수 없다.

 

• inline-block

block과 inline의 중간형태이다. 줄바꿈이 되지 않지만 크기는 지정 가능하다.

 

---

 

line-height 

줄 높이 정하는 속성

ex)폰트 20px일때 line-height를 40px로 주면 폰트 위, 아래에 10px씩 빈공간이 생기게 됨

 

font-weight

글자 굵기 지정하는 속성

 

text-transform

텍스트 변환

: uppercase는 대문자로 바꾸어주는 속성이다.

 

background-size

요소의 배경이미지 크기 선택

:cover 이미지의 비율을 유지하면서 가능한 가장 작은 크기로 크기를 조정하여 컨테이너를 채우고(즉, 높이와 너비가 모두 컨테이너를 완전히 덮음 ) 빈 공간을 남기지 않는다.

 

min-height

최소높이 지정. 안에 컨텐츠가 아무것도 없어도 min-height만큼의 크기를 차지하고 있어야 한다.

 

box-sizing: border-box;

 

background-position

 

text-indent

 

vertical-align