css 한줄쓰기

1. Font 

* font-style : 폰트 형태 등을 지정 (이탤릭 등)

* font-variant : 대문자↔소문자

* font-weight : 폰트 굵기

* font-size : 폰트 크기

* line-height : 폰트 높이값

* font-family : 폰트 글꼴

.p {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: inherit;
  line-height: normal;
  font-family: inherit;
}

p {normal normal normal inherit/normal inherit}

- 폰트사이즈와 line-height를 같이 쓸 때는 / 를 넣어줌

 

2. Background 

* background-color : 배경색

* background-image : 이미지

* background-repeat : 반복여부

* background-position : 위치

* background-size : 크기

* background-attachment : 배경이미지 스크롤 여부

div {
  background-color: red;
  background-image : url('');
  background-repeat : no-repeat;
  background-position : top left;
  background-size : cover
  background-attachment : scroll;
}

div {background : red url('') no-repeat top left/cover scroll;}

- 위치값과 크기를 같이 쓸 때는 / 를 넣어줌

 

3. transition 

* transition-property : 변하는 속성 값. all, opacity, width 등 (여러개 지정할 경우 쉼표로 구분)

* transition-duration :  transiton의 총 시간

* transition-timing-function : transition의 진행 속도 (ease, cubic-bezier 등)

* transition-delay : transition의 시작을 연기

div {
  trnasition-property : all;
  transition-duration : 3s;
  transition-timing-function : ease;
  transition-delay : 1s;
}

div {all 3s ease 1s;}