본문 바로가기

SCSS3

[CSS] SCSS로 웨이브 애니메이션 만들기🌊 웨이브 애니메이션 만들기🌊 이번 포스팅에서는 웨이브 애니메이션을 만들어보도록 하겠다. HTML Pug 코드 HTML 코드에서는 반복 작업해야 할 것을 Pug 코드에서는 JS처럼 for문이 사용 가능하여 소스를 간략화 할 수 있습니다. circle-wrap 클래스 div 박스 하나 안에 row 클래스 div(안에 circle클래스 div 12개) 12개를 만드는 방법이다. div.circle-wrap - for (var x =1; x 2022. 9. 19.

[CSS] SCSS & Pug 활용 - 강아지 애니메이션 만들기🐶 SCSS와 Pug를 이용해 강아지 애니메이션 만들기🐶🐾 이번 포스팅에서는 지난 포스팅에서 다뤘던 SCSS와 Pug를 이용하여 강아지 애니메이션을 만들어보도록 하겠다. HTML(Pug) 코드 먼저 HTML 코드는 Pug 방식으로 틀을 짜주도록 하자. .dog .dog-body .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-tail .dog-torso .dog-head .dog-ears .dog-ear .dog-ear .dog-eyes .dog-eye .dog-eye .dog-muzzle .dog-tongue 위의 Pug 코드를 HTML로 컴파일하기 위의 HTML(Pug) 코드를 보통의 HTML 코드로 컴파일 시킨 코드이.. 2022. 8. 18.

[CSS] Sass(SCSS) 알아보기 Sass(SCSS)란? Sass(=SCSS)에 대해 이해하기 전에 우선 CSS부터 이해하고 넘어가야 한다. CSS란 표현하지 못하는 게 없을 정도로 충분히 훌륭한 언어이긴 하나 치명적 단점 또한 존재한다. CSS는 규모가 커질수록 코드가 복잡해지고 유지보수에 매우 불리하다. Sass는 이러한 CSS의 치명적 단점을 보완하기 위해 나온 CSS 확장 언어이며, CSS에 존재하지 않는 다양한 기능들도 가지고 있다. Sass(SCSS)를 사용해야 하는 이유 Sass(SCSS)는 다음과 같은 장점들을 가지고 있다. · 가독성 : CSS보다 간단명료한 문법으로 CSS를 구조화하여 표현 가능 · 호환성 : 모든 버전의 CSS와 완벽 호환 · 기능성 : 다양한 기능을 제공하며, CSS보다 모든 면에서 뛰어남 · 인지도.. 2022. 8. 18.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바