여러가지 css 속성들

background

• background-image : url('')
  • 상대경로, 절대경로 설정 가능
• background-repeat: repeat | no-repeat
• background-size: contain | cover | custom
  • contain: 이미지 전체가 보이도록 한다.
  • cover: 빈공간이 남지 않도록 이미지를 꽉 채운다.
  • custom: 100% 100px등으로 조정한다.
• background-position : center, center

box-shadow

• box-shadow: h-offset, v-offset, blur, spread, color
• 속성은 5가지이며, 순서는 맞춰야 한다.
• x축, y축, 흐린 정도, 그림자 크기, 색상

overflow

• overflow : *visible | auto | scroll | hidden
• auto와 scroll은 같은 기능을 한다.

transform

• css함수 translate(), scale(),rotate() 사용
• 변경된 위치는 다른 요소에 전혀 영향을 끼치지 않는다.
• transform: rotate(45deg)
• transform: translate(10px,10px) | translate(50%,50%): 좌표를 움직일때 사용한다
• transform: scale(N) | scale(x,y): 사이즈를 조정한다(N배수, x축y축 배수)
• transform: skew(10deg,20deg): x축,y축 기준으로 각도만큼 비튼다.

Visibility

• visibility : hidden | visible
• 영역은 차지하지만, 보이진 않는다.
• display: none: 영역을 차지 하지 않는다.

viewport

• 1vw 뷰포트 너비의 1%
• 1vh 뷰포트 높이의 1%

prefix 접두사

• -webkit, -moz, -ms, -o
• transition, animation등 최신 브라우저에서 작동하는 프로퍼티를 하위 버전의 브라우저에서도 작동할 수 있게 한다.