HTML.CSS.JS/css 18

[CSS] transform 속성: 회전, 이동, 확대

transform : 회전, 이동, 확대등을 할 때 사용 translate(x,y) : x축으로 x만큼, y축으로 y만큼 이동 translateX(x) : x축만 이동 translateY(y) : y축만 이동 scale(w, h) : 가로로 w배, 세로로 h배만큼 커짐, 값을 0으로 하면 안보임 scaleX(w) : 가로만 확대 scaleY(h) : 세로만 확대 rotate(a) : a 각도만큼 시계방향 회전, 단위 : deg skaw(xa, ya) : 기울림, 단위 : deg skawX(xa) : x축으로 xa만큼 기울림 skawY(ya) : y축으로 ya만큼 기울림 특징 다른 속성값이 변화할때 서서히 변화하여 애니메이션이 발생하는 것처럼 보이게 함. transition 속성명 전환시간; 속성이 전환시..

HTML.CSS.JS/css 2023.04.25

[CSS] animation 애니메이션 효과

1. 애니메이션 등록(@keyframes) - 시간비율은 0~100%, 0% = from, 100% = to로 대체가능 @keyframes 애니메이션 명{ 시간비율{ 스타일; } 시간비율{ 스타일; } } 2. 애니메이션 적용 animation-name : 동작할 애니메이션 이름 animation-duration : 애니메이션 동작시간 animation-iteration-count : 애니메이션 반복 횟수, 숫자 or infinite(무한) == 사용예시 == 가장 앞의 화면이 흐려졌다가 밝아졌다하는 애니메이션 DOCTYPE html> opacity사용 .bg, .front{ position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .bg{ backgro..

HTML.CSS.JS/css 2023.04.25

[CSS] display : flex 속성

display : flex ; // 속성 선택 사용 justify-content : ____; align-items : ____; flex-direction : ____; order: ___; justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. align-items flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다. flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다. center: 요소들을 컨테이너의 세로선 ..

HTML.CSS.JS/css 2023.04.12

[CSS] cursor : pointer, 아이콘 사이트

cursor : pointer : 커서가 올라가면 손가락 모양의 커서로 변경됨 무료 아이콘 사이트 https://fontawesome.com/kits/3d5e691692/setup?welcome=yes Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap..

HTML.CSS.JS/css 2023.04.06