transition (2) 썸네일형 리스트형 #24 - CSS - 멀티 컬럼 멀티 컬럼 설명 여러개의 컬럼을 설정 속성 예시 /* 컬럼너비 컬럼개수 */ /* 선두께 선종류 선색상 */ /* 좌우 여백 */ .colmn{ columns : 100px 2; column-rule : 1px solid red; column-gap : 20px; } 속성 설명 속성 개별 속성 의미 값 columns - 컬럼 설정 columns-width 컬럼 최소 너비. 이하로 떨어질 경우 컬럼 개수가 변경 됨 auto, 숫자+단위 columns-count 컬럼의 개수 auto, 숫자+단위 column-rule - 단과 단 사이 선 설정. Boder 속성과 동일 column-rule-width 선 두께 column-rule-style 선 종류 column-rule-color 선 색상. 지정하지 않으면 .. #21 - CSS 애니메이션 - 전환 전환 설명 트랜지션은 애니메이션을 만들 때 주로 사용되며, 작동은 아래와 같다. CSS의 시작과 끝 값 확인 taransition 속성을 통하여 중간 값을 알아냄 시작~중간~끝을 이어 애니메이션을 만듦 전환 단축 입력 방법 /* 속성이름 지속시간 딜레이시간 타이밍함수 */ /* 속성 일부 제어 */ .class1{ width : 50%; height : 50%; color : red; transition : height .5s .5s ease-in, color .5s .5s ease-in; } .class1::after{ width : 100%; height : 100%; color : blue; } /* 속성 전체 제어 */ .class2{ width : 50%; height : 50%; transit.. 이전 1 다음
