에디터 - Visual Studio Code

HTML 이야기를 하다가 왠 뜬금없는 에디터 이야기에. 왠 뜬금없는 프로그램 이름이라고 할 수도 있고, 이미 약간의 관심이라도 있었다면, Visual Studio Code (vscode로 많이 쓰임.) 에 대해서 들어 봤을 수도 있을 것 같다.

파일과 에디터

파일

여러분들이 PC를 이용하여 어떠한 작업을 할때 작업의 결과물이 어떤 형태를 가지고 있는지 상상해본 적이 있을 것이다. 예를 들어 파워포인트 문서를 작성한다고 하였을 때. 최종적인 결과물은 무엇일까? 당연하지만 "파일"의 형태를 가지고 있을것이다.
이미지를 만들면? 이미지 파일의 형태로 결과물을 얻을것이고, 다양한 프로그램을 이용하여 바로 파일을 만들어 내고 있을것이다.
웹 역시 HTML 을 이용한 파일을 만드는 것이 목적이다. HTML은 이전 글에서 언급하였던 규칙에 맞추어 작성된 텍스트 형태의 파일이다. 즉 글자를 입력하여 저장하는 형태라는 뜻이다.

에디터

텍스트 파일을 만들어 내는 프로그램은 다양하다. 거의 모든 컴퓨터에 기본적인 텍스트 에디터가 이미 포함되어 있으며, 널리 사용되는 MS 윈도우즈의 경우 메모장이 있으며, 맥의 경우 텍스트 편집기가 있다. 하지만 이러한 에디터는 지원기능이 부족하여 HTML 파일을 작성하기에는 무리가 있다. 근래 나와 인기가 있는 HTML을 포함하여 다른 여러가지 기능을 포함하는 에디터가 바로 위에서 언급한 vscode 이다. vscode는 여러가지 개발업무를 사용할 수 있도록 제공되는 본격적인 프로그램이므로 사용법을 익혀야 하지만, 배우기 쉽고 강력하므로 충분히 추천할 만한 에디터 일 것이다.

vscode 설치

윈도우즈 환경에서의 vscode 설치 방법에 대해서 알아보도록 하자. 맥이나 리눅스등에서 vscode를 손쉽게 설치할 수 있으며, 그 정보도 쉽게 구글링하여 찾아 볼 수 있으니 참조 하도록 하자.

다운로드

웹 브라우저를 열고 https://code.visualstudio.com/ 에 접속한다.

다운로드 받은 파일을 더블클릭하여 실행한다.



설치

설치가 시작되면서 라이선스에 동의한다. vscode는 무료 소프트웨어이므로 개인적인 사용에는 문제가 없다.


설치 옵션을 선택한다. 기본적으로 선택된 옵션만으로도 사용에 지장이 없을것이다.

선택된 설치 옵션을 다시 한번 확인한다.


설치 버튼을 클릭하여 설치를 진행한다


설치가 완료되면 설치 프로그램을 종료하고 vscode를 실행하게 된다.



댓글

댓글 쓰기

이 블로그의 인기 게시물

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
자세한 내용 보기