[CSS] CSS 속성 정리하기

CSS 속성 정리하기

box-sizing

CSS를 적용하다보면 border를 적용했을 때, 부모 컨테이너 밖으로 빠져나가는 경우가 종종 발생한다.

이 때, box-sizing: border-box로 설정해주면 테두리와 안쪽 여백의 크기도 요소의 크기로 고려해 빠져나가지 않는다.

기본 값은 box-sizing: content-box이다.

opacity

요소의 불투명도를 설정한다. 0에 가까울수록 투명해지고 1에 가까울수록 불투명하다.

rgba()

rgba는 색상을 표현할 때 사용한다. 4개의 인자를 갖는데, Red, Green, Blue, Alpha(투명도)를 갖는다.

a는 생략 가능하다. 투명도는 opacity와 같다.

box-shadow

요소의 테두리에 그림자효과를 줄 수 있다. x축 기준 거리, y축 기준 거리, 색상, 테두리 선명도(blur-radius), 그림자 확산도 (spread-radius)을 정할 수 있다.

line-height

줄간격을 조정한다.