position
position 속성
- 요소의 위치 지정 방식을 설정
- static 은 position 속성을 없앤 상태 (보통은 none이 속성X인 상태)
| 값 | 의미 |
| static | 지정 방식 없음 (기본값) |
| relative | 요소 자신을 기준으로 배치 |
| absolute | 부모 요소를 기준으로 배치 |
| fixed | 브라우저(뷰포트)를 기준으로 배치 |
| sticky | 스크롤 영역을 기준으로 배치 |
position과 함께 사용하는 속성
- position 기준에 맞는 위, 아래쪽 거리를 설정
- position 기준에 맞는 왼쪽, 오른쪽 거리를 설정
| 값 | 의미 |
| auto | 브라우저가 계산 (기본값) |
| 단위 | px, em 등 단위로 지정 |
| % | - 위치상의 부모요소의 height (top, bottom) 또는 width (left, right) 비율로 지정 - 음수값 허용 |
position - relative
- 원래 있던 자리를 기준으로 이동 (상대적 이동)
- 다른 요소가 이동한 요소가 있던 자리를 차지하지 않음
position - absolute
- 조상 요소의 position 기준
- 조상 요소에게 postition 속성이 없다면 전체 뷰포트 기준
- 브라우저 전체를 기준으로 이동 → 아님
- absolute 설정 시 너비 100%가 깨짐 → 수동으로 width: 100% 넣어줘야 함
- position 속성(static을 제외)이 부모에 있다면 부모 기준으로 위치 지정
- 조상도 position 속성이 있고 부모도 position 속성이 있다면 가까운 조상, 즉 부모가 기준
- 보통 기준으로만 부모요소에 position 사용할 땐 relative 사용 (위치 예상이 쉬우니까)
position - fixed
- 언제나 화면전체 기준으로 움직임
- 원래 자리를 뺏김
- header { position: fixed }
- 스크롤 해도 화면에서 계속 따라다니는 메뉴 ( ex. top버튼, 챗봇상담버튼 등 )
/* position absolute, fixed를 걸면
width의 기본값 100% 가 깨진다 */
width: 100%;
/* 언제나 화면전체 기준으로 움직임 */
position: fixed;
top: 0;
/*
인라인 요소에 float이나
position absolute 걸면
자동으로 블록요소로 변경됨
*/
span {
width: 200px;
height: 200px;
background: orange;
font-size: 3em;
margin-top: 150px;
/* display: block; */
/* float: left; */
/* position: absolute; */
}
요소 쌓임 순서 (Stack order)
- static을 제외한 position 속성의 값이 있을 경우 가장 위에 쌓임
- position이 존재한다면 z-index 속성의 숫자값이 높을수록 위에 쌓임
- position이 존재하고 z-index 속성의 숫자값이 같다면 나중에 작성한 요소일수록 위에 쌓임
.box2 {
position: relative;
left: 100px;
z-index: 1;
}
.box4 {
position: relative;
z-index: -1;
}
// 모든 박스에 position 있을 때 박스4 z-index -1로 제일 낮아서 제일 아래로
** position 사용 시 요소가 안 보일 때 주의!
개발자 도구로 검사해서 뒤로 배치되어 보이지 않는 지 확인 필요
** 텍스트 중앙 정렬 (가로, 세로)
/* 텍스트 중앙 정렬 */
/* x축 */
text-align: center;
/* y축 */
/* height = lineheight */
line-height: 100;
/* flex 활용 */
display: flex;
justify-content: center;
align-items: center;
transition
- 트랜지션은 hover 적용한 css가 아닌 원본 요소에 속성 지정
.box {
width: 100px;
height: 100px;
background: red;
margin: 50px;
transition-property: all; /* 기본값 */
transition-duration: 5s;
transition-delay: 50ms; /* 기본값 0*/
transition-timing-function: linear; /* 기본값 ease*/
/* 단축속성 앞 duration 뒤 delay */
transition: all 1s 50ms linear;
}
.box:hover {
width: 300px;
background: greenyellow;
}| 개별속성 | 의미 |
| transition-property | 전환 효과를 사용할 속성명 |
| transition-duration | 전환 효과의 지속시간 설정 |
| transition-timing-function | 타이밍 함수를 지정 |
| transition-delay | 전환 효과의 대기시간 설정 |
transition-property
| 값 | 의미 |
| all | 모든 속성에 적용 (기본값) |
| 속성이름 | 전환효과를 적용할 속성 이름 |
transition-duration
- 전환 효과의 지속시간을 설정
- 밀리초(ms) 1000분의 1초, 기본값 0s
transition-delay
- 전환 효과가 몇 초 뒤에 시작할지 대기 시간을 설정
- 초, 밀리초 단위지정: 기본값 0s
transition-timing-function
| 값 | 의미 | cubic-bezier 값 |
| ease | 빠르게 - 느리게 (기본값) | 0.25, 0.1, 0.25, 1 |
| linear | 균일하게 | 0, 0, 1, 1 |
| ease-in | 느리게 - 빠르게 | 0.42, 0, 1, 1 |
| ease-out | 빠르게 - 느리게 | 0, 0, 0.58, 1 |
| ease-in-out | 느리게 - 빠르게 - 느리게 | 0.42, 0, 0.58, 1 |
| cubic-bezier (n,n,n,n) |
수동으로 설정 | |
| steps(n) | n번 분할된 애니메이션 |
단축속성
| transition: 속성 지속시간 딜레이 타이밍함수; |
- 앞 duration 뒤 delay
- transition: all 1s 50ms linear;
- transition: 2s; → all 2s 0 ease
transform
| transform: 변환함수1, 변환함수2, 변환함수n; |
- 요소를 변형시킬 때 사용
** vs position
- 이동해서 그 자리에 계속 있을 거면 position (ex 드래그 앤 드랍)
- 애니메이션의 일부는 transform translate() 사용
.box {
width: 200px;
height: 200px;
background: orange;
margin: 50px;
font-size: 50px;
display: flex;
justify-content: center;
align-items: center;
transition: 1s;
}
.box1:hover {
/* 회전 효과 */
transform: rotate(720deg);
/* 반시계 방향은 음수 */
/* transform: rotate(-720deg); */
}
.box2:hover {
/* 이동 효과 */
transform: translate(50px, 30px);
/* position은 트랜지션 적용이 안 됨 */
/* position: relative;
left: 50px;
top: 30px; */
}
.box3:hover {
transform: scale(1.2);
/* 축소 */
/* transform: scale(0.7); */
}
.box4:hover {
/* 비틀기 효과 */
transform: skew(10deg, 0);
transform: skew(0, 10deg);
}
.box5:hover {
transform: rotate(360deg) scale(1.2) translate(100px);
}
transform 2D 변환 함수
| 함수 | 의미 | 단위 |
| translate(x, y) | 이동(X축, Y축) | px, % 등 |
| translateX(x) | 이동(X축) | px, % 등 |
| translateY(y) | 이동(Y축) | px, % 등 |
| scale(x, y) | 크기(X축, Y축) | 배수 |
| scaleX(x) | 크기(X축) | 배수 |
| scaleY(y) | 크기(Y축) | 배수 |
| rotate(degree) | 회전(각도) | deg |
| skew(x-deg, y-deg) | 기울임(X축, Y축) | deg |
| skewX(x-deg) | 기울임(X축) | deg |
| skewY(y-deg) | 기울임(Y축) | deg |
| matrix(n,n,n,n,n,n) | 2차원 변환 효과 | 없음 |
+ 새로운 개념
Throatle, Debounce
요즘엔 아이디 중복검사를 실시간으로 시행하는 걸 볼 수 있는데
이는 db를 계속 조회하기 때문에 서버트래픽에 부담이 되고, 또 공격 취약점이 될 수 있음
그래서 입력 후 딜레이를 줘서 조회 횟수를 줄이는 방식을 사용
자바스크립트로 두 가지 방식이 있는데 간단히 차이점만 염두에 두고
해당 수업 때 추가 학습하고자 함
쓰로틀 Throatle
이벤트를 일정 주기마다 실행
디바운싱 Debounce
연속적인 이벤트를 모아 한 번에 처리
