[CSS] 3일차 CSS정리 (CSS Box Model, Text 스타일링, Image, Input, Transform, animation CSS)

예전에 object-fit 이 뭔지도 잘 모르고 이미지를 정사각형에 맞게 자르기 위해 사용했었는데,

여기서 무엇인지 자세히 알게 되었다. 이제는 이해하고 사용할 수 있을듯.

---

Margin, Padding, Border (CSS Box Model)

CSS에서 “Box Model”

• 디자인과 레이아웃에 대해 이야기 할 때 사용됨
• 기본적으로 모든 HTML 요소를 감싸는 상자.
  • 여백, 테두리, 패딩 및 실제 콘텐츠로 구성됨

⇒ 내용 - 패딩 - border - 마진

margin: <top><right><bottom><left>

padding: <top><right><bottom><left>

border: <width><style><color>

border: 1px solid blue;

Text 스타일링

• font-family : 글꼴 변경.

font-family: Roboto, Verdana, Arial;
// roboto 사용을 못하는 경우, verdana로 돌아감
// verdana도 안되는 경우 arial

• font-weight : 두께 지정 100~900
• text-align : justify ; 양쪽 정렬.
• 양쪽 모두를 가지런하게 맞추기 위해 띄어쓰기 간격이 달라짐.
• text-decoration: underline 이런거 있음.

Image

object-fit

: 이미지 또는 비디오의 크기를 조정하는 방법을 지정하는데 사용됨

.image {
    width: 400px;
    height: 400px;

    /* 기본값, 이미지가 늘어나거나 찌그러짐 */
    object-fit: fill;
    
    /* 종횡비 유지하는 대신 "잘림". 이미지 비율 유지 (찌그러지지 않음) */
    object-fit: cover
    
    /* 종횡비 유지하고 주어진 치수에 맞게 크기가 변화됨.*/
    object-fit: contain;

    /* 이미지 크기 조정 안됨 */
    object-fit: none;

    /* 이미지가 가장 작은 버전으로 축소됨 */
    object-fit: scale-down; 
}

object-position

: 이미지를 배치하는 방법을 지정하는데 사용 됨

object-position: left;

Input

<input type="text" placeholder="텍스트">

---

Transform

: 어떤 요소를 회전하거나, 크기 조정, 기울이기, 이동하는 효과를 줄 수 있음.

transform-functions

✔️scale

• scale(x,y), scaleX(n), scaleY(n)
• 0과 양수 입력, 몇배 확대함.(배수)
• 부모 요소에 적용하면 하위 요소까지 영역을 가지는 모든 요소를 확대 축소 하므로, 페이지 전체의 확대나 축소에도 적용할 수 있다.

✔️skew

• skew(x-angle, y-angle), skewX(x-angle) ,skewY()
• x축, y축을 기준으로 기울인다. x축은 좌우, y축은 상하

✔️rotate

• rotate(angle), rotateX(x-angle),rotateY(),rotateZ()
• 회전 각도가 양수이면 시계 방향, 음수이면 시계 반대 방향

✔️translate

• translate(x,y), translateX(n), translateY(n)
• 얼마나 이동시킬건지 px, %, em등으로
• 원래의 위치를 기반으로 이동함. 원래의 위치 정보는 남아있음

✔️matrix() : 한번에 사용 가능 (기울이기나 뭐 그런것들)

---

animation CSS

• 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇 가지 키프레임 keyframes를 지정해야함
• 키프레임은 특정 시간에 요소의 스타일을 유지한다.

animation 속성값

: 한줄로 적거나 따로 적거나 할 수 있음.

• 따로 적으려면 아래의 내용 참고,
• 한줄로 적으려면 animation: 쫘라라락; 적으면 된다.

✔️animation-direction

: normal, reverse, alternate, alternate-reverse