VSCode 설치 및 유용한 확장팩 소개 + 기본 태그 소개

웹 개발을 배우는 첫걸음은 적합한 코드 에디터를 선택하는 것입니다.

그중에서 Visual Studio Code (VSCode)는 직관적이고 강력한 기능을 제공하는 무료 코드 에디터로, 웹 개발에 적합한 도구입니다. 때문에 VSCode를 이용하여 웹 개발에 입분을 추천드리고 있습니다.

이 글을 접하는 선배님들께서도 첫 웹 개발 입문에 있어서 더 좋은 코드 에디터가 있다면 댓글 남겨주시면 감사하겠습니다!

이어서 VSCode 설치 방법과 함께, 초보자에게 유용한 확장팩들을 소개하고, HTML 기본 태그를 배우는 데 도움이 되는 팁을 제공하려고 합니다.

많이 부족하지만 서로의 경험을 공유해 주시면 감사하겠습니다!

1) VSCode 설치 방법: 간단한 절차로 바로 시작하기

VSCode는 회원가입 없이 쉽게 다운로드하고 설치할 수 있는 무료 코드 에디터입니다.

설치 과정은 간단하며, 특별한 절차 없이 바로 사용할 수 있습니다.

VSCode 다운로드
VSCode 공식 다운로드 페이지에 접속하여 운영체제에 맞는 버전을 다운로드합니다.
VSCode는 Windows, macOS, Linux 등 다양한 운영체제에서 지원되므로, 원하시는 버전을 선택하시면 됩니다.
설치 과정
다운로드한 설치 파일을 실행하고, 기본 설정을 그대로 두고 설치를 진행합니다.
설치 중 라이선스 관련이 나오면 동의 체크 후 "다음", 설치할 경로 확인 후 "다음" 이후 추가 작업 선택을 확인할 수 있는데 이는 읽어보시고 선택하셔도 되고, 바로 "다음"을 클릭하셔도 됩니다. 이후 설치가 완료되면 이제 언제든지 VSCode를 실행하여 웹 개발을 시작할 수 있습니다.

VSCode는 설치 후 바로 사용할 수 있어 복잡한 절차 없이 빠르게 개발을 시작할 수 있습니다.

VSCode의 가장 큰 장점 중 하나는 **확장팩(Extensions)**을 통해 기능을 확장할 수 있다는 점입니다. 웹 개발에 유용한 확장팩을 설치하면 코드 작성이 훨씬 효율적이고 편리해집니다. 여기에서는 웹 개발 초보자에게 추천하는 몇 가지 확장팩을 소개합니다.

처음 VSCode를 실행하면 영어로 기본설정이 되어있기 때문에 사용이 어려울 수 있습니다.

이를 위해 왼쪽 사이드 영역을 보시면 5번째 부분에 확장팩을 설치할 수 있는 아이콘이 있습니다.

아이콘을 클릭하여 위 확장팩을 설치하고 재시작 알림이 뜨는데 클릭하시면 한국버전으로 재실행이 됩니다!

Prettier는 코드 포매팅 도구로, 코드의 일관성을 유지하고 깔끔하게 정리해 줍니다.
HTML, CSS, JavaScript 코드에서 들여 쓰기와 공백을 자동으로 맞춰 가독성을 높여줍니다.

Live Server는 개발 중인 웹 페이지를 실시간으로 브라우저에서 확인할 수 있는 확장팩입니다.
HTML 파일을 수정하면 브라우저가 자동으로 새로 고침 되어, 작업 결과를 즉시 확인할 수 있습니다.

Auto Close Tag는 HTML 태그를 작성할 때 자동으로 닫는 태그를 추가해 주며, Auto Rename Tag는 태그 이름을 수정할 때 연결된 태그를 자동으로 수정해 줍니다.

위 두 확장팩 (Auto Close Tag & Auto Rename Tag)은

초기에는 직접 태그를 타이핑하면서 연습하는 것이 좋지만, 태그에 익숙해지면 매우 유용한 도구입니다.

이 외에도 CSS Peek, Image Preview 등 다양한 확장팩이 있으며,

이를 통해 웹 개발을 더욱 빠르고 편리하게 할 수 있습니다.

HTML은 웹 페이지의 구조를 정의하는 기본 언어입니다. 웹 개발을 시작하려면 HTML 태그를 이해하는 것이 중요합니다. 아래는 HTML을 배우는 데 꼭 알아두어야 할 기본 태그들입니다.

<! DOCTYPE html>
- 이 태그는 HTML5 문서임을 선언하는 태그로, 문서의 첫 번째 줄에 작성해야 합니다.
- HTML5로 작성된 문서임을 명시하여 웹 브라우저가 올바르게 해석하도록 합니다.
<html>, <head>, <body>
- <html>: HTML 문서의 시작을 나타냅니다.
- <head>: 문서의 메타데이터를 정의하는 영역입니다. (예: 제목, 문자셋, 스타일시트 등)
- <body>: 웹 페이지의 본문 콘텐츠가 들어가는 부분으로, 사용자가 보는 실제 콘텐츠를 포함합니다.
<h1>, <p>, <a>
- <h1>부터 <h6>까지는 제목을 정의하는 태그입니다. <h1>은 가장 중요한 제목, <h6>은 가장 작은 제목을 나타냅니다.
- <p>는 문단을 정의하는 태그로, 텍스트를 구분하는 데 사용됩니다.
- <a>는 하이퍼링크를 정의하는 태그로, 다른 웹 페이지로 연결할 때 사용됩니다.

이러한 태그들은 웹 페이지의 기본적인 구조를 형성하는 데 필수적인 태그들입니다.

VSCode는 웹 개발을 시작하는 데 매우 유용한 도구이며,

확장팩을 활용하면 개발 속도와 효율성을 크게 향상할 수 있습니다.

HTML 태그의 기본을 배우고, VSCode와 확장팩을 활용하여 웹 개발의 재미를 느껴보세요.

이 글에서 소개한 방법대로 설치하고 설정하면, 웹 개발의 세계로 자연스럽게 입문할 수 있습니다.

앞으로도 더 많은 HTML 태그와 웹 개발 팁을 소개할 예정이니, 저와 같이 자신만의 웹을 만들어가는 미래를 그려봅시다!

아직은 익숙하지 않아 많이 어색하실 겁니다.

어려워하실 필요 없습니다!

모든 과정의 첫걸음을 떼는 데는 어색하고 이상한 기분이 느껴지는 것은 당연한 과정입니다.

저도 이 블로그 글쓰기를 통해서 처음 글쓰기를 접해 봅니다.

많이 미흡하지만 점점 발전해 가는 현재의 자신을

미래의 자신을 그려가면서 살아가 보려고 합니다!

긴 글 읽어주셔서 감사합니다!