[TIL - 5] CSS - 3

float 

이미지와 텍스트가 함께 있을 때, 이미지의 위치를 정해줄 때 주로 사용한다

 

속성값

• none 
  
  • 기본값이다. 요소를 띄우지 않는다.
• left
  • 요소를 왼쪽으로 띄운다.
• right
  • 요소를 오른쪽으로 띄운다.
• inherit
  • 부모의 값을 상속해서 사용한다.

 

float 초기화 방법

float를 사용하다보면, float로 인해 바뀌어버린 레이아웃을 초기화해야할 때가 있다. 이 때 사용하는 방법들이다.

 

1. clear

초기화할 태그에, clear 속성을 주게되면 float로 인해 바뀐 레이아웃을 초기화 시킬 수 있다. 속성값은 5가지가 있다. 

• none
  • 초기화를 하지 않음
• left
  • float: left로 인해 바뀐 레이아웃을 초기화한다.
• right
  • float: right로 인해 바뀐 레이아웃을 초기화한다.
• both
  • float로 인해 바뀐 레이아웃을 모두 초기화한다.
• inherit
  • 부모의 값을 상속해서 사용한다.

2. overflow

overflow: auto를 float 속성을 사용한 부모 요소에게 줄 때도, 마찬가지로 레이아웃을 초기화시킬 수 있다.

 

📋  이처럼, float는 한번 적용하면 다른 레이아웃에도 영향을 미칠 수 있기 때문에, 요즘에는 잘 사용되지 않는 속성이다. 대신 flex를 애용하도록 하자!

 

 

transition

transition은 요소의 속성값이 바뀔 때, 이러한 변화가 애니메이션처럼 보이도록 전환 효과를 주는 속성이다.

 

속성

• transition-property
  • 전환할 속성을 지정
• transition-duration
  • 전환 효과의 지속시간 (s)
• transition-delay
  • 전환 효과의 지연시간 (s)
• transition-timing-function
  • 전환 효과의 진행 속도
  • linear : 속도가 일정
  • ease : 처음에는 속도가 빨라지다가 중간부터 느려짐
  • ease-in : 처음에는 속도가 느리지만, 완료될 때까지 점점 빨라짐
  • ease-out : 처음에는 속도가 빠르지만, 완료될 때까지 점점 느려짐
  • ease-in-out : 느리게 시작해서, 빨라졌다가 마지막에는 다시 느려짐

📋  transition 속성을 통해 복잡한 위의 4가지 속성을 간략하게 표현할 수도 있다. 

transition : {transition-property} {transition-duration} {transition-timing-function} {transition-delay}

 

 

animation

transition과는 다르게, 한번에 여러 속성을 특정 시점에 조작할 수 있다. 또 무한반복이 가능하다는 특징이 있다. 

 

@keyframe

애니메이션의 이름과, 그 애니메이션의 여러 작업들을 정의하는 문법이다.

 

기본적으로 아래와 같이 작성한다.

@keyframes {애니메이션 이름} {
    0% {
        {CSS 속성}
    }
    100% {
        {CSS 속성}
    }
}

 

0%와 100%는 애니메이션 진행률을 의미한다. 즉, 0%는 애니메이션의 시작 시점이다. 

 

위의 예제처럼 0%에서 100%까지 움직이는 경우에는, 다르게도 표현할 수 있다.

 

@keyframes {애니메이션 이름} {
    from {
        {CSS 속성}
    }
    to {
        {CSS 속성}
    }
}

 

이 부분은 각자의 코딩 스타일에 따라 편한 방식을 사용하면 될 것 같다!

 

속성

• animation-name
  • @keyframe으로 정의된 이름
• animation-duration
  • 애니메이션의 지속시간 (s)
• animation-delay
  • 애니메이션의 지연시간 (s)
• animation-fill-mode
  • 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
  • none :  애니메이션이 끝나고 원래 상태로 돌아옴
  • forwards : 애니메이션이 끝난 후에 상태를 유지함
  • backwards : 애니메이션이 시작할 때, 처음 상태(0%)를 적용하고, 끝난 후에 기존 CSS를 적용
  • both : forwards와 backwards를 둘 다 적용
• animation-iteration-count
  • 애니메이션이 반복되는 횟수 
  • {number} : {number} 만큼 애니메이션을 반복
  • infinite : 무한 반복

 

transform (2D)

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

 

여기에선, 2D에 대한 내용들만 정리했다. 더 많은 내용들은 MDN에서 볼 수 있다.

 

이 속성의 속성값으로는 아래와 같은 함수들을 사용할 수 있다.

• translate(x, y)
  • 요소를 x축과 y축으로 이동
• scale(x, y)
  • 요소를 x축과 y축만큼 확대
• rotate(deg)
  • deg만큼 시계방향으로 회전

 

transform-origin (2D)

transform에 대한 기준점을 설정할 수 있다

 

기본적으로 transform-origin은 요소의 가운데(center)로 설정되어있다.

 

Z축 값도 설정이 가능하지만, 여기서는 2D의 내용만 정리한다.

 

기본적으로는 아래의 구성을 따른다.

transform-origin: center
혹은
transform-origin: {x축 위치} {y축 위치}

 

위치에 대한 값은 다음 값들이 들어갈 수 있다.

• left
• right
• top
• bottom
• center
• {number}
  • px, rem과 같은 단위들을 이용해서 설정할 수 있다.

 

 

참조자료

• 프로그래머스 데브코스 2기 강의
• MDN