CSS Tip
background
background-image: url("");
: 이미지 삽입
background-attachment: scroll;
: 스크롤 생성
parallax(페럴렉스) :
background-attachment: fixed;
: 배경은 그대로 있고 요소만 움직여 배경을 부분부분 보여지도록 스크롤링.
배치
position
-
relative : 요소 자신을 기준
-
absolute : 위치 상 부모 요소를 기준 ( relative를 갖은 부모가 스스로 기준이 되어 있어야 기준 적용한 부모가 된다. => 기준으로 할 부모요소에 position: relative 부여 )
-
fixed : 뷰포트(브라우저) 기준
요소 쌓임
-
작성 구조의 순서에 따라 쌓인다.
-
position을 부여하면 요소쌓임 순서에 우선한다. (relative, absolute, fixed)
z-index:1;
: 양수 값을 넣으면 사용자로부터 더 가까이 있도록 한다.(클수록 위에 쌓인다.)
flex 정렬
수직 정렬 되어있는 block 요소(flex item)의
부모요소(flex container)에
display: flex;
: 수평 정렬을 부여하여 한다.
- container에 부여하는 속성
display
flex-flow
flex-direction
flex-wrap
justify-content
align-content
align-items
- item에 부여하는 속성
order
flex
flex-grow
flex-shrink
flex-basis
align-self
*** container에 부여하는 속성
flex-direction:row;
: 주 축 정렬(row, row-reverse, column, column-reverse )
=> row:수평정렬, column:수직정렬
flex-wrap: wrap;
: 줄바꿈 할수 있도록 함.
justify-content: center;
: 주 축(기본 row-수평정렬이 주축) 기준 정렬
( 기본=flex-start, flex-end, center, space-between, space-around )
align-content: center;
: 교차 축 기준 여러줄 정렬 방법
( 기본=stretch, flex-start, flex-end, center, space-between, space-around )
align-items: center;
: 교차 축 기준 한 줄 정렬 방법, 각 줄에 대한 정렬
( 기본=stretch, flex-start, flex-end, center, baseline )
*** item에 부여하는 속성
order:2;
: item에 부여하며 item의 순서 정렬.
flex-grow: 1;
: item의 증가 비율(1:1:1)
flex-shrink: 1;
: item의 감소 비율(1:1:1)
전환
transition
=> 전환 효과를 지정해주는 단축 속성
transition:
속성명지속시간타이밍함수대기시간;
: 속성명 지속시간, 속성명 지속시간, 속성명 지속시간; (쉼표를 넣고 여러개 설정 가능)
transition-property: 속성이름;
transition-duration: 지속시간;
: 0s
transition-timing-function: 타이밍함수;
: ease, linear, ease-in, ease-out, ease-in-out ...
transition-delay: 대기시간;
변환
transform
transform: 변환함수1 변환함수2 변환함수3...;
transform: 원근법 이동 크기 회전 기울임;
- 2D 변환 함수
translate(x,y)
translateX(x)
translateY(y)
scale(x,y)
rotate(45deg)
skewX(x)
skewY(y)
- 3D 변환 함수
rotateX(x)
rotateY(y)
perspective(n)
*** perspective 함수와 속성의 차이
-
속성은 부모요소에 설정하여 부모요소의 중앙 시점
-
함수는 자식 요소 , 원근 표현을 하는 요소의 중앙 시점에서 원근감
( 속성으로 사용하는것을 권장 한다. )
backface-visibility: hidden;
: 뒷면 안 보이게 하기
