🔗 이어서...
정말 단순한, 정적인 html에 스타일을 입힐 때, 글자와 배경 혹은 이미지의 디자인도 중요하지만 이런 텍스트와 요소들을 어떻게 위치시킬 것인지, 그 위치에 어떤 효과를 입힐 것인지, 생각 할 수 있어야 한다.
🔗 position : 요소의 위치 지정 기준
- position:static; 포지션 기준 없음= 값이 없음
- position:relative; 요소 자신을 기준
- position:absolute; 위치 상 부모 요소를 기준
= 부모의 relative값이 없으면 위치 상 viewport가 부모가됨 - position:fixed; 뷰포트(브라우저)를 기준
= absolute, fixed가 지정된 요소는 display속성이 블럭요소로 변경됨.
= 배치의 기준이 바뀌면 다른 아이템들과 상호작용하지않음.
📌 요소 쌓임 순서 - 어떤 요소가 사용자와 더 위에 쌓이는지 결정
1. 요소에 position속성의 값이 있는 경우 위에 쌓임.(기본값 static 제외)
2. 1번 조건이 같은 경우, z-index속성의 숫자 값이 높을수록 위에 쌓임
3. 1번과 2번 조건까지 같은 경우, HTML에서 나중에 작성된 코드일 수록 위에 쌓임
📖 Position 실습해보기
- container 요소의 포지션을 realtive로 잡고 item1, 2, 3 중에 item1, item2의 포지션을 absolute로 지정하였다. 포지션의 값이 같으므로 나중에 작성된 item2가 제일 위로 쌓인다.
- 첫번째와 같은 상황에서 item1에 z-index : 1의 값을 추가하였다. item2와 item3은 z-index의 값이 기본값인 0이고, item2의 포지션의 값이 있으므로 item1 > item2 > item3의 순서로 쌓인다.
🔗 플렉스 - 1차원 레이아웃
container 부모요소
- display:flex; 수평 정렬 / 블럭 요소와 같이 Flex Container 정의 (최대너비)
- display:inline-flex; 인라인 요소와 같이 Flex Container정의 (최소너비)
- flex-dirextion; row 행축(기본값), row-reverse 반대행축, column 열축
- flex-wrap; Flex Items 묶음(줄바꿈)여부, nowrap 묶음 없음, wrap 여러 줄로 묶음
- justify-content 주 축의 정렬 방법
- flex-start 시작점으로 정렬, flex-end 끝점으로 정렬, flex-center가운데 정렬 - align-content 교차 축의 여러 줄 정렬 방법
stretch 시작점으로 정렬(기본값), flex-start, flex-end, flex-center - align-items 교차 축의 한 줄 정렬 방법
stretch, flex-start, flex-end, flex-center
flex items
{ display : flex } 속성이 담긴 부모의 자식 요소
- order - Flex Item의 순서, 숫자가 작을수록 먼저
- flex-grow; Flex Item의 증가 너비 비율, 기본값 0
- flex-shrink; Flex Item의 감소 너비 비율,
- 1 = Flex container 너비에 따라 감소 비율 적용 1대1대1비율로 작아짐.
- 0 = 실제크기를 유지하고 감소X - flex-basis; Flex Item의 공간 배분 전 기본 너비 auto(기본값) 요소의 content너비
📖 Flex Box 실습해보기
container에 주축 끝점으로 정렬, 줄 묶음 속성을 넣고, box에 증가 너비 비율을 1로 넣었다. 주축 끝점으로 정렬했으나 box의 증가 너비를 최대로 하여 기본값과 같아보이게 되었다.
여기서 .box에 flex-grow속성을 지우면 box는 200px의 너비로 오른쪽 끝점에 정렬하게 된다.
🔗 transition
요소의 전환 효과를 지정하는 단축 속성
사용법 { transition: 속성명 지속시간 타이밍함수 대기시간; }
- transition-property 전환 효과를 사용할 속성 이름을 지정 기본값all
- transition-duration 전환 효과의 지속시간을 지정(필수포함) 1s = 1초
- transition-timing-function 전환 효과의 타이밍(Easing)함수를 지정
- ease 느리게-빠르게-느리게
- linear 일정하게
- ease-in 느리게-빠르게
- ease-out 빠르게-느리게
- ease-in-out 느리게-빠르게-느리게 - transition-delay 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정
🔗transform
요소의 변환 효과
사용법 { transform: 변환함수1 변환함수2 변환함수3...;}
or { transform: 원근법 이동 크기 회전 기울임; }
-
2D 변환 함수
- px단위
translate(x,y) 이동(x축, y축)
translateX(x) 이동(x축)
translateY(y) 이동(y축)
- deg(degree)단위
rotate(deg) 회전(각도)
scale(x,y) 크기(x축, y축)
skewX(x) 기울임(x축)
skewY(y) 기울임(Y축) -
3D 변환 함수
- deg단위
rotateX(x) 회전(x축)
rotateY(y) 회전(y축)
- px단위
perspective(n) ✨원근법! 함수는 제일 앞에 작성해야함
📌 perspective
하위 요소를 관찰하는 원근 거리를 지정 단위
- 속성과 함수의 차이점
속성 : perspective: 600px; 관잘 대상의 부모에 적용 perspective-origin
함수 : transform: persfective(600px); 관찰 대상에 적용 transform-origin
+ backface-visibility 3D변환으로 회전된 요소의 뒷면 숨김 여부
visible : 보임(기본값) hidden : 숨김📖 transform 실습해보기
perspective는 부모에 적용 한 후, "잘"이라는 텍스트를 160도 회전시켰다.
backface-visibility의 값의 기본값이 visible이기 때문에 따로 작성하지 않았고, 회전 이후 "잘"이라는 글자를 숨기고 싶다면 hidden 값을 넣어주면 된다.
