TIL - CSS (position / transition)

단위 심화

함수란?

함수란, 특정한 기능을 가지고 있는 상자 같은 것

calc()

calc() 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용가능

덧셈, 뺄셈

❗ calc() 함수 사용시 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백을 주어야 합니다.

곱셈, 나눗셈

position

position 이란?

• HTML 요소가 배치되는 방식을 결정하는 속성
• static / relative / absolute / fixed / sticky 5가지 속성
• top / left / bottom / right 4가지 속성은 해당 방향 기준으로 요소의 좌표 값을 변경

position의 속성값

• position : static(기본값) 요소를 문서상 원래 있어야 하는 위치에 배치된다.
  • ❗️이때는 top, left, bottom, right 속성을 사용할 수 없다.
    즉, 위치 조정이 불가능한 기본 HTML 요소의 상태!
• position : relative 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다.
  • top, left, bottom, right 속성 적용 가능
• position : absolute 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다.
  • 대상 요소의 부모 중 relative가 적용 된 요소 를 찾아서 절대 좌표의 기준으로 삼게 된다.
  • 만일, relative가 적용 된 요소가 없다면, HTML의 바디 전체를 기준으로 잡게 된다.
  • top, left, bottom, right 속성 적용 가능
• position : fixed viewport를 기준으로 요소의 위치를 조정할 수 있다.
  • 스크롤을 내려도 사라지지 않고 화면 어딘가에 고정되어 있는 메뉴를 생각하면 된다.
  • top, left, bottom, right 속성 적용 가능
• position : sticky 요소의 원래 위치에 있다가 스크롤이 내려가면 지정한 좌표에 고정된다.
  • 최근에 추가된 속성
  • 부모 요소의 좌표 기준으로 요소의 위치를 조정할 수 있다.

z-index

• 여러 개의 요소가 겹쳐져 있을 때, 무엇이 앞으로 나올지 결정하는 속성
• position을 이용해 요소의 위치를 옮기다 보면 여러 개의 요소가 겹쳐지는 경우가 생기는데
  그런 상황에서 사용하기 좋은 속성이다.

z축이란?

우리가 흔히 아는 2차원 공간을 3차원 공간으로 확장하게 되면 z축 이 하나 더 생기게 됩니다.

transition

transition

• CSS 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서
  움직임을 부드럽게 만들어 줄 수 있다.

transition 사용해보기

• **transition-property** 어떤 속성(property)에 transition을 적용할 것 인지 지정

transition-property: color,trasform

위의 코드는 color, transform 처럼 특정 프로퍼티를 지정해준 것 입니다.

• transition-duration 전환효과(transition)에 걸리는 시간 지정
  • duration은 초(s), 혹은 밀리초(ms) 단위로 지정이 가능합니다.

transition-duration: 0.2s

• **transition-timing-function** transition의 속도 패턴 지정
  • transition의 변화가 일정한 속도로 일어날 것 인지,
    아니면 빠르게 시작했다가 느리게 끝날 것 인지 같은 속도 패턴을 지정한다.
    - ease-in-out : 천천히 시작했다가, 정상 속도가 됐다가, 빠르게 끝난다.
    - linear : 일정한 속도로 변화한다다.
    - ease : 시작할때는 빨라지다 느려진다다.
    - ease-in : 천천히 시작했다가 속도를 높여 끝난다.
    - ease-out : 빠른 속도로 시작했다가, 천천히 끝난다.

transition-duration: ease-in-out | linear | ease | ease-in | ease-out

• **transition-delay** 전환효과(transition)가 시작되기까지 걸리는 시간을 지정
  • delay는 초(s), 혹은 밀리초(ms) 단위로 지정이 가능합니다.

transition-delay: 2s

transition 속성 한번에 적어주기!

참고

[인프런x코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
https://inf.run/uzui