애니메이션 정의 (시작과 끝 상태 설정)@keyframe 애니메이션이름 { /* 시작 선택자 (0%) */ from { 스타일속성 : 속성값 ; } /* 끝 선택자 (100%) */ to { 스타일속성 : 속성값 ; }}   - 0~100% 내의 %를 선택자로 하여 중간 상태 설정 가능 요소에 애니메이션 부여/* @keyframe에서 정의한 이름과 동일하게 입력 */선택자 { animation-name : 애니메이션이름 ; } 애니메이션 실행 시간 지정선택자 { animation-duration : 실행시간(단위 s) ; } 애니메이션 종료 후 원위치 방법 지정선택자 { animation-direction : normal | alternate ;..

트랜지션  - 웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는 것 트랜지션을 적용할 속성 선택선택자 { transition-property : all | none | 속성명 ; }   - all (기본값)      : 요소의 모든 속성이 트랜지션 대상이 됨  - none      : 아무 속성도 바뀌지 않음  - 속성명을 콤마로 연결하여 여러 속성에 적용 가능 트랜지션 진행 시간 지정선택자 { transition-duration : 시간(단위 s) ; }   - 트랜지션이 여러 개라면 쉼표로 구분해서 지정      ex) { transition-property : width, height ; transition-duration : 2s, 3s ; }          → 2초 동안 너비 변화, 1초 동안..

요소 이동선택자 { transform : translate(x축이동거리, [y축이동거리]) ; }선택자 { transform : translate3d(x축이동거리, y축이동거리, z축이동거리) ; }선택자 { transform : translateX(x축이동거리) ; }선택자 { transform : translateY(y축이동거리) ; }선택자 { transform : translateZ(z축이동거리) ; }  - y값이 추어지지 않으면 x값과 같다고 간주함 요소 확대 및 축소선택자 { transform : scale(x축배수, [y축배수]) ; }선택자 { transform : scale3d(x축배수, y축배수, z축배수) ; }선택자 { transform : scaleX(x축배수) ; }선택자 { ..

배치 - 가로 방향 가운데 정렬부모선택자 { text-align : center; }자식선택자 { display : inline-block ; }/* 또는 */선택자 { dispaly : block ; margin : 0px auto ; }배치 - 플렉스 박스 활용 정렬선택자 { display : flex ; /* 가로 방향 정렬 */ justify-content : 속성값 ; /* 세로 방향 정렬 */ align-items : 속성값 ;}  - 속성 값    · flex-start         : 주축의 시작점을 기준으로 배치 (왼쪽)    · flex-end         : 주축의 끝점을 기준으로 배치 (오른쪽)    · center      ..

#  관련 포스팅  - 표 태그 : https://young0105.tistory.com/17  캡션 표시 위치 지정선택자 { caption-side : top | bottom ; }  - top (기본값) : 캡션이 표 위쪽에 표시됨  - bottom : 캡션이 표 아래쪽에 표시됨  표 테두리/* 표 바깥 테두리 */테이블선택자 { border : 선두께 선유형 선색상 ; }/* 셀 테두리 */테이블선택자 셀선택자 { border : 선두께 선유형 선색상 ; }표 바깥 테두리와 셀 테두리의 겹치는 부분을 합쳐서 표현선택자 { border-collapse : collapse | separate ; }  - separate (기본값) : 테두리를 따로 표시함 (셀들을 분리함)  - collapse : 테두..