text-decoration

: 텍스트에 장식용 선을 추가하는 단축 속성으로 다음의 하위 속성들을 포함하고 있다.

• property : text-decoration
• constituent properties : text-decoration-line (text-decoration-color) (text-decoration style) (text-decoration-thickness)
• value :
  • text-decoration-line : none underline overline line-through
  • text-decoration style : solid double dotted dashed wavy

text-decoration: wavy overline purple 4px; /* 물결, 윗선, 보라색, 4px */

text-decoration MDN

transform

: 요소에 회전, 크기 조절, 기울이기, 이동 효과를 줄 수 있다.

• property : transform
• value : none rotate() scale() skew() translate()

rotate() : 회전

transform: rotate(0); /* 기본값 */
transform: rotate(90deg); /* 요소를 오른쪽으로 90도 회전시킨다. */
transform: rotate(-0.25turn); /* 요소를 왼쪽으로 90도 회전시킨다. */

scale() : 크기 조절

transform: scale(1); /* 기본값 */
transform: scale(0.7); /* 크기를 70%로 축소 */
transform: scale(1.3, 0.4); /* 너비를 130%로 확대, 높이를 40%로 축소 */
transform: scale(-0.5, 1); /* 너비를 50%로 축소하면서 좌우 반전, 높이는 그대로 */

skew() : 기울이기(왜곡)

transform: skew(0); /* 기본값 */
transform: skew(15deg); /* x축을 따라 15도 왜곡된다. */
transform: skew(15deg, 15deg); /* x축을 따라 15도, y축을 따라 15도 왜곡된다. */

translate() : 이동

transform: translate(0); /* 기본값 */
transform: translate(10px, 20px); /* 요소를 오른쪽으로 10px, 아래로 20px 이동시킨다. */

transform-function MDN
CSS 2D Transforms Methods

❔ 학습 후 궁금한 점

• transform: skew는 아직 완전하게 이해하기 어려운 것 같다.
• transform 함수, rotate() scale() skew() translate()의 value들은 나중에 다시 정리해보자!