CSS(Cascading Style Sheets)는 마크업 언어로 작성된 문서의 표시를 설명하는 데 사용되는 스타일 시트 언어입니다. 웹 페이지의 레이아웃, 글꼴, 색상 및 기타 시각적 측면을 제어하는 데 사용됩니다.
CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 지정하고 형식을 지정하는 데 사용되는 코딩 언어입니다. 이를 통해 웹 디자이너는 페이지의 크기, 색상 및 위치를 포함하여 웹 사이트의 텍스트, 이미지 및 기타 요소의 모양을 제어할 수 있습니다. 간단히 말해서 CSS는 웹 사이트를 보기 좋고 체계적으로 보이게 합니다.
CSS(Cascading Style Sheets)는 HTML 또는 XML로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 프로그래밍 언어입니다. CSS는 HTML과 함께 웹 사이트의 스타일을 정의하는 데 사용되며 웹 페이지의 특정 요소 또는 요소 그룹에 적용해야 하는 스타일 그룹을 지정하여 규칙을 정의할 수 있는 규칙 기반 언어입니다.
CSS는 여러 웹 페이지의 레이아웃을 한 번에 제어할 수 있는 강력한 도구로, 많은 작업을 줄여줍니다. 텍스트 색상, 상자 및 기타 요소를 조작하여 아름답고 기능적인 웹 사이트를 만들 수 있습니다. CSS는 화면, 종이, 음성 또는 기타 미디어에서 요소를 렌더링하는 방법을 설명하므로 웹 개발의 필수 부분이 됩니다.
초보자이든 숙련된 웹 개발자이든 CSS를 이해하는 것은 시각적으로 매력적이고 사용자 친화적인 웹 사이트를 만드는 데 중요합니다. 이 기사에서는 CSS가 무엇인지, 어떻게 작동하는지, CSS의 다양한 유형에 대해 자세히 알아볼 것입니다. 또한 CSS를 사용하여 기능적이고 시각적으로 매력적인 멋진 웹 사이트를 만드는 몇 가지 모범 사례를 살펴볼 것입니다.
CSS 란 무엇입니까?
CSS 또는 Cascading Style Sheets는 HTML 또는 XML로 작성된 문서의 프레젠테이션을 설명하는 데 사용되는 프로그래밍 언어입니다. HTML 요소의 스타일을 지정하고 한 번에 여러 웹 페이지의 레이아웃을 제어하는 데 사용됩니다.
정의
CSS는 화면, 종이, 음성 또는 기타 미디어에서 요소를 렌더링하는 방법에 대한 규칙을 정의하는 규칙 기반 언어입니다. 이를 통해 개발자는 웹 페이지의 프레젠테이션을 콘텐츠와 분리하여 웹 사이트를 보다 쉽게 유지 관리하고 업데이트할 수 있습니다.
연혁
CSS는 1996년에 처음 도입되었으며 그 이후 여러 업데이트와 개정을 거쳤습니다. 스타일 및 레이아웃 측면에서 HTML의 한계를 해결하기 위해 개발되었습니다. CSS 이전에는 HTML이 웹 페이지의 구조와 프레젠테이션을 정의하는 데 사용되었습니다. 그러나 이로 인해 웹 사이트의 레이아웃이나 디자인을 변경하기가 어려웠습니다.
중요성
CSS는 개발자가 시각적으로 매력적이고 반응이 빠른 웹 사이트를 만들 수 있도록 해주기 때문에 웹 개발에서 중요한 역할을 합니다. 이를 통해 웹 사이트 표시를 더 잘 제어할 수 있으며 개발자가 여러 웹 페이지에서 일관된 모양과 느낌을 만들 수 있습니다.
결론적으로 CSS는 웹 개발자가 시각적으로 매력적이고 반응이 빠른 웹 사이트를 만드는 데 필수적인 도구입니다. 웹 사이트의 프레젠테이션을 콘텐츠와 분리하고 개발자가 여러 웹 페이지에서 일관된 모양과 느낌을 만들 수 있도록 합니다.
CSS 기본
CSS는 웹 페이지의 레이아웃 형식을 지정하는 데 사용할 수 있는 강력한 스타일 언어입니다. 이 섹션에서는 구문, 선택자, 속성 및 값을 포함하여 CSS의 기본 개념 중 일부를 다룹니다.
통사론
CSS는 규칙 집합을 사용하여 HTML 요소가 웹 페이지에 표시되는 방식을 결정하는 규칙 기반 언어입니다. CSS 규칙은 선택기와 선언 블록으로 구성됩니다. 선택기는 스타일을 지정할 HTML 요소를 가리키는 반면 선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함됩니다. 각 선언에는 콜론으로 구분된 CSS 속성 이름과 값이 포함됩니다.
선택자
선택기는 웹 페이지의 특정 HTML 요소를 대상으로 지정하는 데 사용됩니다. 요소 선택자, 클래스 선택자, ID 선택자 및 속성 선택자를 포함하여 여러 유형의 선택자가 있습니다. 요소 선택자는 특정 HTML 요소를 대상으로 하는 반면 클래스 선택자는 특정 클래스 특성을 가진 요소를 대상으로 합니다. ID 선택자는 특정 ID 속성을 가진 요소를 대상으로 하는 반면, 속성 선택자는 특정 속성을 가진 요소를 대상으로 합니다.
등록
CSS 속성은 웹 페이지에서 HTML 요소의 시각적 모양을 제어하는 데 사용됩니다. color, font-size, background-color, margin 등 많은 CSS 속성을 사용할 수 있습니다. CSS 속성은 색상이나 글꼴 크기와 같은 특정 값으로 설정하여 요소가 표시되는 방식을 제어할 수 있습니다.
마케팅은:
값은 CSS 속성의 특정 값을 설정하는 데 사용됩니다. 예를 들어 color 속성을 빨강, 녹색 또는 파랑과 같은 특정 색상 값으로 설정할 수 있습니다. font-size와 같은 다른 속성은 12px 또는 16px와 같은 특정 값으로 설정할 수 있습니다.
규칙 및 우선 순위
CSS 규칙은 웹 페이지의 특정 HTML 요소에 대한 스타일을 설정하는 데 사용됩니다. 동일한 요소에 여러 규칙이 적용되는 경우 가장 구체적이고 가장 최근에 적용된 규칙이 우선합니다. 경우에 따라 !important 키워드를 사용하여 다른 규칙을 재정의하고 특정 스타일이 적용되도록 해야 할 수 있습니다.
결론적으로 CSS는 웹 페이지의 레이아웃 형식을 지정하는 데 사용할 수 있는 강력한 스타일 언어입니다. CSS 구문, 선택기, 속성 및 값의 기본 사항을 이해하면 탐색하기 쉽고 시각적으로 매력적인 아름답고 반응이 빠른 웹 페이지를 만들 수 있습니다.
CSS 버전
CSS는 웹 개발자의 변화하는 요구 사항을 충족하기 위해 새로운 버전이 도입되면서 수년에 걸쳐 발전해 왔습니다. 현재 CSS에는 CSS1, CSS2.1, CSS3 및 CSS4의 네 가지 주요 버전이 있습니다.
CSS1
CSS1은 1996년에 출시된 CSS의 첫 번째 버전입니다. 글꼴 색상, 크기 및 스타일과 같은 기본 스타일 옵션을 제공했습니다. 또한 페이지에서 요소의 위치를 지정하여 간단한 레이아웃을 만들 수 있었습니다. CSS1은 HTML 태그를 사용하여 요소의 모양을 정의하는 것과 관련된 웹 페이지 스타일 지정의 이전 방법에 비해 크게 개선되었습니다.
CSS2.1
CSS2.1은 1998년에 출시되었으며 인쇄 및 화면과 같은 미디어 유형에 대한 지원과 요소가 표시되어야 하는 순서를 지정하는 기능을 포함하여 몇 가지 새로운 기능을 추가했습니다. 또한 개발자가 페이지의 특정 요소를 대상으로 지정하고 스타일을 적용할 수 있는 선택기 개념을 도입했습니다.
CSS3
CSS3는 1999년에 도입되었으며 CSS의 최신 버전입니다. 애니메이션, 전환 및 그라데이션 지원을 포함하여 다양한 새로운 기능을 추가했습니다. CSS3는 또한 더 적은 코드로 더 복잡한 레이아웃을 생성할 수 있는 flexbox 및 grid와 같은 새로운 레이아웃 옵션을 도입했습니다. CSS3는 오늘날에도 여전히 널리 사용되고 있으며 현대 웹 개발의 표준이 되었습니다.
CSS4
CSS4는 현재 개발 중이며 가까운 시일 내에 출시될 예정입니다. 개발자가 스타일시트 전체에서 값을 정의하고 재사용할 수 있도록 하는 변수 지원을 포함하여 몇 가지 새로운 기능을 소개합니다. CSS4에는 컨테이너 쿼리와 같은 새로운 레이아웃 옵션도 포함되어 개발자가 배치된 컨테이너의 크기에 맞게 반응형 디자인을 만들 수 있습니다.
결론적으로 CSS는 웹 개발자의 변화하는 요구 사항을 충족하기 위해 새로운 버전이 도입되면서 처음부터 먼 길을 왔습니다. 각 버전에는 새로운 기능이 추가되어 복잡한 레이아웃과 스타일을 더 쉽게 만들 수 있습니다. CSS4의 출시가 임박함에 따라 개발자가 사용할 수 있는 훨씬 더 강력한 도구와 옵션을 통해 웹 개발의 미래는 밝아 보입니다.
CSS 및 HTML
CSS와 HTML은 웹 페이지를 만드는 데 사용되는 두 가지 별도의 언어입니다. HTML은 웹 페이지의 콘텐츠를 구조화하는 데 사용되는 마크업 언어인 반면 CSS는 콘텐츠의 스타일을 지정하고 형식을 지정하는 데 사용됩니다. 이 섹션에서는 CSS와 HTML이 함께 작동하여 시각적으로 매력적인 웹 페이지를 만드는 방법을 살펴봅니다.
HTML 요소
HTML 요소는 웹 페이지의 빌딩 블록입니다. 웹 페이지의 구조와 내용을 정의하는 태그입니다. HTML 요소를 사용하여 제목, 단락, 목록, 이미지 등을 만들 수 있습니다. 각 HTML 요소에는 CSS를 사용하여 스타일을 지정할 수 있는 자체 속성 집합이 있습니다.
마크 업 언어
HTML은 태그를 사용하여 웹 페이지의 구조를 정의하는 마크업 언어입니다. 태그는 콘텐츠를 묶고 의미를 부여하는 데 사용됩니다. 예를 들어, <h1> 태그는 최상위 제목을 정의하는 데 사용되며 <p> 태그는 단락을 정의하는 데 사용됩니다. HTML은 복잡한 웹 페이지를 만드는 데 사용할 수 있는 강력한 언어입니다.
링크
링크는 모든 웹 페이지의 필수 부분입니다. 이를 통해 사용자는 페이지 간을 탐색하고 외부 리소스에 액세스할 수 있습니다. 링크는 다음을 사용하여 생성됩니다. <a> 태그이며 CSS를 사용하여 스타일을 지정할 수 있습니다. 링크를 사용하여 웹 페이지 내에서 책갈피를 생성하여 사용자가 페이지의 특정 섹션으로 빠르게 이동할 수 있습니다.
전반적으로 CSS와 HTML은 함께 작동하여 시각적으로 매력적인 웹 페이지를 만듭니다. HTML은 웹 페이지의 구조와 내용을 정의하는 반면 CSS는 해당 내용의 스타일과 형식을 지정하는 데 사용됩니다. HTML과 CSS를 함께 사용함으로써 웹 개발자는 사용하고 탐색하기 쉬운 아름답고 기능적인 웹 사이트를 만들 수 있습니다.
CSS와 웹 디자인
CSS는 웹 디자인에서 중요한 역할을 합니다. 이를 통해 개발자는 웹 페이지의 시각적 모양을 제어하고 여러 페이지에서 일관성을 유지할 수 있습니다. 이 섹션에서는 CSS가 레이아웃, 타이포그래피, 색상 및 이미지를 포함하여 웹 디자인의 다양한 측면에 어떻게 영향을 미치는지 살펴봅니다.
레이아웃
CSS를 사용하면 웹 개발자가 웹 페이지의 레이아웃을 제어할 수 있습니다. 개발자는 CSS를 사용하여 웹 페이지에 다양한 요소를 배치하고 이러한 요소의 크기를 제어하며 다양한 장치에서 일관되게 표시되도록 할 수 있습니다. 또한 CSS를 사용하면 개발자가 다양한 화면 크기에 적응하는 반응형 디자인을 만들어 모든 장치에서 웹 페이지에 액세스할 수 있습니다.
활판 인쇄술
CSS는 개발자에게 웹 페이지의 타이포그래피를 제어하기 위한 다양한 옵션을 제공합니다. CSS를 사용하여 개발자는 웹 페이지에서 텍스트의 글꼴 모음, 글꼴 크기, 줄 높이 및 문자 간격을 제어할 수 있습니다. 또한 텍스트 정렬과 웹 페이지의 여러 요소 사이의 간격을 제어할 수 있습니다.
색상
CSS를 사용하면 개발자가 웹 페이지에 사용되는 색상을 제어할 수 있습니다. CSS를 사용하여 개발자는 웹 페이지의 배경 색상을 설정하고, 텍스트 색상을 변경하고, 웹 페이지의 다양한 요소 색상을 제어할 수 있습니다. CSS는 또한 개발자에게 그라디언트 및 기타 복잡한 색상 효과를 만드는 기능을 제공합니다.
이미지
CSS를 사용하면 개발자가 웹 페이지의 이미지 표시를 제어할 수 있습니다. CSS를 사용하여 개발자는 이미지 크기를 제어하고 웹 페이지에서 이미지 위치를 설정하고 이미지의 불투명도를 제어할 수 있습니다. CSS는 또한 개발자에게 그림자 및 테두리와 같은 복잡한 이미지 효과를 만들 수 있는 기능을 제공합니다.
결론적으로 CSS는 웹 디자인을 위한 필수 도구입니다. 이를 통해 개발자는 웹 페이지에서 사용되는 레이아웃, 타이포그래피, 색상 및 이미지를 제어할 수 있으므로 웹 페이지가 시각적으로 매력적이며 모든 장치에서 액세스할 수 있습니다.
CSS 및 웹 개발
CSS(Cascading Style Sheets)는 웹 개발자에게 필수적인 도구입니다. 레이아웃, 색상, 글꼴 등을 포함하여 HTML 및 XML 문서의 표시를 제어할 수 있습니다.
외부 CSS
외부 CSS는 웹 사이트에서 사용하는 모든 스타일을 포함하는 별도의 파일입니다. 이 파일은 다음을 사용하여 HTML 문서에 연결됩니다. 꼬리표. 외부 CSS는 프리젠테이션을 콘텐츠와 분리하여 웹 사이트를 더 쉽게 유지 관리하고 업데이트할 수 있는 좋은 방법입니다. 또한 웹 사이트의 여러 페이지에서 일관성을 유지할 수 있습니다.
내부 CSS
내부 CSS는 다음을 사용하여 HTML 문서 내에서 정의됩니다. tag. It is useful when you want to apply styles to a single page or a specific section of a website. However, it can make the HTML document cluttered and harder to read.
인라인 CSS
인라인 CSS는 style 속성을 사용하여 HTML 요소 내에서 정의됩니다. 특정 요소에 스타일을 적용하고 싶을 때 유용합니다. 그러나 HTML 문서를 복잡하게 만들고 읽기 어렵게 만들 수 있습니다. 대규모 스타일 지정에는 인라인 CSS를 사용하지 않는 것이 좋습니다.
미디어 쿼리
미디어 쿼리는 기기의 화면 크기에 따라 다양한 스타일을 적용하는 데 사용됩니다. 이를 통해 웹 사이트는 휴대폰, 태블릿 및 데스크톱과 같은 다양한 장치에 반응하고 적응할 수 있습니다. 미디어 쿼리는 외부 CSS 파일 또는 HTML 문서 내에서 정의할 수 있습니다.
결론적으로 CSS는 웹 개발자에게 필수적인 도구입니다. 프리젠테이션과 콘텐츠를 분리할 수 있으므로 웹 사이트를 보다 쉽게 유지 관리하고 업데이트할 수 있습니다. 외부 CSS는 대규모 스타일링에 권장되는 반면 내부 및 인라인 CSS는 소규모 스타일링에 유용합니다. 미디어 쿼리를 사용하면 웹 사이트가 반응하고 다양한 장치에 적응할 수 있습니다.
CSS의 장점
CSS는 웹 개발자가 시각적으로 매력적이고 일관된 웹 페이지를 만들 수 있도록 하는 강력한 도구입니다. CSS를 사용하면 다음과 같은 이점이 있습니다.
속도
CSS의 주요 장점 중 하나는 속도입니다. CSS를 사용하면 개발자는 웹 페이지의 디자인과 레이아웃을 콘텐츠와 분리할 수 있습니다. 이러한 분리는 브라우저가 각 페이지에 대해 여러 스타일 시트를 다운로드할 필요가 없기 때문에 웹 페이지의 로딩 시간을 크게 줄일 수 있습니다. 대신 브라우저는 여러 페이지에서 사용할 수 있는 스타일 시트를 캐시하므로 페이지 로드 시간이 빨라집니다.
일관성
CSS는 개발자가 여러 웹 페이지에서 일관된 디자인을 만들 수 있도록 도와줍니다. 단일 스타일 시트를 사용하여 개발자는 웹 사이트의 모든 페이지가 일관된 모양과 느낌을 갖도록 할 수 있습니다. 이러한 일관성은 사용자가 웹 사이트를 더 쉽게 탐색하고 필요한 정보를 빠르게 찾을 수 있으므로 사용자 경험을 개선하는 데 도움이 될 수 있습니다.
유지보수
CSS를 사용하면 웹 사이트를 더 쉽게 유지 관리하고 업데이트할 수 있습니다. 웹 사이트의 디자인 및 레이아웃을 콘텐츠와 분리함으로써 개발자는 콘텐츠에 영향을 주지 않고 디자인을 변경할 수 있습니다. 즉, 웹사이트 디자인을 변경해야 하는 경우 전체 웹사이트를 다시 작성할 필요 없이 빠르고 쉽게 변경할 수 있습니다.
또한 CSS를 사용하면 웹 사이트의 레이아웃을 더 쉽게 변경할 수 있습니다. 개발자는 CSS를 사용하여 웹 페이지의 여러 요소에 적용할 수 있는 재사용 가능한 스타일을 만들 수 있습니다. 즉, 웹 페이지의 레이아웃을 변경해야 하는 경우 CSS 스타일 시트를 업데이트하여 쉽고 빠르게 변경할 수 있습니다.
결론적으로 CSS는 웹 개발자에게 많은 이점을 제공하는 강력한 도구입니다. CSS를 사용하여 개발자는 빠르게 로드되고 유지 관리 및 업데이트가 쉬운 시각적으로 매력적이고 일관된 웹 페이지를 만들 수 있습니다.
CSS 참조
CSS로 작업할 때 익숙하지 않은 속성이나 구문을 만났을 때 참조할 수 있는 신뢰할 수 있는 참조가 있어야 합니다. 다행스럽게도 CSS를 효과적으로 이해하고 사용하는 데 도움이 되는 리소스가 많이 있습니다.
W3C
W3C(World Wide Web Consortium)는 CSS를 포함한 웹 표준을 개발하고 유지 관리하는 주요 조직입니다. 그들의 웹 사이트는 기본 구문에서 고급 레이아웃 기술에 이르기까지 언어의 모든 측면을 다루는 포괄적인 CSS 참조를 제공합니다. 참조는 속성별로 구성되어 있으며 각 속성을 사용하는 방법에 대한 예제가 포함되어 있습니다.
참조 외에도 W3C 웹 사이트는 자습서, 사양 및 모범 사례를 포함하여 CSS를 배우고 사용하기 위한 풍부한 기타 리소스를 제공합니다. CSS 마스터에 대해 진지하게 생각하고 있다면 W3C 웹사이트는 필수 리소스입니다.
모듈
CSS는 모듈식 언어입니다. 즉, 완전한 스타일 시트를 만들기 위해 결합할 수 있는 별도의 모듈로 구성되어 있습니다. 각 모듈은 레이아웃, 타이포그래피 또는 색상과 같은 CSS의 특정 영역에 중점을 둡니다. CSS를 모듈로 나누면 더 쉽게 이해하고 효과적으로 사용할 수 있습니다.
W3C 웹 사이트는 해당 사양에 대한 링크와 함께 모든 CSS 모듈 목록을 제공합니다. 가장 중요한 모듈 중 일부는 다음과 같습니다.
- CSS 선택자: 문서에서 요소를 선택하기 위한 구문을 정의합니다.
- CSS 상자 모델: 요소가 페이지에 배치되는 방식을 설명합니다.
- CSS 그리드 레이아웃: 복잡한 레이아웃을 만들기 위한 강력한 시스템을 제공합니다.
- CSS 변환: 요소의 모양, 크기 및 위치를 변환할 수 있습니다.
- CSS 애니메이션: CSS를 사용하여 애니메이션 및 전환을 만들 수 있습니다.
다양한 CSS 모듈에 익숙해지면 더 능숙한 CSS 개발자가 될 수 있고 더 발전되고 세련된 디자인을 만들 수 있습니다.
결론적으로 신뢰할 수 있는 CSS 참조를 갖는 것은 CSS로 작업하는 모든 개발자에게 매우 중요합니다. W3C 웹 사이트는 CSS를 마스터하는 데 도움이 되는 다른 많은 리소스와 함께 광범위한 참조를 제공합니다. 또한 다양한 CSS 모듈을 이해하면 보다 고급스럽고 정교한 디자인을 만드는 데 도움이 될 수 있습니다.
CSS 애니메이션
CSS 애니메이션은 개발자가 웹 사이트에서 동적이고 매력적인 사용자 경험을 만들 수 있는 강력한 도구입니다. 애니메이션을 사용하여 페이지의 특정 요소에 주의를 기울이거나 사용자에게 피드백을 제공하거나 단순히 시각적인 흥미를 더할 수 있습니다.
CSS 애니메이션을 만들려면 먼저 애니메이션을 적용하려는 요소를 선택한 다음 CSS 속성을 사용하여 애니메이션을 정의해야 합니다. 그만큼 animation 속성은 애니메이션을 정의하는 데 사용되며 애니메이션의 타이밍, 기간 및 기타 세부 정보를 제어할 수 있는 여러 하위 속성이 있습니다.
주목해야 할 한 가지 중요한 점은 애니메이션이 리소스 집약적일 수 있으므로 애니메이션을 아껴서 주의해서 사용하는 것이 중요하다는 것입니다. 애니메이션은 사용자 경험을 저하시키는 것이 아니라 향상시켜야 하므로 애니메이션을 철저히 테스트하고 웹 사이트의 전반적인 성능에 어떤 영향을 미칠지 고려하는 것이 중요합니다.
다음은 애니메이션을 만드는 데 사용할 수 있는 몇 가지 주요 CSS 속성입니다.
애니메이션 이름
이 속성은 요소에 적용하려는 애니메이션의 이름을 정의합니다. 여러 애니메이션을 정의하고 페이지의 다른 요소에 적용할 수 있습니다.
애니메이션 기간
이 속성은 애니메이션이 완료되는 데 걸리는 시간을 정의합니다. 기간은 초 또는 밀리초 단위로 지정할 수 있습니다.
애니메이션 타이밍 기능
이 속성은 애니메이션 속도를 제어하는 데 사용되는 타이밍 기능을 정의합니다. 다음과 같이 사용할 수 있는 몇 가지 미리 정의된 타이밍 함수가 있습니다. linear, ease-in및 ease-out, 또는 사용자 지정 타이밍 함수를 만들 수 있습니다.
애니메이션 지연
이 속성은 애니메이션이 시작되기 전에 경과할 시간을 정의합니다. 이것은 페이지에서 여러 애니메이션의 타이밍을 시차를 두고 싶을 때 유용할 수 있습니다.
애니메이션 반복 횟수
이 속성은 애니메이션이 반복되는 횟수를 정의합니다. 특정 반복 횟수를 지정하거나 값을 사용할 수 있습니다. infinite 무한 반복되는 애니메이션을 만들 수 있습니다.
애니메이션 방향
이 속성은 애니메이션이 재생되는 방향을 정의합니다. normal 정방향 애니메이션의 경우 reverse 뒤로 애니메이션의 경우 또는 alternate 앞으로 및 뒤로 애니메이션을 번갈아 가며 사용합니다.
애니메이션 채우기 모드
이 속성은 애니메이션이 적용되는 요소의 애니메이션 전후 스타일을 지정하는 방법을 정의합니다. 지정할 수 있습니다 none 요소의 스타일을 변경하지 않고 그대로 두려면 forwards 애니메이션이 끝날 때 요소의 스타일을 유지하거나 backwards 애니메이션 시작 부분에 요소의 스타일을 적용합니다.
애니메이션 재생 상태
이 속성은 애니메이션이 재생 중인지 또는 일시 중지되었는지 정의합니다. 당신은 값을 사용할 수 있습니다 paused 애니메이션을 일시 중지하거나 running 시작하거나 재개합니다.
결론적으로 CSS 애니메이션은 웹 사이트에서 동적이고 매력적인 사용자 경험을 만드는 데 사용할 수 있는 강력한 도구입니다. 그러나 리소스를 많이 사용하고 웹 사이트의 전반적인 성능에 영향을 미칠 수 있으므로 이를 아껴서 주의해서 사용하는 것이 중요합니다. 애니메이션을 만드는 데 사용되는 주요 CSS 속성을 이해하면 사용자 경험을 향상시키고 웹 사이트에 시각적인 흥미를 더하는 애니메이션을 만들 수 있습니다.
더 많은 독서
CSS(Cascading Style Sheets)는 HTML 및 XML과 같은 마크업 언어의 표시를 설명하는 데 사용되는 언어입니다. 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하여 웹 페이지의 스타일을 지정하고 레이아웃을 지정하는 데 사용됩니다. CSS는 많은 작업을 저장하고 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있습니다. (원천: MDN 웹 문서, W3Schools)
관련 웹사이트 개발 용어