css를 더 쉽게 수정하기, HTML 편집 프로그램 Visual studio code 다운 후기

css를 더 쉽게 수정하기, HTML 편집 프로그램 Visual studio code 다운 후기

티스토리 블로그를 시작하고 나서 스킨에 관심을 갖게 되고 다양한 무료 스킨과 유료 스킨을 보면서 나도 개성있는 나만의 스킨을 만들고 싶다라는 생각이 들었습니다. 무료 스킨 중에서도 좋은 기능과 디자인의 스킨이 많아서 사용하고 있고 만족하는 부분이 있지만, 글자 크기나 제목 색상 등 디테일한 부분을 수정하는 데에도 html이나 css를 수정하려면 기초적인 지식이 필요합니다.

html css 자바스크립트 등 아는 것이 없기 때문에 차차 배워나가면서 알게 된 부분을 정리해보려고 하는데요. 처음에는 메모장에서 일부 수정하거나 티스토리 스킨 편집창에서 수정하고 적용하고 새로고침하는 방식으로 했습니다.

그러다보니 어떤 부분을 수정했는지 잊어버려서 수정하는 데 시간이 오래 걸리기도 하고, 문제는 잘 못 수정했을 경우 다시 처음부터 시작하는 상황이 발생하다보니 css 편집을 더 쉽게 할 수 있는 방법이 없을까 css HTML 편집 프로그램을 찾아보게 되었습니다.

무료로 이용할 수 있는 HTML 코딩 프로그램을 정리해보면 다음과 같습니다.

HTML 에디터 (무료)

Visual Studio Code

Visual Studio Code

다운받는 곳 👉https://code.visualstudio.com/

MS사에서 개발한 무료 오픈 소스로 윈도우, MAC, LINUX에서 사용할 수 있고, 다른 HTML 에디터보다 빠른 편이라는 이야기가 있습니다. 확장 프로그램이 꾸준히 업데이트 되고 있습니다.

Notepad++

Notepad++

다운받는 곳 👉https://notepad-plus-plus.org/downloads/

Scintilla를 기반으로 C++로 작성되었으며 코딩 할 때 색상 지원이나 자동 완성 등의 기능을 지원합니다. 윈도우, MAC, LINUX에서 작동되는 HTML 코딩 프로그램입니다.

Atom

Atom

다운받는 곳 👉https://atom.io/

Github에서 오픈 소스로 만든 HTML 에디터입니다. Node.js를 기반 코드로 플러그인으로 기능 확장이 가능하며 윈도우, LINUX, MAC에서 사용할 수 있습니다. 실행 속도가 느린 편이라는 이야기가 있습니다.

Sublime text

Sublime text

다운받는 곳 👉https://www.sublimetext.com/

오픈 소스는 아니지만 무료 버전을 제공하고 있는 텍스트 에디터입니다. 속도가 빠른 편이며 윈도우, 리눅스, 맥에서 모두 사용 가능한 프로그램입니다. 화면 전환 기능과 검색 기능이 뛰어나다고 합니다.

아쉬운 점은 평가판은 무료로 이용할 수 있지만, 코드를 지속적으로 사용하려면 라이센스를 구입해야하는 단점이 있습니다. 라이센스 비용은 약 99달러입니다.

Visual Studio Code를 선택한 이유

무료 프로그램 중에서 Visual Studio Code 에디터를 선택한 이유는 MS사에서 꾸준히 운영 업데이트하고 오픈 소스라는 점입니다.

무료 html css 편집 프로그램을 찾아보다보니 소프트웨터 소스 코드가 오픈 소스가 있고, 아닌 것이 있다는 것도 알게 되고 프로그램 소스에도 저작권이 있다는 사실을 알게 되었습니다. 서브라임 텍스트(Sublime text)와 고민하였는데 코드가 오픈 소스가 아닌 것 같아서 돈을 주고 사용할 정도로 아직 실력이 좋은 것도 아니기 때문에 부담이 되는 부분이 있었습니다.

판매하는 소스가 무엇인지 정확하게는 모르겠지만, 일단 무료인 쪽을 사용하는 것이 낫다고 생각되어 Visual Studio Code를 선택하게 되었습니다.

