4~5일차
Position
-
relative(상대 위치 지정 방식) : 요소 자신을 기준으로 배치
position: relative; top: 30px; left: 30px;
- absolute(절대 위치 지정 방식) : 위치 상 부모 요소를 기준으로 배치
position: absolute
position : absolute;
top: 30px;
right: 30px;
*부모 기준으로 위:30px, 오른쪽:30px 씩 움직인다.
- fixed(고정 위치 지정 방식) : 뷰포트(브라우저)를 기준으로 배치
요소 쌓임 순서(Stack Order)
- 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
- 요소에 position 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
z-index
- 요소의 쌓임 정도를 지정
auto: 부모 요소와 동일한 쌓임 정도
숫자: 숫자가 높을수록 위로 쌓인다.
배경
-
background-color : 요소의 배경색상
transparent: 투명함
색상: 지정 가능한 색상 -
background-image : 요소의 배경 이미지 삽입
none: 이미지 없음
url("경로"): 이미지 경로
<style>
div{
background-color: yellow;
background-image: url("");
width : 400px;
height : 400px;
}
</style>
-
background-repeat : 요소의 배경 이미지 반복
repeat: 이미지를 수직, 수평 반복
repeat-x: 이미지를 수평 반복
repeat-y: 이미지를 수직 반복
no-repeat: 반복 없음 -
background-position : 요소의 배경 이미지 위치
방향 :top,bottom,left,right,center
단위 :px,em,rem등 단위로 지정background-repeat : no-repeat; background-position: 40px 50px;
-
background-size : 요소의 배경 이미지 크기
단위 :px,em,rem등
cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤 -
background-attachment : 요소의 배경 이미지 스크롤 특성
scroll: 이미지가 요소를 따라서 같이 스크롤
fixed: 이미지가 뷰포트에 고정, 스크롤X
local: 요소 내 스크롤 시 이미지가 같이 스크롤
Flex
-
flex-direction
row: 행 축(좌 -> 우)
row-revrse: 행 축(우 -> 좌)
column: 열 축 (위 -> 아래)
column-reverse: 열 축(아래 -> 위)
flex-direction : row;
flex-direction : row-reverse;
flex-direction : column;
flex-direction : column-reverse;
-
flex-wrap
nowrap: 묶음(줄 바꿈) 없음
wrap: 여러 줄로 묶음
wrap-reverse: wrap의 반대 방향으로 묶음display: flex;
display:flex; flex-wrap:wrap;
-
justify-content : 주 축의 정렬 방법
flex-start: flex items를 시작점으로 정렬
flex-end: flex items를 끝점으로 정렬
center: flex items를 가운데 정렬
space-between: 각 flex item 사이를 균등하게 정렬
space-around: 각 flex item의 외부 여백을 균등하게 정렬justify-content: flex-end;
justify-content: center;
justify-content : space-between;
justify-content : space-around;
justify-content : space-evenly;
-
align-items : 교차 축의 한 줄 정렬 방법
stretch: flex items를 교차 축으로 느림
flex-start: flex items를 각 줄의 시작점으로 정렬
flex-end: flex items를 각 줄의 끝점으로 정렬
center: flex items를 각 줄의 가운데 정렬
baseline: flex items를 각 줄의 문자 기준선에 정렬display : flex; flex-wrap: wrap; *저 박스 크기는 원래 100인데 늘어난거임
fisplay : flex; flex-wrap: wrap align-items: flex-start;
align-items : flex-end;
align-items : center;
- align-content : 교차 축의 여러 줄 정렬 방법
stretch: flex items를 시작점으로 정렬
flex-start: flex items를 시작점으로 정렬
flex-end: flex items를 끝점으로 정렬
center: flex items를 가운데 정렬
space-between: 각 flex item 사이를 균등하게 정렬
space-around: 각 flex item의 외부 여백을 균등하게 정렬
전환(Transform)
transform : 변환함수1 변환함수2 변환함수3 ... ;
transform : 원근법 이동 크기 회전 기울임;2D 변환 함수
1.px
translate(x,y): 이동(x축, y축)translateX(x): 이동(x축)translateX(y): 이동(y축)
- 없음(배수)
scale(x,y): 크기(x축, y축)scaleX(x): 크기(x축)scal(y): 크기(y축)
deg
rotate(degree): 회전(각도)skew(x,y): 기울임(x축, y축)skewX(x): 기울임(x축)skewY(y): 기울임(y축)
- 그 외
matrix(n,n,n,n,n,n,n): 2차원 변환 효과
3D 변환 함수
-
translateZ(z): 이동(z축) -
translate3d(x,y,z): 이동(x축, y축, z축) -
scaleZ(z): 크기(z축) -
scale3d(x,y,z): 크기(x축, y축, z축) -
perspective(n): 원근법(거리) -
roatateX(x): 회전(x축) -
rotateY(y): 회전(y축) -
rotateZ(z): 회전(z축) -
rotate3d(x,y,z,a): 회전(x축, y축, z축, 각도) -
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n): 3차원 변환 효과전환(Transition)
요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition: 속성명 지속시간 타이밍함수 대기시간;
- transition-property
all: 모든 속성에 적용속성이름: 전환 효과를 사용할 속성 이름 명시
- transition-duration
0s: 전환 효과 없음시간: 지속시간(s)를 지정
- transition-timing-function
ease: 느리게 - 빠르게 - 느리게
linear: 일정하게
ease-in: 느리게 - 빠르게
ease-out: 빠르게 - 느리게
ease-in-out: 느리게 - 빠르게 - 느리게
cubic-bezier(n, n, n, n): 자신만의 값을 정의(0~1)
steps(n): n번 분할된 애니메이션
- transition-delay : 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
0s: 대기시간 없음시간: 대기시간(s)를 지정
