CSS, SASS, SCSS

CSSCascading Style Sheets(종속형 스타일 시트)브라우저에서 웹페이지의 외형을 결정하는 선언형 언어브라우저는 선택한 요소에 CSS 스타일 선언을 적용해 화면에 적절히 표현하나의 스타일 선언은 웹 페이지의 모양을 결정하는 속성과 그 값으로 이루어짐CSS는 HTML, JavaScript와 함께 웹의 3대 핵심 기술보통 HTML 요소의 스타일을 결정하지만, SVG와 XML 등 다른 마크업 언어에도 사용할 수 있음 Sass / SCSSSass : Syntactically Awesome Style SheetsSCSS : Sassy CSSCSS의 단점을 보완하기 위해 만든 CSS 전처리기Sass는 CSS로 컴파일된 스타일시트 언어변수, 중첩 규칙, 믹스인, 함수 등을 완전히 CSS와 호환되는 구문..

• format_list_bulleted CSS/Default
• · 2024. 9. 27.
• textsms

Animation

Animation이란?Animation은 CSS 스타일과 키프레임(keyframes)으로 구성되며, Transition 보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. 적용될 대상은 @keyframes 규칙이 반드시 필요하며, Transition과 다르게 방아쇠(Trigger) 없이도 실행 가능하다. Animation 지원범위Animation은 IE브라우저에서 10이상부터 지원한다.  Animation 9가지 속성  (1) animation-name@keyframes에서 설정한 애니메이션의 이름animation-name: name;/* 키프레임 이름 = 애니메이션 이름 */@keyframes name { /* from(0%), to(100%)..

• format_list_bulleted CSS/Default
• · 2024. 9. 27.
• textsms

Transition

Transition이란?Transition의 사전적 의미는 "전이, 이행"이라는 뜻을 가지고 있다. CSS 속성인 Transition은 한 상태에서 다른 상태로 변형될 때 일정 시간 동안 변화는 과정을 말한다. 적용될 대상은 초기/종료 상태의 스타일과 Transition 속성 정의가 필요하며,  애니메이션 발생을 위한 가상 선택자(:hover 등) 또는 js 방아쇠(Trigger)가 필요하다.  Transition 지원범위Transition은 IE브라우저에서 10이상부터 지원한다.  Transition 5가지 속성  (1) transition-propertyCSS 속성을 지정함기본값 :  all (모든 속성에 적용)transition-property: none | all | property | initi..

• format_list_bulleted CSS/Default
• · 2024. 9. 27.
• textsms

애니메이션의 이해

웹 애니메이션을 제작할 때 여러 가지 방법이 있다. CSS 애니메이션 교육에 앞서 실무에서 자주 사용하는 웹 애니메이션 종류에 대해 알아보고 장단점을 비교해보겠다.  GIF최대 256 색상을 지원하며 비 손실 압축 포맷으로 구현이 간편함압축률이 낮아 이미지 용량이 크고, 브라우저 성능(fps) 저하 발생 MP4손실 압축 포맷으로 용량이 적고 스트리밍 재생이 가능함알파 채널이 지원되지 않아 배경색을 포함한 콘텐츠를 제작해야 함 CSS & JS인터렉션 UI 애니메이션에 적합하고, 부드러운 애니메이션 제공복잡하고 현란한 애니메이션 제작 어려움 LOTTIESVG 벡터 기반으로 선명하고 현란한 애니메이션 제작이 가능After Effects 도구 사용으로 진입 장벽이 높음  애니메이션 장단점 비교      [ 출처..

• format_list_bulleted CSS/Default
• · 2024. 9. 27.
• textsms