Learn!!
- 배치(position)
- flex 정렬
- transition(변환)
- transform(전환)
1. 배치(position)
- 요소의 위치 지정 기준
- position 속성의 값으로
absolute, fixed가 지정된 요소는 display 속성이 block으로 변경 top, bottom, left, right, z-index: position과 같이 사용하는 CSS 속성들로 모두 음수 사용 가능static: 기본값relative: 요소 자신을 기준
- 2번 박스가 자기 자신을 기준으로
top: 30px; left: 200px;만큼 움직임
- 하지만 우리눈에 보이는 옮겨진 위치는 허상된 포지션이라고 보며, 실제로는 1번 박스와 3번 박스 사이 원래의 자리에 위치해 있음(실제로 거의 사용되지 않음)
- 따라서 3번 박스는 원래 2번 박스의 자리로 딸려오지 않고 원래 2번 박스의 자리 밑에 위치하게 됨.
- 2번 박스가 자기 자신을 기준으로
absolute: 위치 상 부모 요소를 기준
- 위치상의 부모 요소, 기준으로 할것에
position: relative;설정해줘야 함 - 부모요소가 될것을 찾지 못하면 최상위 요소를 기준으로 배치하게 됨
- 위치상의 부모 요소, 기준으로 할것에
fixed: 뷰 포트(브라우저를 기준)
- 웹페이지의 헤더나, 고정된 배너를 스크롤을 내려도 고정시키고 싶을때 사용할 수 있음.
-
sticky: 스크롤 영역 기준 -
요소 쌓임 순서
z-index
- auto(기본값) : 부모요소와 동일한 쌓임 정도
- 숫자 : 숫자가 높을수록 위에 쌓임, 일반적인 요소보다 더 뒤로 보내고 싶은 경우
-1을 사용함.- z-index 값이 아무리 높아도 position 값이 지정되어 있지 않으면 position이 지정되어 있는 요소보다 위로 배치 할 수 없다.
- 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정
조건 1: 요소에 position 속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)조건 2: 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임조건 3: 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
2. flex(정렬)
1) Flex Container
display,flex-flow,flex-direction,flex-wrap,justify-content,align-content,align-items
display
display: flex;-> 블록 요소와 같이(위에서 아래로 수직으로 쌓임) Flex Container 정의display: inline-flex;-> 인라인 요소(왼쪽에서 오른쪽으로 수평으로 쌓임)와 같이 Flex Container 정의
flex-direction : 수평 또는 수직의 주축을 설정
- row : 행 축 (좌 => 우)
- row-reverse : 행 축 (우 => 좌)
- column : 열 축 (위 => 아래)
- column-reverse : 열 축 (아래 => 위)
flex-wrap : Flex Items의 줄바꿈 여부
- nowrap(기본값) : 줄 바꿈 없음
- 요소들의 크기가 컨테이너의 크기보다 크면 요소의 크기가 컨테이너의 크기에 맞춰 줄어들어 한줄로 정렬됨
wrap: 여러 줄로 묶음
justify-content
- 주 축의 정렬 방법
flex-start(기본값): Flex-Items를 시작점으로 정렬flex-end: Flex-Items를 끝점으로 정렬center: Flex-Items를 가운데 정렬- space-between : 각 Flex Item 사이를 균등하게 정렬
- space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
align-content
- 교차 축(수직)의 여러 줄 정렬 방법
- Item들이 한줄이 아닌 두줄 이상이어야 사용 가능함
stretch(기본값): Flex-Items를 시작점으로 정렬flex-start: Flex-Items를 시작점으로 정렬
- 1번의 사진이
align-content: stretch;기본값이 적용된 사진- 2번의 사진이
align-content: flex-start가 적용되어 전체 컨텐츠가 위쪽으로 정렬됨flex-end: Flex-Items를 끝점으로 정렬center: Flex-Items를 가운데 정렬
- space-between : 각 Flex Item 사이를 균등하게 정렬
- space-around : 각 Flex Item의 외부 여백을 균등하게 정렬
align-items
- 교차 축의 한 줄 정렬 방법, align-content 보다 자주 쓰임
stretch: Flex Items를 교차 축으로 늘림flex-start: Flex Items를 각 줄의 시작점으로 정렬flex-end: Flex Items를 각 줄의 끝점으로 정렬
center: Flex Items를 각 줄의 가운데 정렬- baseline : Flex Items를 각 줄의 문자 기준선에 정렬
2) Flex Items
order,flex,flex-grow,flex-shrink,flex-basis,align-self
flex-order
- flex item의 순서
- 0(기본값) : 순서 없음
- 숫자 : 숫자가 작을수록 앞에 정렬 됨
flex-grow
- flex item의 증가 너비 비율.
- 0 : 증가 비율 없음
- 숫자 : 증가 비율
flex-shrink
- flex item의 감소 너비 비율.
- 1(기본값) : Flex Container 너비에 따라 감소 비율 적용
- 수평정렬을 할때 칸(너비)가 모자르면 요소들이 비율에 맞지않게 찌그러들면서 줄어드는데 이때
flex-shrink: 0;을 사용하면 컨테이너가 줄어도 지정된 요소의 크기를 유지할 수 있다.- 숫자 : 감소 비율
flex-basis
- flex item의 공간 배분 전 기본 너비.
- auto(기본값) : 요소의 Content 너비
3. transition(전환)
- 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성
- 속성명 / 지속시간 / 타이밍함수 / 대기시간
- 지속시간은 단축형으로 작성할 때, 필수 포함 속성!
1) transition-property
- 전환 효과를 사용할 속성 이름을 지정
- all : 모든 속성에 적용
- 속성이름 : 전환 효과를 사용할 속성 이름 명시
- 아래의 코드와 같이
,를 사용하여 각각의 속성에 적용할 수 있다.
div {
transition:
width .5s,
background-color .2s;
}2) transition-duration
- 전환 효과의 지속시간을 지정
- 0s : 전환 효과 없음
- 시간 : 지속시간(s)을 지정
3) transition-timing-function
- 전환 효과의 타이밍(Easing) 함수를 지정
4) transition-delay
- 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
- 0s : 대기시간 없음
- 시간 : 대기시간(s)을 지정
div{
transition: width 1s .5s
}
// 0.5초의 대기시간 뒤 너비속성에 1초간 동작4. transform(변환)
1) 2D 변환 함수
- 이동, 회전, 크기, 기울임을 변경
2) 3D 변환 함수
rotateX(x),rotateY(y)는 3D 변환 함수이다.- 3D처럼 보이기 위해서는 원근법을 가져야하며 속성 제일 앞에
perspective(px)를 작성해야한다!
perspective 속성과 함수의 차이점
- 함수를 사용하면 원근거리를 관찰 대상에 직접 부여
- 속성을 사용하면 원근거리를 관찰 대상의 부모에 부여
- 개인의 차이는 있지만 속성을 사용하여 원근거리를 표현하는것을 권장함
backface-visibility
- 3D 변환으로 회전된 요소의 뒷면 숨김 여부
- visible(기본값)
- hidden
- 두개의 이미지를 겹쳐서 하나는 visible, 다른 하나는 hidden으로 설정하여 클릭시 뒤집히며 다른 이미지 또는 정보를 보여줄때 활용 할 수 있다.
be driven