55개 이상의 CSS 도구: 전처리기, 플러그인, 편집기 및 그라디언트 생성기

게시 됨: 2016-12-30

CSS는 Cascading Stylesheet의 약자입니다. CSS는 HTML과 함께 웹 페이지를 디자인하는 데 사용되는 마크업 언어입니다. HTML 페이지는 멋지게 보이지 않지만 CSS를 사용하면 아름답고 매력적으로 보이게 할 수 있습니다. 워드프레스 테마 개발을 배우려면 먼저 HTML과 CSS를 배워야 합니다.

테마 개발 도구 시리즈의 더 많은 기사

  • WordPress 개발 도구 시리즈 메인 페이지
  • HTML, CSS, JavaScript, jQuery, Bootstrap 및 WordPress를 마스터하기 위한 무료 책 15권 다운로드
  • 웹 개발자를 위한 30개 이상의 최고의 Chrome, Firefox 확장 프로그램, 자습서 및 도구의 최종 목록
  • HTML, CSS, PHP, jQuery, JavaScript, Git 등을 배우기 위한 38개의 무료 비디오 코스

이 기사에서는 초보자 및 고급 WordPress 개발자를 위한 최고의 CSS 도구를 공유합니다. HTML 또는 CSS에 대해 전혀 모르는 초보자이고 HTML, CSS 및 기타 프로그래밍 언어를 처음부터 배울 수 있는 38개의 무료 과정과 15개의 무료 전자책을 다운로드할 수 있습니다.

12 CSS 도구: CSS 전처리기, 앱 및 애드온

  1. Less CSS : Less는 CSS 전처리기입니다. 즉, CSS 언어를 확장하여 변수, 믹스인, 기능 및 기타 여러 기술을 허용하는 기능을 추가하여 CSS를 유지 관리, 테마 및 확장 가능하게 만들 수 있습니다.

  2. SASS 는 세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어라고 주장합니다. SASS는 거의 10년이 되었고 Compass, Bourbon 및 Susy를 포함하여 Sass로 구축된 프레임워크의 수는 끝이 없습니다.

  3. 스타일러스 는 일반 CSS의 기능을 확장하는 CSS 전처리기입니다. 강력한 논리적 기능, Node.js/JavaScript를 통해 실행할 수 있는 기능(Ruby 없음), Node.js 설정의 일부로 실행할 수 있는 기능, 깔끔하고 최소한의 유연한 구문을 제공합니다.

  4. CodeKit($32) 은 MAC 사용자에게 매우 강력하고 인기 있는 앱입니다. CodeKit은 Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown 및 Javascript를 컴파일할 수 있습니다. 브라우저 자동 새로 고침을 제공하고 Bower가 내장되어 있어 한 번의 클릭으로 Bootstrap, jQuery, Modernizr, Zurb Foundation, 심지어 WordPress를 포함한 6,000개 이상의 구성 요소를 설치할 수 있습니다.

  5. PrePros ($29) : Prepros는 자동 CSS 접두사로 LESS, Sass, Compass, Stylus, Jade 등을 컴파일하는 프리미엄 도구입니다. 크로스 브라우저 테스트를 위한 내장 서버와 함께 제공됩니다. Windows, Mac OS X 및 Linux에서 사용할 수 있습니다. 자동 CSS 접두사, 자동 브라우저 새로 고침, 파일 최소화, 이미지 최적화, 내장 서버 등을 제공합니다.

  6. Emmet : 다양한 코드 편집기가 코드를 빠르고 쉽게 작성할 수 있는 무료 플러그인입니다. Emmet은 순수 JavaScript로 작성되었으며 웹 브라우저, Node.js, Microsoft WSH 및 Mozilla Rhino와 같은 다양한 플랫폼에서 작동합니다.

  7. Fire.App : Windows용 CodeKit과 같은 도구는 fire.app입니다(Linux 및 Mac에서도 실행됨). Sass/Compass를 좋아하지만 명령줄 인터페이스가 싫으십니까? Fire.app은 Compass.app과 마찬가지로 일류 Sass/Compass를 지원합니다. 더 이상 공급업체 CSS 접두사와 수작업 스프라이트 이미지가 없습니다!. Fire.app은 Mac, Linux 및 Windows 플랫폼에서 작동합니다. 설치 과정은 클릭하고 드래그하는 것만큼 쉽습니다.

  8. Snippets 는 코드를 관리할 수 있는 무료 프로그램입니다. 다른 프로젝트에서 코드 스니펫을 구성 및 재사용하고 스니펫을 공개적으로 팀과 공유하는 데 도움이 됩니다. 이것은 Mac 및 Windows에서 사용할 수 있습니다.

  9. Koala 앱 은 웹 개발자가 보다 효율적으로 사용할 수 있도록 지원하는 Less, Sass, Compass 및 CoffeeScript 컴파일용 GUI 응용 프로그램입니다. Koala는 Windows, Linux 및 Mac에서 실행할 수 있습니다.

  10. LiveReload CSS 편집 및 이미지 변경 사항은 실시간으로 적용됩니다. CoffeeScript, SASS, LESS 등이 작동합니다. LiveReload는 파일 시스템의 변경 사항을 모니터링합니다. 파일을 저장하는 즉시 필요에 따라 사전 처리되고 브라우저가 새로 고쳐집니다.

  11. Scout App 은 웹 디자이너의 손에 Sass & Compass의 기능을 제공하는 크로스 플랫폼 앱입니다. Scout는 더 많은 제어, 최적화 및 구성을 제공하여 CSS 워크플로를 쉽게 만들 수 있도록 도와줍니다.

  12. Crunch 2 Crunch를 사용하면 Less, Sass, CoffeeScript, Markdown*을 작성한 다음 변경한 후 CSS, JavaScript 및 HTML을 자동으로 저장할 수 있습니다. 일반 CSS를 작성하고 싶으십니까? XML? 하스켈? 머쉬코드? Crunch를 사용하면 그렇게 할 수도 있습니다. Crunch 2는 원하는 작업을 수행할 수 있는 편집기입니다. 크런치가 당신을 사랑하기 때문입니다.

