반응형 html4 프론트엔드 개발자를 위한 Visual Studio Code 확장 프로그램(Extension) 설치 방법 및 추천 안녕하세요 😁 이번 포스팅에서는 Visual Studio Code에서 제가 유용하게 사용하고 있는 확장 프로그램을 추천해드리려고 합니다. 저는 홈페이지 관리를 하고 있어서 주로 HTML, CSS, JavaScript 코딩 작업들을 하고 있어서 프론트엔드 쪽 작업하시는 분들께 유용할 것 같아요~! 목차 Visual Studio Code 확장 프로그램(Extentions) 설치 방법 Visual Studio Code가 이미 다운로드 된 상태라고 생각하고 시작할게요! 우선 확장 프로그램 설치하는 방법부터 보여 드릴게요. 1. Visual Studio Code 좌측에서 아래 모양과 같은 아이콘을 클릭해주세요. 2. 검색창에 원하는 확장 프로그램명을 검색하고, Install 을 클릭해 주면 끝입니다. 엄청 간단해.. 2021. 1. 19. [Sass/SCSS] Sass/SCSS 세팅 - Sass 프로그램 설치 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. Scout-App 깔아서 잘 하고 있었는데 @use 플래그가 작동하지 않아서 Sass 프로그램을 설치해서 컴파일 해보기로 했다. 결론부터 말하자면,, 이 방법도 실패하긴 했다 ㅠㅠㅠㅠㅠ 흑 우선 컴파일 방법은 아래와 같이 진행했다. 1. Ruby 설치 (Windows) - https://rubyinstaller.org/downloads/ * Mac은 기본적으로 ruby가 설치되어 있다고 한다. 2. 윈도우 버튼 + R 누르고 cmd 입력해서 Command 창으로 들어간다. 3. Sass 설치 gem .. 2020. 3. 26. [Sass/SCSS] 기초 문법 공부 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. https://sass-lang.com/guide를 참고하였습니다. 변수(Variables) - $변수이름 자주 사용하는 정보들을 변수에 저장하여 사용할 수 있다. example : $main-color: #aaa $font-color: #555 nav{ background-color : $main-color; color : $font-color; } 중첩(Nesting) HTML에서는 중첩 및 계층 구조가 분명하게 구분되지만, CSS는 그렇지 않다. 😥 그러나, Sass(SCSS)는 HTML에서와 .. 2020. 3. 26. [Sass/SCSS] Sass/SCSS 세팅 - Scout-App 혼자 공부하고 정리하려고 만들었지만 혹시나 누군가에게 도움이 될 수 있지 않을까 해서 공개로 올리는 블로그입니다. 📝 전문가가 아니기 때문에 잘못된 내용이 있을 수도 있습니다. 저를 너무 믿지 말아주세오.. Sass(SCSS) 란? CSS 전처리기 중 한 종류. CSS 문법과 아주 유사하지만, 선택자의 중첩, 조건문, 반복문 등의 추가적인 기능을 제공한다. Sass와 SCSS의 차이점 SCSS는 CSS와 거의 같은 문법으로 Sass의 기능을 지원한다. 가장 큰 차이점은 아래와 같다. - Sass : 중괄호와 세미콜론 사용 X, 들여쓰기로 선택자의 유효범위를 구분한다. - SCSS : 중괄호로 선택자의 유효범위를 구분한다. Sass(SCSS) 컴파일러 - Scout-App 설치 Sass(SCSS)를 실행하.. 2020. 3. 26. 이전 1 다음 반응형
