CSS 속성(display, animation)

display 속성

• inline: 인라인이 아닌 요소에 인라인 속성 부여

      inline속성: 본인 크기만큼만 공간 차지

• block: 블록이 아닌 요소에 블록 속성 부여

      block속성: 크기 부여 가능

• inline-block: 인라인 속성이지만 블록 속성처럼 크기 부여 가능
• none: 화면에서 요소를 사라지게 함(크기도 차지하지 않음)
• flex: 자식에게 크기를 부여할 수 있는 인라인 속성 

      #  쉽게 레이아웃 구조를 잡을 수 있음

출처: sharkcoder

      #  flex container(부모요소) 속성

           justify-content: 가로 정렬

               space-between: 자식 요소들에게 동일한 크기를 부여하며 자식 요소 배열

               space-around: 양 끝에 여백을 주면서 자식 요소 배열

           align-items: 세로 정렬

               부모요소의 세로 크기가 지정되어있지 않으면 자식 요소가 세로 정렬이 되지 않음.

// flexbox 기본 구조
.container {
		display: flex;
	}




---
<div class="container">
	<div class="item">
		<p>item1</p>
	</div>
	<div class="item">
		<p>item2</p>
	</div>
	<div class="item">
		<p>item3</p>
	</div>
</div>

 

 

 

animation 속성

: 애니메이션을 나타내는 css스타일 + 애니메이션의 중간 상태를 나타내는 키 프레임

 

 

#  애니메이션을 나타내는 css스타일

• animation-name: 애니메이션 이름
• animation-duraction: 애니메이션 재생 시간
• animation-iteration-count: 반복 횟수
• animation-delay:애니메이션이 시작하기 전 지연 시간

                                           "s"(초), "ms"(밀리초) 2가지 단위 사용 가능

• animation-direction: 애니메이션 재생 방향
• animation-timing-function: 애니메이션 진행 속도 또는 가속 방식을 지정
  • linear : 애니메이션 효과가 처음부터 끝까지 일정한 속도로 진행
  • ease : 기본값, 애니메이션 효과가 처음엔 천천히 시작하여 빨라지고 마지막에는 다시 느려짐
  • ease-in : 애니메이션 효과가 천천히 시작됨
  • ease-out : 애니메이션 효과가 천천히 끝남
  • ease-in-out : 애니메이션 효과가 천천히 시작되어, 천천히 끝남
  • cubic-bezier(n,n,n,n) : 애니메이션 효과가 사용자가 정의한 cubic-bezier 함수에 따라 진행

 

 

#  애니메이션의 중간 상태를 나타내는 키 프레임

• @keyframes로 설정되는 값: to ~ from, 0% ~ 100%
• opacity: 투명도 지

 

#  매끄럽게 요소의 위치가 옮겨지지 않을 때

: left / right / top / bottom / opacity 등 속성을 모두 동일하게 사용해야만 뚝딱이지 않고 매끄럽게 위치가 이동됨

.circle {
        background: orange;
        width: 100px; height:100px;
        border-radius: 100px;
        position: relative;
        animation-name: ball;
        animation-duration: 1s;
        animation-iteration-count: 5;
        animation-timing-function: linear;
}

@keyframes ball {
        from {top:100px; bottom:0px;}
        to {top:0px; bottom:100px;}
            or
        0% {top:0px; bottom:0px;}
        25% {top:100px; bottom:0px;}
        50% {top:0px; bottom:100px;}
        75% {top:100px; bottom:0px;}
        100% {top:0px; bottom:0px;}
  }