속성 한줄쓰기(단축속성)가 가능한 CSS 요소

<<순서 상관X>>

 

border 테두리 3속성

• border-color :
• border-style :
• border-width : (몇px) or (thin/medium/thic) or (시계방향 4개 값 설정)

 

=> border : red solid 2px;

---

background  여러가지

• background-color :
• background-image:
• background-repeat:
• background-position:

 

=> background : yellow url("이미지경로") no-repeat left;

---

<<순서 중요>>

 

font 여러가지 속성 (필수2개)

• font-style:
• font-variant:
• font-weight:
• ★font-size:
• line-height:
• ★font-family:

• font-style, font-variant, font-weight는 font-size의 앞에 와야 함
• font-variant는 CSS 2.1에서 정의한 normal과 small-caps만 사용할 수 있습니다.
• line-height(줄간격)는 font-size 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "16px/3"
• font-family는 마지막 값이어야 함

 

=> font : italic small-caps bold 30px/15px serif;

---

 

transition 4속성

• transition-property :
• transition-duration : 
• transition-timing-function : 
• transition-delay: 

 

=> transition : width 3s linear 1s;

     duration이 delay보다 앞에 나와야 한다.!

---

animation 애니매이션 6속성

• animation-name : 
• animation-duration: 
• animation-timing-function: 
• animation-delay: 
• animation-iteration-count (en-US): 
• animation-direction: 

 

=> animation : changeWidth 3s linear 1s 6 alternate;

     duration이 delay보다 앞에 나와야 한다.!

---

flex-flow 2속성 

• flex-direction
• flex-wrap

=> flex-flow : column wrap;

 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties