[자율학습] 8일차

6.5 위치 속성으로 html 요소 배치하기

6.5.1 position 속성

• html 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치할 때 사용

position:<속성값>;

• static : 요소를 기본 흐름에 따라 배치
• relative : 요소를 기본 흐름에 따라 배치, 좌표 속성 사용 가능
  • top, right, bottom, left
• absolute : 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 따라 배치
• fixed : 요소를 기본 흐름에서 벗어나 절대적인 좌표 위치에 배치, 스크롤해도 해당 위치에 고정
• sticky : 요소를 static 값처럼 기본 흐름에 따라 배치, 지정한 좌표의 임계점에 이르면 fixed 값처럼 화면에 고정함
• z-index : position 속성으로 배치한 요소의 z축 위치 결정 가능

z-index:<정숫값>;

6.5.2 float 속성

float:<속성값>;

• none : float 속성 적용하지 않음
• left : 대상 요소를 공중에 띄워 왼쪽에 배치
• right : 대상 요소를 공중에 띄워 오른쪽에 배치

6.5.3 clear 속성

• float 속성 해제할 때 사용하는 속성

clear:<속성값>;

6.6 전환 효과 속성 적용하기

6.6.1 전환이란

• 전환 : 한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것

6.6.2 trasition-property 속성

• 전환 효과를 적용할 대상 속성을 지정

trasition-property:<속성값>;

• none : 전환 효과 속성을 지정하지 않음
• all : 모든 속성을 전환 효과 대상으로 지정

6.6.3 transition-duration 속성

• 전환 효과의 지속 시간을 설정하는 데 사용
• 단위는 초

transition-duration:<시간>;

6.6.4 transition-delay 속성

• 전환 효과의 발생 지연
• 속성값으로 지연하고 싶은 시간 작성

.red-box{
	(중략)
	transition-delay:1s;
}

6.6.5 transition-timing-function 속성

• 전환 효과의 진행 속도 지정
• 속성값으로 정해진 키워드와 cubic-bezier() 함수 사용
  • linear : 처음 속도와 마지막 속도 일정
  • ease : 처음에는 속도 점점 빨라지다 중간부터 점점 느려짐
  • ease-in : 처음에는 속도 느리다 완료될 때까지 점점 빨라짐
  • ease-out : 처음에는 속도 빠르다 완료될 때까지 점점 느려짐
  • ease-in-out : 처음에는 속도 느림, 점점 빨라지다 다시 느려짐
  • cubic-beier(p1, p2, p3,p4) : 사용자가 정의한 속도로 진행

6.6.6 transition 속성으로 한 번에 지정하기

transition:<property>, <duration>, <timing-fuction>, <delay>;

6.7 애니메이션 속성으로 전환 효과 제어하기

6.7.1 키 프레임 정의하기

• 애니메이션이 진행되는 과정에서 특정 시점에서 발생해야 하는 여러 작업을 정의하는 문법
• 시작과 종료에 해당하는 최소 2개 시점에 대한 스타일 정의되어야 함
• 0%는 애니메이션의 시작, 100%는 애니메이션의 종료 의미
  • from, to 키워드로 대체해 작성할 수 있음

@keyframes <키 프레임명> {
  0%{/*css 코드*/}
  n%{/*css 코드*/}
  100%{/*css 코드*/}
}

6.7.2 animation-name 속성

• 특정 요소에서 적용할 키 프레임명을 지정

animation-name:<키 프레임명>;

6.7.3 animation-duration 속성

• 애니메이션을 지속할 시간 설정
• 속성값으로 초나 밀리초 단위의 시간 넣을 것
• 애니메이션 속성은 한 번 실행하고 나면 실행되기 전 상태로 돌아감

animation-duration:<지속 시간>;

6.7.4 animation-delay 속성

• 애니메이션 실행 지연
• 속성값으로 초나 밀리초 단위의 시간 넣을 것

animation-delay:<지연 시간>;

6.7.5 animation-fill-mode 속성

• 애니메이션 끝나도 원래 상태로 돌아가지 않고 종료된 시점 유지할 때
• 애니메이션이 실행되기 전과 후의 스타일 지정
• 속성값
  • none
    • 실행 전 : 시작 시점의 스타일 적용하지 않고 대기
    • 실행 후 : 실행되기 전의 스타일 적용 상태로 돌아감
  • forwards
    • 실행 전 : 시작 시점의 스타일 적용하지 않고 대기
    • 실행 후 : 키 프레임에 정의된 종료 시점의 스타일 적용하고 대기
  • backwards
    • 실행 전 : 키 프레임에 정의된 시작 시점의 스타일 적용하고 대기
    • 실행 후 : 실행되기 전의 스타일 적용 상태로 돌아감
  • both
    • 실행 전 : 키 프레임에 정의된 시작 시점의 스타일을 적용하고 대기
    • 실행 후 : 키 프레임에 정의된 정료 시점의 스타일 적용하고 대기

6.7.6 animation-iteration-count 속성

• 애니메이션의 실행 횟수 조절
• 무한 사용 원할 경우 횟수에 infinite 값 넣으면 됨

animation-iteration-count:<횟수>;

6.7.7 animation-play-state 속성

• 애니메이션의 재생 상태 지정
• 속성값
  • paused : 애니메이션의 실행 일시 정지
  • running : 애니메이션 실행

6.7.8 animation-direction 속성

• 애니메이션의 진행 방향 지정

animation-direction:<속성값>;

• 속성값
  • normal : 키 프레임에 정의된 시간 순서대로 (from->to)
  • reverse : 키 프레임에 정의된 시간 역순서 (to->from)
  • alternate : 홀수는 normal, 짝수는 reverse
  • alternate-reverse : 홀수는 reverse, 짝수는 noraml

6.7.9 animation 속성 한 번에 지정하기

animation:<name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

6.8 변형 효과 적용하기

6.8.1 transform 속성

• 요소에 특정 변형 효과 지정 가능

transform:<함수>;

• 함수 예시
  • translate(x,y) : 요소를 현재 위치에서 x와 y만큼 이동
  • trnaslateX(n) : 요소를 현재 위치에서 n만큼 x축으로 이동
  • translateY(n) : 요소를 현재 위치에서 n만큼 Y축으로 이동
  • scale(x,y) : 요소를 x와 y만큼 확대 또는 축소
  • scaleX(n) : 요소를 n만큼 x축으로 확대 또는 축소
  • scaleY(n) : 요소를 n만큼 y축으로 확대 또는 축소
  • skew(xdeg,ydeg) : 요소를 x와 y축으로 xdeg,ydeg만큼 기울임
  • skewX(deg) : 요소를 deg만큼 x축 방향으로 기울임
  • skewY(deg) : 요소를 deg만큼 y축 방향으로 기울임
  • rotate(deg) : 요소를 deg만큼 회전

6.8.2 transform-origin 속성

• 변형의 기준점 변경

transform-origin:<x축 위치> <y축 위치>;

• x축 : left, center, right
• y축 : top, center, bottom

6.9 웹 폰트와 아이콘 폰트 사용하기

6.9.1 구글 폰트 적용하기

• 웹 폰트 : 인증된 기관 또는 회사에서 웹 서버에 올려 놓은 폰트
  • 구글 웹 폰트 검색해서 사용가능

6.9.2 아이콘 폰트 사용하기

• Font Awesome, Material Icon에서 사용 가능