calc() 함수
calc() 이라는 함수를 이용하면 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용할 수 있다. 단 이때 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백을 줘야 한다.
position
position이란 HTML 요소가 배치되는 방식을 결정하는 속성이다.
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•
최근에 추가된 속성이며, 부모 요소의 좌표 기준 으로 요소의 위치를 조정할 수 있다.
•
스크롤을 내려가지 않았을 때는 static 처럼 작동하다가 해당요소의 위치 아래로 스크롤이 내려가면 지정한 좌표에 고정시켜 줍니다.
z-indexposition을 이용하여 요소의 위치를 옮길 때 무엇이 더 앞으로 나와야 하는지 우선 순위를 정할 수 있다. z-index 는 이런 상황에 사용 가능하다.
z-index: auto (기본값)
z-index: 1
z-index: 9990
CSS
복사
transition
트랜지션을 통해 애니메이션을 추가하여 움직임을 부드럽게 만들어줄 수 있다.
transition-property어떤 속성(property)에 transition을 적용할 것 인지를 지정한다.
transition-property: color,trasform
Plain Text
복사
transition-durationtransition에 걸리는 시간 을 지정한다. (duration은 초(s), 혹은 밀리초(ms) 단위로 지정이 가능하다.)
transition-duration: 0.2s
Plain Text
복사
transition-timing-functiontransition의 속도 패턴을 지정한다.
패턴 | 설명 |
ease-in-out | 천천히 시작, 정상 속도가 됐다가 빠르게 끝난다. |
linear | 일정한 속도로 변화한다. |
ease | 시작할때는 빨라지다 느려진다. |
ease-in | 천천히 시작했다가 속도를 높여 끝난다. |
ease-out | 빠른 속도로 시작했다가, 천천히 끝난다. |
transition-delay•
transition 요청을 받은 후 실제로 실행되기까지 기다려야 하는 시간을 지정한다. 즉, 전환효과(transition)가 시작되기까지 걸리는 시간을 지정합니다.
•
delay는 초(s), 혹은 밀리초(ms) 단위로 지정이 가능합니다.
transition 속성을 한번에 적어줄 수 있다.