탐구소년

Sass 설치하기 Sass 구문을 기반으로 작성된 코드는 Sass 전처리기와 컴파일러의 도움을 받아 CSS 파일로 빌드(build)됩니다. 따라서 우리의 개발 환경(PC)에는 Sass가 준비되어 있어야 하며, 여기에서는 이를 위한 방법 두 가지를 제안합니다. - Visual Studio Code 확장 기능 Live Sass Compiler 설치하기 (Visual Studio Code 설치 필수) - Sass 명령행 인터페이스 설치하기 (Node.js 설치 필수) 두 가지 방법 모두를 차례대로 설명할 것이지만, 둘 중 아무거나 한 가지만 진행 하셔도 됩니다. 앞으로 이 포스팅에서는 두 번째 방법을 기반으로 설명을 이어갈 예정입니다. Visual Studio Code 확장 기능 Live Sass Compil..

" Sass 는 기능이 뛰어나고 안정적인 CSS 확장 언어이다." - Sass team - Sass란 Sass에 대해 얘기하기에 앞서, CSS에 대한 이야기를 먼저 해야 할 것 같습니다. CSS는 그 자체로도 충분히 재미있고, 훌륭한 형식 언어입니다. CSS는 웹 콘텐츠를 위한 스타일시트 형식 언어로써 (대체 언어가 사실상 존재하지 않는다는 사실이 한 몫 했겠지만)오랜 기간 사랑 받아 왔고, 아마 앞으로도 오래도록 사랑 받을 것입니다. 그러나 CSS를 조금이라도 다뤄 본 경험이 있는 개발자라면, 특유의 치명적 단점에 대해 아주 잘 알고 있을 것입니다. 예상하고 계실 테지만, CSS는 규모가 커질수록 코드가 복잡해지고, 유지보수가 불편해 집니다. CSS 코드 내에서 동일한(혹은 유사한) 코드를 재사용하기 ..

소개 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다(출처 MDN). 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있습니다. 즉 background-color 또는 color 와 같은 속성에는 사용할 수 없습니다. 사용법 linear-gradient() 함수 사용법은 다음과 같습니다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달합니다. 이는 선택사항이나, 지정하지 않을 경우 'to ..

안녕하세요! 오늘은 심심풀이로 CSS 애니메이션을 활용해 타이핑 효과를 구현하는 코드를 작성해보았습니다. 표시하고자 하는 텍스트를 미리 정해 둔 상태에서 시작해야 하므로 가정 먼저 다음과 같은 HTML 코드를 작성해주어야 합니다. 1 00000 정말로 초간단한.. 숫자 0 다섯개입니다. 숫자 0 크기를 기준으로 한 글자의 크기를 정할 예정이므로 0 외에 다른 문자는 사용하지 않았습니다. 목표는 이 숫자들이 하나씩 타이핑되는 것처럼 보여지는 페이지를 만드는 것입니다. 그럼 다음, CSS 코드입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @keyframes typing{ from{ width: 0; } } @keyframes cursor{ 50%{ border-color: t..