CSS에서 함수 사용
함수
지정된 기능을 수행하는 요소
calc( )
- 괄호 안의 사칙연산 결과를 속성값으로 사용가능
- 덧셈, 뺄셈 기호 앞 뒤에 반드시 공백
width: clac(50px + 50px)
width: clac(100% - 10px)
width: clac(2*100px)
width: clac(100%/4)Position
- HTML 요소가 배치되는 방식을 결정하는 속성
- position에 입력된 속성값에 따라 요소의 좌표값을 변경하는 방식이 달라짐
top,left,bottom,right을 사용하여 좌표값 변경
position의 속성값
-
static (기본값)
문서상 원래 있어야 하는 위치에 배치됨- 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임
top, left, bottom, right 속성 사용 불가
-
relative
원래 있던 자리(static)를 기준으로 요소의 위치를 조정- 각 방향을 기준으로 태그 안쪽 방향으로 이동
.top {
position: relative;
top: 5px;
z-index: 1;
}
.right {
position: relative;
right: 5px;
}
.bottom {
position: relative;
bottom: 5px;
}
.left {
position: relative;
left: 5px;
}- absolute
- 절대 좌표를 기준으로 요소의 위치를 조정
- 대상 요소의 부모 중
position : relative 속성인 조상을 절대 좌표의 기준으로 삼는다 - 해당되는 조상이 없다는
<body>가 기준
#parent {
position: relative;
width: 100px;
height: 100px;
background: skyblue;
}
#child {
position: absolute;
right: 0;
}-
fixed
viewport를 기준으로 요소의 위치를 조정- ex) 네비게이션바
-
sticky
부모 요소의 좌표를 기준으로 요소의 위치를 조정- 스크롤이 내려가지 않을 때는 static 처럼 작동
- 해당 요소의 위치 아래로 스크롤이 내려가면 지정 좌표에 고정
z-index
- 여러 개의 요소가 겹쳐지는 경우 앞으로 나오는 우선 순위를 지정
z-index: auto (기본값)
z-index: 1
z-index: 9990Transition
transition 사용법
transition-property
- transition을 적용할 속성(property)을 지정
transition-property: color, transformtransition-duration
- transition에 걸리는 시간을 지정
- 초(s), 밀리초(ms) 단위로 지정 가능
transition-duration: 0.2stransition-timing-function
- transition의 속도 패턴을 지정
transition-timing-function: linear /*동일한 속도로 이벤트 진행*/
transition-timing-function: ease-in /*처음엔 느리게 시작, 마지막엔 빠르게 진행*/
transition-timing-function: ease-out /*처음엔 빠르게 시작, 마지막은 느리게 진행*/
transition-timing-function: ease
/*처음엔 천천히 시작, 중간에 빨라지고, 마지막엔 느리게 진행*/
/*ease-in-out과 동일한 형태지만 보다 가파르게 진행*/
transition-timing-function: ease-in-out
/*처음엔 천천히 시작, 중간에 빨라지고, 마지막엔 느리게 진행*/
/*ease와 동일한 형태지만 보다 완만하게 진행*/transition-delay
- transition 요청을 받은 후 실제로 실행되기까지 기다려야 하는 시간을 지정
- 초(s), 밀리초(ms) 단위로 지정 가능
transition-delay: 2sTransition 속성 한줄 작성
/*transition: property duration timint-function delay*/
/*어떤 요소를, 얼마나 오래, 어떤 방식으로, 언제 실행*/
transition: color 0.4s ease-in-out 1s
Keep going