전체 글 썸네일형 리스트형 [VSCODE] Material Icon Theme 설치하여 더 나은 아이콘 사용하기 우선 Material Icon Theme를 설치하기 전에 폴더를 만들어보겠습니다. 아래와 같이 빨간색 동그라미 부분을 누른 후, 폴더 이름을 적어주고 엔터를 치면 폴더가 생성됩니다. 폴더 이름은 css라고 해보겠습니다. 폴더를 생성했더니 폴더 아이콘이 따로 없습니다. 파일과 폴더를 조금 더 구분하기 쉽게 하기 위해 'Material Icon Theme'를 설치해보겠습니다. 아래와 같이 빨간색 동그라미 부분의 'Extensions'를 클릭하고, material을 검색해줍니다. 아래와 같이 첫 번째에 뜨는 Material Icon Theme를 설치해줍니다. 설치를 완료하면 아래와 같이 상단에 '파일 아이콘 테마 선택' 박스가 나옵니다. 'Material Icon Theme'를 선택해줍니다. 아래와 같이 아래.. 더보기 [GitHub] GitBash를 이용하여 GitHub의 파일 다운받기 우리는 github에 올린 파일을 어떤 컴퓨터에서든 다운받아서 이어서 코딩을 할 수 있습니다. github에 올린 코드를 다운로드 하는 방법을 알아보겠습니다. 방법은 크게 2가지입니다. 한 가지는 git bash를 통해 다운받는 방법이고, 다른 한 가지는 github 사이트에서 직접 다운받는 방법입니다. 1. GitBash를 이용하여 github의 파일 다운받기 github의 파일은 원하는 위치에 다운로드하실 수 있습니다. github에서 다운로드를 하는 경우에는 root 폴더까지 생성되면서 다운로드 됩니다. 만약 기존의 c:\JoWeb\html-test 폴더에 다운받고 싶으시다면 html-test폴더까지 모두 지운 후에 c:\JoWeb 폴더에 다운받으시면 됩니다. 그러면 c:\JoWeb\html-tes.. 더보기 [GitHub] GitBash를 이용하여 GitHub에 파일 올리기 자신이 작성한 코드를 GitBash를 이용하여 GitHub에 올리는 방법을 알아보겠습니다. Git Bash는 Windows에서 Unix 명령어를 실행하고 Git 저장소를 관리할 수 있게 해주는 프로그램입니다. Git Bash는 Windows, Mac, Linux에서 모두 사용할 수 있으며, Git을 이용한 버전 관리를 하는 개발자들이 편리하게 사용합니다. Git Bash를 사용하면 Git 명령어를 편리하게 사용할 수 있으며, 윈도우에서도 리눅스나 맥 버전의 터미널을 사용하는 느낌을 받을 수 있습니다. 처음 올리는 프로젝트의 경우 1) git init - 현재 프로젝트에서 변경 사항 추적(버전관리)를 시작하는 명령어 2) git remote add origin https://github.com.. 더보기 [GitHub] GitHub에 저장소 만들고 지우기 우리는 작성한 코드를 GitHub라는 웹서버에 올리고, 인터넷이 연결되어 있는 곳이라면 어디서든 다시 그 코드를 다운받을 수 있습니다. 그 코드를 여러 사람들과 공유하여 프로젝트를 진행할 수도 있습니다. GitHub는 마이크로소프트에서 운영하는 사이트로 무료로 운영되고 있습니다. 처음에는 공개 저장소만 무료였고, 비공개 저장소는 결제를 해야했습니다. 프로젝트를 공개하는 조건으로만 무료였던 것입니다. 그러나 마이크로소프트에 인수된 후 2019년부터 비공개 저장소도 무료로 제공하였고, 2020년 4월부터 비공개 저장소의 공동 작업자수의 제한도 풀리게 되었습니다. 이 글에서는 GitHub에 저장소를 만들고 지우는 방법을 알아보겠습니다. 1. 가입하고 저장소 만들기 우선 www.github.com 에 들어간 후.. 더보기 [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영역으로 나뉘고, 에는 웹문서에 관한 .. 더보기 이전 1 2 3 다음