▲ 일단 개인용, 상업용으로 Free라고 홈페이지에 명시되어있습니다

리서치를 찾아보니 상업용으로는 매출 10억원 미만 기업이거나 250대 PC 이하 인경우에서 무료라는 이야기도 있습니다. (※출처: https://happybono.wordpress.com)

Visual studio code의 코드는 https://github.com/Microsoft/vscode에서 확인할 수 있습니다. 오픈 소스인데, 저작권을 판매하는 형식이 아니라 사용 권리를 허가하는 방식입니다.

다음과 같은 상황을 제외하고는 사용할 수 있는 것 같네요.

• 소프트웨어에 포함될 수 있는 특정 오픈 소스 구성 요소의 사용에 적용되는 제3자 라이선스 조건에서 요구하는 경우만을 제외하고 소프트웨어 소스 코드의 리버스 엔지니어링, 디컴파일 또는 디스어셈블하거나 소스 코드의 추출을 시도하는 행위
• 소프트웨어에서 Microsoft 또는 그 공급자의 통지를 제거, 최소화, 차단 또는 수정하는 행위
• 법에 저촉되는 방식으로 소프트웨어를 사용하는 행위
• 소프트웨어를 공유, 게시, 임대 또는 대여하거나 다른 사용자가 사용할 수 있도록 소프트웨어를 독립 실행형 제품으로 제공하는 행위

Visual Studio Code 사용권

Visual Studio Code 저작권, 사용권에 대한 정보는 이곳에서 확인하실 수 있습니다.

Visual Studio Code 2022 권장 시스템 사양

• 램 4GB 이상
• CPU 1.8 GHz 이상 64비트 프로세서
• 최소 850MB, 최대 210GB의 사용 가능한 공간이 필요, 일반적인 설치에는 20~50GB의 하드 디스크 사용 가능한 공간이 필요
• 최소 디스플레이 해상도 720p(1280x720)를 지원하는 비디오 카드. Visual Studio는 WXGA(1366x768) 이상 해상도
• NET Framework 4.5.2 이상이 필요
• 윈도우 (windows 10 버전 1909 이상)
• 맥 ( Visual Studio 2019 버전 : macOS Catalina.properties 10.15, macOS Mojave 10.14, macOS High Sierra 10.13 )

Visual studio code 다운 후 설치 과정

1. https://code.visualstudio.com 에 방문합니다
2. Download for Windows를 클릭합니다.
3. stable 클릭합니다.
4. 다운 받는 파일 설치
5. 한글 버전 재설치
6. html css 언어 추가, Visual studio code 설치 완료

1. https://code.visualstudio.com 에 방문합니다

공식 홈페이지에 방문하여 [Download for Windows]를 클릭합니다. stable 버전과 insiders 버전이 있습니다.

stable insiders 차이는 안정적인 버전 /불안정하지만 새로운 기능 추가 버전 차이입니다. 윈도우 64 이상에서 설치할 수 있습니다.

2. 다운 받는 파일 설치 후 한글 버전 재 설치, html css 언어 추가

다운받은 Visual Studio Code 파일을 클릭하여 설치합니다.

라이선스 동의를 하고 계속 진행합니다.

프로그램이 설치 되고 완료가 됩니다. Visual studio Code 실행 체크하고 [종료]를 클릭하면 자동으로 실행됩니다.

프로그램이 자동 실행되면 우측 하단에 [언어팩을 설치하여 표시 언어를 한국어로 변경합니다]라는 창이 뜹니다. 여기서 [설치 및 다시 시작]을 클릭합니다.

시작하면서 셋팅을 진행합니다. 원하는 모양 선택에서는 색상을 선택할 수 있습니다. 모든 언어에 대한 다양한 지원을 클릭하면 다음과 같이 사용할 수 있는 언어가 나옵니다.

웹사이트 변경 코드를 사용할 예정이기 때문에 HTML/CSS를 클릭하여 언어 확장팩을 추가하였습니다.

VS code로 사용할 수 있는 언어는 위와 같습니다. 다양한 코딩 언어를 지원하는 프로그램입니다. Visual Studio code 설치와 다운까지 진행해보았는데요. 도움이 되셨길 바랍니다.