[웹디자인개발기능사 실기] 노트 패드, 비쥬얼 스튜디오 코드 설치 및 사용 방법

안녕하세요. 이번 영상에서는 웹디자인 기능사의 소프트웨어 목록에 대한 변경사항이 있어 전달드리고자 합니다. 3월 2일자로 한국산업인력공단 홈페이지에 게시된 내용입니다. 책에서 소프트웨어로 사용되었던 그리고 기존 시험에서도 사용할 수 있었던 드림이버가 더 이상 지원하지 않게 되었습니다. 그래서 이번 영상에서는 노트패드 플러스 플러스와 비주얼 스튜디오 코드에 대한 설치방법 그리고 간단한 사용방법을 안내드리고자 합니다. 이 영상을 통해서 이 소프트웨어들을 사용하게 되신다면 책에서 사용한 드림이버를 그대로 따라하셔도 문제가 없을 것을 말씀드립니다. 먼저 노트패드 플러스 플러스를 다운받아 보도록 하겠습니다. 공식 홈페이지에 들어가면 여러가지 버전의 다운로드 파일을 확인하실 수 있습니다. 한국산업인력공단에 게시된 버전은 6.9으로 그 이상의 버전을 설치해 주시면 됩니다. 저는 8.2.1 버전을 설치해 보도록 하겠습니다. 본인 컴퓨터 사양에 맞춰서 적당한 인스톨러를 확인해서 설치해 주시면 되겠습니다. 인스톨러를 실행시켜 주시면 노트패드 플러스 플러스에서는 바로 언어 설정이 한국어로 가능합니다. 계속 다음 버튼, 동의한 버튼, 다음 버튼을 눌러 설치를 진행해 보도록 하겠습니다. 마침 버튼을 누르면 바로 노트패드 플러스 플러스가 실행이 됩니다. 먼저 노트패드에서 작업을 진행할 폴더를 바탕화면에 만들어 두었습니다. 이 폴더를 작업 영역으로 설정해 보도록 하겠습니다. 파일, 작업 영역으로 폴더 열기를 누르시면 바탕화면에서 작업 영역 폴더를 선택할 수 있습니다. 그러면 왼쪽에 탐색기 모양으로 작업 영역 폴더를 확인하실 수 있습니다. 오른쪽은 코드를 작성하는 코드 창입니다. 이곳에 HTML의 기본 형식인 코드를 작성해 보도록 하겠습니다. 새로운 코드가 작성되면 디스크 모양이 파란색이었다가 빨간색으로 변경이 됩니다. 그러면 저장을 하면 원래대로 돌아가는데요. 이때 중요한 것이 파일 확장자를 지정해 주는 것입니다. 노트패드에서는 새로운 파일을 만들 때 어떤 파일 형식인지를 미리 정하라고 하지 않습니다. 그래서 저장 버튼을 눌러 HTML로 저장해 보도록 하겠습니다. 저장되는 위치가 작업 영역 폴더임을 확인해 주시고요. index.html로 저장해 보도록 하겠습니다. 파일 이름은 index까지만 작성해 주시고 아래 파일 형식에서 HTML 확장자를 선택해 줍니다. 그럼 파일 이름에 .html의 확장자가 붙는 것을 확인할 수 있습니다. 저장을 눌러보시면 왼쪽 탐색기 영역의 작업 영역 폴더 밑에 index.html이 저장된 것을 확인할 수 있고 파일의 이름 또한 바뀐 것을 확인할 수 있습니다. 이 코드 파일을 HTML로 저장했기 때문에 오른쪽의 코드들도 색깔과 설정들이 바뀐 것을 확인할 수 있는데요. HTML 파일로 저장된 파일에서 코드를 작성할 때는 HTML에서 자주 사용하는 단추가들을 확인할 수 있습니다. 그리고 추가로 닫는 창에서도 확인할 수 있습니다. 코드 파일을 수정하고 나면 디스크가 빨간색으로 변해 있는 것을 확인할 수 있습니다. 이때는 저장 버튼을 눌러주시거나 키보드의 단축키인 Ctrl-S를 눌러주시면 파일이 다시 파란색으로 바뀌면서 저장이 완료됩니다. 다음으로는 노트패드에서 새로운 파일을 만들 때 하는 방법을 알려드리겠습니다. 메뉴파에서 첫번째 아이콘인 새 파일을 눌러보시면 코드창에 새로운 1이라는 파일이 생성이 됩니다. 저희가 먼저 만들어볼 것은 CSS 파일이기 때문에 해당하는 코드를 먼저 작성해 주도록 하겠습니다. 코드를 먼저 작성하는 이유는 빈칸의 경우에는 저장 아이콘이 활성화가 되지 않기 때문입니다. 그러면 저장해 보도록 하겠습니다. 작업영역 폴더임을 확인해 주시고요. CSS는 새로운 폴더에 저장하라고 유도하고 있기 때문에 새 폴더를 만들어줍니다. 파일의 이름은 Style로 지정해 주시고 파일의 형식은 CSS로 설정해 줍니다. 저장을 누르시면 CSS 폴더 내에 Style.css가 저장된 것을 확인할 수 있고 HTML과 마찬가지로 이번에는 CSS 형식의 글꼴 효성들이 지정된 것을 확인할 수 있습니다. 이번에는 자바스크립트 파일을 만들어 보도록 하겠습니다. 새 파일을 누르시고 자바스크립트의 첫 코드들을 작성해 줍니다. 지금까지 3가지 파일을 만들면서 눈치 채셨겠지만 노트패드에서는 기존의 드림위버에서 원래 제공되었던 코드의 틀이 없고 직접 수험자가 코드를 작성해야 하는 번거로움이 있습니다. 하지만 노트패드가 그만큼 편리한 부분도 있으니 기본적인 코드들의 틀은 외워주시는 게 좋겠습니다. 코드 작성이 완료되었으면 저장 버튼을 눌러 자바스크립트 파일을 저장해 보도록 하겠습니다. 자바스크립트 파일은 기본 루트 폴더에서 새 폴더를 만들어서 저장을 하게 됩니다. 자바스크립트라는 새로운 폴더를 만들어 주시고요. 그 안에 script.js 파일을 저장하도록 하겠습니다. 파일 형식에서 자바스크립트.js를 선택해 줍니다. 저장 버튼을 누르시면 이번에도 도일하게 자바스크립트의 글꼴 형식이 적용된 것을 확인하실 수 있습니다. 왼쪽의 탐색키 폴더에서도 script.js가 잘 저장된 것을 확인하실 수 있습니다. 이번에는 작성한 코드들이 실제 웹브라우저에서 어떻게 보이는지 확인하는 방법을 알려드리도록 하겠습니다. 기존의 드림이버에서 미리보기 혹은 단축기로 실행으로 제공되었던 기능이 노트패드에는 없기 때문에 직접 파일을 실행시켜 확인해야 합니다. 먼저 작업 폴더 영역을 들어가 줍니다. index.html을 실행시켜 주시면 되는데요. 혹시 왼쪽에 크롬 아이콘이 없으시다면 오른쪽 단추 연결 프로그램 크롬을 눌러 실행시켜 주시면 됩니다. 그러면 이렇게 새 크롬 창에서 해당 폴더에 저장되어 있는 파일을 열은 것을 확인하실 수 있는데요. 지금은 코드상에 작성된 내용이 없기 때문에 긴 화면이 출력되는 것을 확인하실 수 있습니다. 그러면 일부 코드를 적어서 다시 실행시켜 보도록 하겠습니다. 코드를 작성한 뒤에는 저장 버튼을 눌러주시고 다시 크롬으로 돌아와 새로 고친 버튼을 눌러주시면 됩니다. 지금은 이 제목 창이 한국투어로 변경된 것을 확인하실 수 있습니다. 그러면 일부 코드를 더 추가하여 다시 실행시켜 보도록 하겠습니다. 바디에 일부 내용들을 추가했고요. 이번에는 CSS 파일도 추가해 보도록 하겠습니다. 이 코드들을 여러 번 수정했을 때는 모든 파일을 한 번에 저장시키는 방법이 있습니다. 메뉴 파일에서 네 번째 아이콘이 모두 저장 버튼을 눌러주시면 됩니다. 자주 사용할 기능이기 때문에 상정 예외로 설정해 주시는 게 좋습니다. 그러면 모든 아이콘이 파란색인 것을 확인해 주시고요. 다시 크롬 창으로 돌아와 새로 고친 버튼을 눌러보시면 해당 수정된 내용들이 있는 것을 확인하실 수 있습니다. 앞으로도 실제 코드가 변경될 때마다 꼭 저장 버튼과 크롬에서 새로 고친 버튼을 눌러서 변경되는 내용들을 확인해 주시는 게 좋습니다. 이번에는 Visual Studio Code를 설치해 보도록 하겠습니다. 공식 사이트에 들어가시면 본인 컴퓨터 사양에 맞춰서 해당하는 다운로드 파일을 바로 눌러 설치 받으실 수도 있고 혹시 다른 플랫폼을 확인하고 싶으시다면 아델 플랫폼을 눌러서 원하는 운영체에게 설치 파일을 눌러 다운받으시면 됩니다. 자동으로 바로 설치 파일이 다운로드 받아주는 것을 확인해 주실 수 있습니다. 설치 파일, 즉 인스톨러가 다운이 완료된다면 눌러서 실행해 줍니다. 동의합니다에 체크한 뒤 여러가지 구성 요소들을 확인해 주시고 설치 버튼을 눌러 설치를 진행해 줍니다. 특별한 구성 요소를 확인하거나 체크를 설정, 해대하는 것들을 적용하지 않고도 설치를 정상적으로 완료하실 수 있습니다. 종료 버튼을 누르면 Visual Studio Code가 실행되는 것을 확인하실 수 있습니다. 그러면 왼쪽에 작업 영역 폴더가 삼색기 창으로 열린 것을 확인할 수 있습니다. 창을 조금 더 늘려서 작업을 진행해 보도록 하겠습니다. 새 파일을 만들기 위해서 파일, 새 파일을 눌러줍니다. 노트패드와 마찬가지로 저장되어 있지 않은 파일의 이름이나 형식이 지정되어 있지 않은 파일이 생성됩니다. 이때는 먼저 언어 선택으로 파일의 형식을 먼저 지정해 볼 수 있습니다. 그러면 조금 더 편리하게 바로 이런 태그들의 기능을 사용할 수 있는 장점이 있습니다. 일부 코드를 작성한 후에 Ctrl-S를 눌러 저장해 보도록 하겠습니다. 작업 영역 폴더가 잘 들어가 있는 것을 확인해 주시면 되고요. 파일의 이름은 index로 저장해 보도록 하겠습니다. 아래 파일 형식이 이미 html로 지정이 되어 있기 때문에 바로 저장을 늘려주셔도 좋습니다. 그러면 왼쪽에 탐색기 영역에 index.html 파일이 생성된 것을 확인하실 수 있습니다. 이번에는 또 이어서 css 파일도 생성해 보도록 하겠습니다. 새 파일을 눌러서 언어 선택 css로 설정해 주시고요. 엔터를 누르시면 파일의 형식이 여기 아이콘으로 나타나게 됩니다. 앞에서 html은 태그 모양의 아이콘이 생성이 되었고요. 이번에 css에서는 샵 모양이 추가된 것을 확인해 주실 수 있습니다. 그래서 캐릭터 셋을 먼저 지정을 해 보도록 하겠습니다. 그리고 일부 주석이 있지만 이 주석은 작성하지 않으셔도 괜찮습니다. 비주얼 스튜디오 코드에서는 저장되지 않은 항목은 이 오른쪽 이 파일 탭의 오른쪽에 동그란 점으로 표시가 됩니다. 그래서 꼭 저장을 해주셔야 이 점이 없어지니까 이걸로 저장이 됐는지 안 됐는지 확인해 주시면 됩니다. css 파일도 마저 저장시켜 보도록 하겠습니다. ctrl-x 버튼을 눌렀고요. 작업 영역 폴더에 캡 폴더 css 폴더를 만들어 주신 후 css 파일의 이름은 style로 다시 저장해 보도록 하겠습니다. 이렇게 파일의 이름을 수정하고 싶을 때는 오른쪽 단추 파일의 이름 바꾸기로 수정을 해주셔도 됩니다. 그러면 동일하게 실제 파일 탐색기에서 적용이 됐는지 먼저 확인해 보도록 하겠습니다. 파일 탐색기를 열어 css에 style.css가 잘 저장된 것을 확인할 수 있고요. 이번에는 동일하게 어떻게 파일을 작성한 내용을 미리 보게 할 수 있는지 실제 작업이 잘 진행되고 있는지 확인하는 방법을 말씀드리도록 하겠습니다. 동일하게 작업 영역 폴더에서 index.html을 열어주시면 됩니다. 그리고 혹시 파일이 수정될 때마다 전체 저장을 눌러주시면 되는데요. 자바스크립트에서도 동일하게 폴더를 작성해 줍니다. 비주얼 스튜디오 포드가 좋은 점은 이렇게 일부 포드가 아래에 자동완성 되었을 때 탭 버튼을 누르면 자동완성을 할 수 있습니다. 포드가 작성이 완료되었으면 저장 버튼을 눌러 작업 영역 폴더 내에 속 폴더 자바스크립트를 만들어주시고요. 그 안에 파일의 이름은 script로 저장해 주도록 하겠습니다. 파일 형식이 자바스크립트인 것도 확인해 주시면 됩니다. 이렇게 포드가 잘 작성된 것을 확인하실 수 있습니다. 지금까지 노트패드와 비주얼 스튜디오 코드의 설치 방법과 사용 방법을 알아보았습니다. 기존의 드림위버 사용이 익숙하신 분들은 적응할 시간이 필요하시겠지만 큰 불편함이 없으시도록 앞으로 진행될 문제풀이 영상을 따라 공부하고 연습해 보실 수 있도록 설명을 드리도록 하겠습니다. 수험생 독자 여러분의 합격을 기원합니다.