coding 263
비주얼 스튜디오 코드 유용한 단축키 - 파일 찾기 (VS code)
알고 있으면 유용한 비주얼 스튜디오 코드 단축키 퀵오픈 사용방법을 알려드릴게요. 다른 말로 파일 찾기! 1. 파일 찾기 Quick Open 퀵오픈 기능은 파일을 빠르게 찾을 수 있는 기능입니다. 비주얼 스튜디오 코드에서 단축키로는 [Ctrl + P]로 열 수 있습니다. 위쪽에 검색창이 뜨는데 여기서 찾고자 하는 파일명을 검색해주시면 됩니다. 지금은 왼쪽 탐색기에 파일이 2개뿐이지만 파일이 많다면 스크롤로 찾아보기 힘들어집니다. 그럴 때 사용하면 유용한 기능입니다. - 파일 찾기 검색 기능을 이용해 파일을 찾아봅시다. 파일명을 전부 입력하지 않고 한 글자만 입력해도 위의 이미지처럼 포함된 파일이 모두 나옵니다. 이름이 헷갈려도 찾기가 편하죠. 2. 탐색기 숨기기 Toggle Sidebar 탐색기를 숨기는 ..
VS code 단축키 명령어 팔레트(Command Palette)
VS code 단축키 중 알아두면 유용한 명령어 팔레트 단축키를 알려드립니다. 1. 명령어 팔레트 Command Palette VS code에서 명령어 팔레트(Command Palette)의 단축키는 Ctrl + Shift + P 입니다. 그 외에도 F1 키를 눌러도 명령어 팔레트를 열 수 있습니다. 명령어 팔레트는 위의 이미지처럼 명령어를 검색해서 사용할 수 있습니다. - 키워드 입력 명령어 팔레트에 찾고자 하는 키워드를 입력하면 키워드가 포함된 작업이 쭉 뜨는데 여기서 원하는 작업을 클릭하거나 선택된 상태에서 엔터를 누르면 명령어가 실행됩니다. 특정 명령어의 단축키를 모르거나 찾기 힘들어도 검색해서 찾을 수 있다는 편리함이 있습니다. 2. 명령어 팔레트 사용하기 파일 저장 VS code에서 명령어 팔..
개발자 도구 이용해 CSS를 효과적으로 보는 방법
개발자 도구에서 CSS를 정리해서 볼 수 있는 방법이 있다는 것 알고 계시나요? 1. 개발자 도구 켜기 개발자 도구 일단 개발자 도구가 무엇이냐면 위의 이미지처럼 코드를 확인해볼 수 있는 창입니다. 내가 짠 코드를 확인해보거나, 다른 사이트의 벤치마킹을 할 때도 주로 사용합니다. - 검사 어떻게 켜느냐. 개발자 도구를 사용할 화면에서 [오른쪽 클릭 > 검사] 메뉴를 선택하면 개발자 도구 창이 뜹니다. 단축키로는 [Ctrl + Shift + I], [F12]를 눌러도 개발자 도구를 열 수 있습니다. 다만 개발자도구의 사용이 막혀있는 페이지에서는 열리지 않을 수 있으니 참고해주세요. 2. CSS Overview 설정 CSS Overview는 CSS의 전체적인 스타일을 확인할 수 있는 기능입니다. 개별적으로 ..
css 변수 사용 방법
홈페이지 제작 시 컬러, 패딩, 마진 등등 반복해서 같은 값을 사용해야 하는 경우가 많습니다. 여기에 변수를 사용하면 웹 페이지의 통일성을 유지하는 것은 물론이고 유지보수도 손쉽게 관리할 수 있습니다. :root :root는 문서의 가장 상단 요소를 선택하는 가상 클래스입니다만, 벌써부터 설명이 어려워졌죠. 간단히 말해 html에서 html 선택자 역할을 합니다. 그런데 변수의 범위를 전체에 적용하기 위해 html 선택자 역할을 하는 가상 클래스를 사용한다고 생각해주세요. ▼ 자세한 설명은 아래 문서를 참고해주세요. https://developer.mozilla.org/ko/docs/Web/CSS/:root :root - CSS: Cascading Style Sheets | MDN CSS :root 의사..
visual studio code 유용한 확장 기능 모음 7가지
비주얼 스튜디오 코드에서 유용한 확장 기능 몇 가지를 소개해드릴게요. 1. Korean(사용법) Language Pack for Visual Studio Code visual studio code를 처음 설치하면 영어가 기본 언어인데요 확장 기능을 이용해 한글로 변경할 수 있습니다. 한글 패치 ① Korean(사용법) Language Pack for Visual Studio Code 설치 ② 설치 방법 [coding/editor] - [vs code] 비주얼 스튜디오 코드 한글 패치 하기 [vs code] 비주얼 스튜디오 코드 한글 패치 하기 안녕하세요. 개자이너 씸플레이입니다. 비주얼 스튜디오 코드가 영문판이라 편하게 한글 패치를 해보려고 합니다. [비주얼 스튜디오 코드 다운로드 받기] [coding/..
