필기용 블로그

○@media

 ▷서로 다른 매체 유형을 위한 맞춤식 스타일 시트

 ▷@media only/not 매체유형 and (표현식) { CSS 스타일시트 }

 ▷외부 파일 = <link rel="stylesheet" media="매체유형 and|only|not (표현식)" href="CSS파일URL"/>

 ▶매체 유형

  ▷all: 모든 매체

  ▷print: 프린트 기기

  ▷scrreen: 컴퓨터/태블릿/스마트폰 등 스크린이 있는 매체

  ▷speech: 스크린 리더

 ▶쿼리 속성

  ▷wodth: 너비

  ▷height: 높이

  ▷device-width: 매체 화면 너비

  ▷device-height: 매체 화면 높이

  ▷device-aspect-ratio: 매체 화면 비율

  ▷orientation: 화면 방향

  ▷color: 색상 비트 수

  ▷color-index: 표현 가능한 색상 수

  ▷monochrome: 흑백 매체에서 픽셀 당 비트 수

  ▷resolution: 매체의 해상도

○flexible box

 ▷가변적인 박스로 이루어진 요소

 ▷display: -webkit-flex / flex

 ▶flex-direction: 배치 방향

  ▷row / row-reverse / column / column-reverse

 ▶justify-content: 수평 방향 정렬 방식

  ▷flex-start: 기본 설정, 앞쪽부터 배치

  ▷flex-end: 뒤쪽부터 배치

  ▷ceter: 가운데서부터 배치

  ▷space-between: 요소들 사이에만 여유 공간

  ▷space-around: 앞, 뒤, 요소들 사이에서도 여유 공간을 가짐

 ▶align-items: 수직 정렬 방식

  ▷stretch: 기본 설정, 플렉스 높이 = 컨테이너 높이

  ▷flex-start / flex-end / center

  ▷baseline: 기준선에 배치

 ▶flex-wrap: 줄넘김 설정

  ▷nowrap: 다음 줄로 넘어가지 않음

  ▷wrap: 다음 줄로 넘어가 배치

  ▷wrap-reverse: 다음 줄로 넘어감 (위쪽)

 ▶align-content

  ▷stretch: 기본 설정, 플렉스 라인의 높이가 남는 공간 전부 차지

  ▷flex-start: 라인이 컨테이너 앞쪽에 뭉침

  ▷flex-end: 컨테이너 뒤쪽에 뭉침

  ▷center: 가운데 뭉침

  ▷space-between: 고르게 분포

  ▷space-around: 고르게 분포 + 양쪽 끝네 약간의 공간

 ▶order: 순서 설정

 ▶margin: auto->수평 여유 공간 제거

 ▶align-self: align-item보다 우선 적용

 ▶flex: 컨테이너 내 너비 상대적 설정

○column

 ▶종류

  ▷-webkit-coulmn~: 

  ▷-mox-column~: 

  ▷column~: 

 ▶column-count: 몇개의 칼럼으로 나눌지

 ▶column-gap: 칼럼 간의 간격

 ▶column-width: 칼럼 너비

 ▶column-span: 몇 개의 칼럼을 병합하여 표현할지

 ▶column-fill: 어떻게 채울지

 ▶column-rule: 라인 속성

  ▷column-rule: style width color

  ▶column-rule-style: 라인 스타일

  ▶column-rule-width: 라인 두께

  ▶column-rule-color: 라인 색상

○@keyframe

 ▷특정 시간에 여소가 가져야 할 CSS 스타일

 ▷CSS 애니메이션을 적용하기 위해 필요함.

○animation

 ▷현재의 스타일을 다른 스타일로 천천히 변화시킴.

 ▶종류

  ▷-webkit-animation

  ▷animation: name duration timing-function delay iteration-count direction

 ▶animation-name: 이름

 ▶animation-duration: 한 싸이클이 애니메이션이 얼마에 걸쳐 일어날지 (시간)

 ▶animation-timing-function: 전환을 어떤 시간간격으로 진행할지

  ▷linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)

 ▶animation-delay: 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정 (시간)

 ▶animation-iteration-count: 반복 횟수 (횟수)

 ▶animation-direction: 종료 후 처음부터 시작할지, 역방향으로 진행할지 (alternate / reverse)

 ▶animation-play-state: 멈춤/시작

 ▶animation-fill-mode: 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

○transition

 ▷정해진 시간 동안 요소의 속성값을 부드럽게 변화시킴.

 ▷여러 개가 ,로 구분되있으면 각각 적용한다. (property보다 개수가 적으면 반복)

 ▷transition: property duration timing-function delay

 ▶transition-property

  ▷바꿀 속성 이름

 ▶transition-duraition

  ▷바꾸는 시간

 ▶transtion-timing-function

  ▷전환 효과의 시간당 속도

  ▶종류

   ▷linear: 일정한 속도

   ▷ease: 기본, 느림-빠름-느림

   ▷ease-in: 처음이 느림

   ▷ease-out: 나중이 느림

   ▷ease-in-out: 처음과 나중이 느림

   ▷cubic-bezier(n,n,n,n): cublic-bezier 곡선값 지정

   ▷step-start: 모든 변화가 시작 지점에서

   ▷step-end: 모든 변화그 끝 지점에서

   ▷steps(4, start): 설정한 단계에 따라 간격을 두고 변화가 일어남.

 ▶transition-delay

  ▷전환효과 전까지의 지연 시간