본문 바로가기

BLOG/HTML&CSS&SCSS

(9)
로딩페이지 제작시 도움되는 사이트 페이지 로딩 시 속도 및 색상 등 이미지로 받거나 css로 제공해주는 사이트다. https://loading.io/ loading.io - Your SVG + GIF + PNG Ajax Loading Icons Build Your Ajax Loading Icons with SVG / CSS / GIF / PNG ! loading.io
css3 로딩 애니매이션 스크립트 없이 css3로만 구현한 사이트, 로딩 화면하기 유용하다. 코드와 함께 소개되어있어 잘 모르겠다면 그냥 가져다 붙이면 된다. 단점 : 익스플로러에서는 아직 css3가 지원되지 않는 것이 많음 https://tobiasahlin.com/spinkit/ SpinKit Simple CSS Spinners tobiasahlin.com
css - input disabled 스타일 주기 html 태그에 disable이 된 상태의 css 스타일을 변경하고 싶을 때, input[type="text"]:disabled { background: red; } 이렇게 주면 된다.
svg 이미지 파일 없이 css로 그리기 - svg 코드로 변환 https://www.mobilefish.com/services/base64/base64.php Mobilefish.com - Base64 encoder and decoder This service allows you to Base64 encode or decode a given text or a file. The Base64 format uses the characters (A-Z, a-z), the numbers (0-9), and the "+", "/" and "=" symbols. Email programs, for example, applies Base64 encoding where binary data such as www.mobilefish.com - 한줄 코드로 바꾸..
SASS/SCSS/LESS를 CSS로 변환시켜주는 사이트 https://sass2css.herokuapp.com/ SASS2CSS | SASS/SCSS/LESS to CSS converter Sass, Scss, less to css converter | An online/offline tool for Convert sass, scss, less Code to CSS Code sass2css.herokuapp.com sass로 작업할 때 css 변환하기 귀찮을 때 유용하다.
css 페이지 드래그 색상변경하기 ::-moz-selection { background: red; color: white; } ::selection { background: red; color: white; } css에 넣어주면 된다. 원하는 배경 색상과 폰트 컬러를 지정하면 된다.
vscode 추천 확장 프로그램 그냥 사용해도 vscode는 매우 우수한 프로그램이다. 하지만 더 편하고 빠르게 코딩하기 위해서 확장 프로그램을 다운 받는 것이 좋다. 사용하면서 편했던 플러그인 들을 소개합니다. Auto Rename Tag 태그 네임 변경해야하는데 닫는 태그 찾기 귀찮을 때 같이 변경되어서 편해요. (가끔 안먹힐 때도 있으니 확인 꼭 해야해요!) Active File In Status Bar 프로그램 왼쪽 하단 상태바에 작업중인 파일 경로를 표시해줍니다. Bracket Pair Colorizer 괄호 안에 괄호 색상 구분해주는 플러그인 입니다. Color Highlight 기본 색상도 있지만 한눈에 보기 쉽게 색상표현해줌 Color Info 포토샵이 있다면 딱히 필요하진 않는데, rgb와 hex 값을 같이 볼 수 있어..
SASS(SCSS) 시작하기 - VS CODE설치 및 셋팅 내가 사용하는 에디터는 비주얼 스튜디오 코드, 텍스트 에디터를 많이 사용해봤지만 vscode가 제일 편하다. Visual Studio Code 웹 사이트에 들어가서 다운로드한다. https://code.visualstudio.com/ 이미 설치되어 있는 상태이므로 ㅠㅠ 설치 과정은 없습니다. 다운을 받았으면 영문으로 받아졌을 겁니다. 하지만 저는 영어울렁증이 있으므로 한국어 패키지를 다운로드할 것입니다. 전 이미 설치해놨어요 ㅎㅎㅎ korea만 쳐도 나옵니다. install 하신 후 다시 키면 한국어로 짠! 하고 바뀌어져 있습니다. 음 sass 확장 프로그램 설치하기 전, 제가 사용하는 테마가 궁금하실 수도 있으니 알려드리겠습니다. sass 설치 과정을 기록하려고... 테마와 한국어 패키지만 받아놨어요...