오늘은 CSS에서 사용할 수 있는 calc()함수, 위치 속성 position, 그리고 애니메이션 속성인 transition에 대해 배웠다. 실무에서 정~말 많이 써 왔던 것들인데 개념정리 부터 다시 복습해보니 머릿속에 복잡하게 자리 잡고 있던 것들이 깔끔하게 정리가 된 느낌이다!!
1. calc()
calc() 이라는 함수를 이용하면, 괄호 안의 사칙연산을 수행한 결과를 속성값으로 사용할 수 있다.
덧셈, 뺄셈
.item1{
background: red;
width: calc(50px + 50px);
height: 50px;
}
.item2{
background: blue;
width: calc(100% - 120px);
height: 50px;
}❗️ calc() 함수 사용시 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백 주어야 함!!
곱셈, 나눗셈
.item3{
background: green;
width: calc(2*100px);
height: 50px;
}
.item4{
background: orange;
width: calc(100%/4);
height: 50px;
}2. position
position이란 HTML 요소가 배치 되는 방식을 결정하는 속성이다.
2-1. position : static
문서 상 원래 있어야 하는 위치에 배치된다.
❗️이때는 top, left, bottom, right 속성을 사용할 수 없다.
2-2. position : relative
원래 있던 자리를 기준 으로 요소의 위치를 조정할 수 있다.
top, left, bottom, right 속성 적용이 가능하다.
2-3. position : absolute
절대 좌표를 기준 으로 요소의 위치를 조정할 수 있다.
대상 요소의 부모 중 relative가 적용 된 요소 를 찾아서 절대 좌표의 기준으로 삼게 된다.
top, left, bottom, right 속성 적용이 가능하다.
2-4. position : fixed
viewport를 기준 으로 요소의 위치를 조정할 수 있다.
상단에 고정된 header를 만들 때 많이 사용된다!
top, left, bottom, right 속성 적용이 가능하다.
2-5. position : sticky
부모 요소의 좌표 기준 으로 요소의 위치를 조정할 수 있다.
스크롤을 내려가지 않았을 때는 static처럼 작동하다가,
해당요소의 위치 아래로 스크롤이 내려가면 지정한 좌표에 고정시켜 준다.
3. z-index
position을 이용해 요소의 위치를 옮길 때 뭐가 더 앞으로 나와야 하는지 우선 순위를 정해야 할 때 사용한다.
값이 높을 수록 상대적으로 앞에 배치된다!
4. transition
css속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 만들어 줄 수 있다.
아래 예제에서 앞에 써준 시간이 transition-duration이고, 뒤에 써준 시간이 transition-delay다.
이 예제는 오늘 스프린트 시간에 했던 건데, 배경색 변경과 width값의 증가 애니메이션을 동시에 적용시켜 주는 코드이다!
.btn3 {
transition: background-color 0.3s ease-in-out, width 0.3s ease-in-out 0.6s;
}