[CSS] Transform 과 Animation을 결합할 때 주의사항

Tranform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } prefix 작성 시 유의 사항 .box { animation: rotation 3s linear 1s 6 alternate; } @-webkit-keyframes rotation { from {-webkit- transform: rotate(-10deg); } to {-webkit- transform: rotate(10deg); } } animation 앞에 prefix가 달려있다면 (ex..

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[CSS] Animation / 웹사이트에 접속하자마자 효과 적용하기

Animation .animation { animation-name: changeWidth; /* 임의로 작성가능 */ animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; } @keyframes changeWidth { /* 내가 설정한 animation 이름 */ from { width: 300px; } /* animation을 통해 변화할 결과값(시작지점) */ to { width: 600px; } /* animation을 통해 변화할 결과값(끝지점) */ } iteration-count 애니메이션 반..

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[CSS3] Transition 속성

Transition property 효과를 적용하고자 하는 css 속성 duration 효과가 나타나는데 걸리는 시간 timing-function 효과의 속도 linear은 '일정하게' 라는 의미 delay 특정 조건 하에서 효과 발동 1s는 '1초 후' 라는 의미 가상 선택자 : hover css에서 미리 만들어 놓은 클래스 '마우스를 올렸을 때' 라는 조건 Transition을 효과적으로 사용하기 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동 순서는 상관이 없지만, 숫자의 경우 먼저 나온 것이 duration, 뒤에 나온 것이 delay

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[HTML/CSS] 웹사이트를 재미있게 만드는 CSS3의 transform 속성들

Transform rotate(45deg); 입력한 각도만큼 회전 음수도 입력 가능 scale(2, 3); 숫자는 비율을 의미 width를 2배, height를 3배 확대 skew(10deg, 20deg); x축 y축을 기준으로 입력한 각도만큼 비틂 translate(100px, 200px); 선택한 오브젝트의 좌표 변경 prefix 접두사 다른 버전의 브라우저에서의 실행을 원할 경우

• format_list_bulleted Front-End
• · 2023. 3. 1.
• textsms

[HTML/CSS] 레이아웃에 영향을 미치는 속성

display /* style.css 문서 */ p { display: inline; } a { display: block; } a { display: inline-block; } Block과 Inline 요소의 성격을 바꿀 때 사용 inline-block을 사용하면 두 요소의 성격을 모두 가짐 float Hello World Hello World /* style.css 문서 */ .left { float: left; } .right { float: right; } 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 Hello World Hello World /* style.css 문서 */ .left { float: left; } ...

• format_list_bulleted Front-End
• · 2023. 2. 27.
• textsms

[HTML/CSS] Margin 병합 현상

형제지간의 마진 병합 Hello World Hello World /* style.css 문서 */ .box1 { margin-bottom: 150px; } .box2 { margin-top: 100px; } margin-bottom과 margin-top 중 숫자가 큰 값으로 적용 부모자식의 마진 병합 (❗️주의) /* style.css 문서 */ article { width: 200px; height: 200px; margin-top: 100px; } 자식인 뿐만 아니라 부모인 에도 영향을 미침

• format_list_bulleted 카테고리 없음
• · 2023. 2. 27.
• textsms