10 WordPress 사용자 정의 CSS 플러그인

WordPress에서 CSS를 사용자 지정하려면 WordPress 4.7부터 사용자 지정 프로그램에서 사용할 수 있는 많은 무료 플러그인 또는 내장 CSS 편집 기능을 사용할 수 있습니다. 사용자 정의 CSS를 쉽게 수정하고 저장할 수 있는 10가지 무료 CSS 플러그인 목록을 선별했습니다.

또한 이 튜토리얼을 읽고 Chrome 개발자 도구를 사용하여 WordPress 테마에서 CSS를 편집하는 방법과 jQuery 또는 PHP를 사용하지 않고 CSS로 WordPress 메뉴에 화살표를 추가하는 방법을 배울 수 있습니다.

15 CSS 그라디언트 생성기

  1. colorzilla 그라디언트 편집기
  2. cssmatic 그라디언트 편집기
  3. Angrytools 그라디언트 생성기
  4. gradientgenerator.com/
  5. css3generator.com/
  6. cssportal 그라디언트 생성기
  7. uigradients.com: 아름다운 색상 그라디언트를 사용할 준비가 되었습니다.
  8. css3factory 선형 그라디언트
  9. gradcolor 그라디언트 생성기
  10. 퍼뱅 RGB 그라디언트
  11. paintbycode 그라디언트 생성기
  12. virtuosoft 그라디언트 생성기
  13. westciv 방사형 그라디언트
  14. westciv 선형 그라디언트
  15. CSS3 그라디언트 생성기

10가지 무료 온라인 CSS 편집기

  1. CSS Portal의 온라인 CSS 편집기
  2. CSSdeck 랩
  3. ScratchPad 실시간 HTML 및 CSS 편집기
  4. EnjoyCSS의 온라인 CSS3 코드 생성기
  5. CSS 데스크
  6. jsfiddle : JavaScript, CSS, HTML 또는 CoffeeScript 온라인 테스트
  7. CSSmate 편집기
  8. CSS 미화 및 축소
  9. liveweave HTML5, CSS3 및 JavaScript 플레이그라운드
  10. SelfCSS – WYSIWYG CSS 편집기

CSS를 수정하는 10 Chrome 확장

  1. CSS 뷰어
  2. 스타일봇
  3. 사용자 CSS
  4. 라이브 CSS 편집기
  5. 개발 도구 자동 저장
  6. CSS 저장
  7. 반응형 웹 디자인 테스터
  8. 반응형 검사기
  9. 뷰포트 크기 조정
  10. 탭 크기 조정 – 분할 화면 레이아웃

마지막 단어

이것이 웹 디자이너와 개발자를 위한 CSS 도구 목록의 전부입니다. 이 무료 CSS 도구를 사용하여 스타일을 쉽게 사용자 정의하고 변경 사항을 저장할 수 있습니다. Chrome 확장 프로그램은 Chrome 개발자 도구를 종료하지 않고 CSS 편집 내용을 저장하는 데 매우 유용합니다.

CSS 전처리기를 사용하면 CSS를 효율적으로 작성할 수 있습니다. 나는 당신이 이 도구들을 사랑하기를 바랍니다. 이 기사는 테마 개발 도구 시리즈의 일부입니다. WordPress 테마 개발 뉴스레터에 가입하여 무료 책을 다운로드하고 WordPress 테마 개발에 대한 최신 기사와 튜토리얼을 받는 것을 잊지 마십시오.

참고 : 이 기사는 원래 createwptheme.com에 게시되었으며 허가를 받아 여기에 다시 게시했습니다.