vscode 썸네일형 리스트형 [VSCODE] 코드 깔끔하게 정리하기, 선택영역서식 코드를 작성하다보면 다음과 같이 들여쓰기 상태가 안맞아 코드가 지저분해지는 경우가 있습니다. 이럴 때는 선택영역서식을 이용하면 됩니다. 아래와 같이 마우스 왼쪽클릭을 누르고 정리하고 싶은 코드를 블록으로 감싸줍니다. 블록 위에 마우스 오른쪽클릭을 하면 나오는 컨텍스트메뉴에서 '선택영역서식'을 선택해줍니다. 또는 블록으로 감싼 이후에 Ctrl + K, F를 눌러도 됩니다. ctrl을 누른 상태로 k를 누르고, k만 뗀 상태에서(ctrl은 떼지 않고 계속 누르고 있음) f를 눌러줍니다. 이와 같이 선택영역서식을 이용하면 아래와 같이 코드가 정렬됩니다. 더보기 [VSCODE] 웹문서 기본언어를 한국어로 바꾸기 ( lang=ko ) 웹문서의 기본 언어는 영어입니다. 아래의 코드 2번째 줄을 보시면 lang="en"이라고 되어 있습니다. 이 상태에서 코드를 작성할 때 한국어를 쓰게 되면 웹브라우저(크롬)에서 아래와 같이 Google Translate 창이 뜨게 됩니다. 이를 방지하기 위해서 lang="ko"로 변경하고 저장하면 Google Translate 창은 뜨지 않게 됩니다. 그런데 ! (느낌표)를 이용하여 기본 코드를 작성할 때마다 lang="en"를 lang="ko"로 고쳐줘야 하는 번거로움이 있습니다. 기본 코드 작성시 자동으로 lang="ko"가 입력되어 있도록 변경할 수 있습니다. VSCode에서 ctrl + , (콤마) 를 누르면 '설정'이 뜹니다. 또는 파일 메뉴 -> 기본 설정 -> 설정 으로 들어갈 수 있습니다... 더보기 [VSCODE] Live Server 설정하여 웹문서를 실시간으로 실행해보기 저장한 index.html 문서를 실제로 웹브라우저에서 열어볼 수 있습니다. 파일 탐색기에서 C:\JoWeb\html-test 폴더로 들어가서 index.html을 더블클릭하면 문서를 웹브라우저에서 볼 수 있습니다. 이 방법 말고, live server라는 확장팩을 설치하여 실시간으로 html 파일의 코딩 상황을 확인해볼 수 있습니다. 위와 같이 좌측 사이드바의 확장탭에서 'live server'를 검색하고 Ritwick Dey님의 Live Server를 설치하면 됩니다. 설치를 하면 다음과 같이 화면의 우측 하단에 Go Live 탭이 생깁니다. Go Live를 누르면 웹브라우저가 켜지고, 아래와 같이 지금 작성하고 있는 웹문서를 실시간으로 확인해볼 수 있습니다. VSCode에서 코드를 수정하고 ctrl.. 더보기 [VSCODE] VSCode 메뉴 한글화하기 아래와 같이 메뉴가 영어로 되어 있는 경우 한글화 팩을 설치하여 메뉴를 한글화할 수 있습니다. 위의 빨간색 동그라미 부분의 Extensions(확장)을 선택하고 'korean'을 검색하면 Korean Language Pack for Visual Studio Code가 나옵니다. 이 확장팩을 설치하면 다음과 같이 화면의 우측 하단에 다이얼로그 박스가 나옵니다. 'Change Language and Restart'를 눌러서 VSCode를 재실행해주면 모든 메뉴가 한글화됩니다. 더보기 [VSCODE] !를 이용하여 index.html 의 기본 코드 작성해보기 전 글에서와 같이 좌측 사이드바에서 index.html 파일을 만들고나면 우측에 html 코드를 작성할 수 있게 됩니다. 위와 같이 ! (느낌표)를 쓰고 tab키 또는 enter키를 누르면 아래와 같이 기본 코드가 자동으로 작성이 됩니다. DOCTYPE html> HTML5라는 최신 버전의 HTML을 사용하는 문서라는 뜻을 갖고 있습니다. HTML은 태그 형식의 언어입니다. 열린 태그와 닫힌 태그를 이용합니다. 예를 들어 는 열린 태그이고, 는 닫힌 태그입니다. 열린 태그부터 닫힌 태그까지 그 태그의 영영이 됩니다. 기본 언어가 영어로 설정되어 있는 웹문서가 시작하는 곳입니다. 마지막의 가 있는 부분까지 html 영역이 됩니다. html은 크게 head영역과 body영역으로 나뉘고, 에는 웹문서에 관한 .. 더보기 [VSCODE] 웹사이트를 만들기 위해 VSCODE 설치하기 웹페이지를 만들 수 있는 가장 유명한 툴인 Visual Studio Code를 설치해보겠습니다. 설치는 매우 단순합니다. 우선 구글에서 vscode 라고 검색하고, 아래와 같이 Visual Studio Code - Code Editing. Redefined 라고 적혀 있는 부분을 클릭합니다. 아래의 빨간색 동그라미 부분인 Download for Windows 라고 되어 있는 부분을 클릭합니다. 보라색 동그라미 부분을 누르면 다양한 버전의 VSCode를 다운로드 할 수 있지만, 자신의 운영체제에 가장 맞는 부분이 빨간색 동그라미 부분에 나오므로 빨간색 동그라미 부분을 클릭해서 다운로드 하시면 됩니다. 좌측 하단에 파일이 표시되고, 클릭하며 설치를 시작하시면 됩니다. 설치파일이 어디에 있는지 모를 경우 아래.. 더보기 이전 1 다음
