CSS 적용 방식

InlineInline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법이다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 된다. Inline 스타일 방식이라고 부른다. 내용   InternalInternal은 문서에  위의 코드로 모든 에 같은 스타일을 줄 수 있다. 하지만 이것도 한계가 있다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 한다. 페이지가 많고 스타일 규칙 내용이 많아지면 결코 쉬운 일은 아니다.  ExternalExternal은 외부 스타일 시트 파일을 이용한 방법이다. 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식이다. 외부 파일은 확장자가 .css가..

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

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