HTML&CSS 시작하기
설치 & 셋팅 - 코드 작성을 위한 준비
HTML/CSS를 시작하려면 먼저 작업 도구를 갖춰야 합니다.
코드 에디터는 마이크로소프트사의 Visual Studio Code, 웹 브라우저는 Chrome을 사용합니다.
설치부터 확장 프로그램, 기본 설정, 첫 HTML 문서 생성까지 순서대로 정리합니다.
개발 환경 구성
Visual Studio Code 다운로드 페이지에서 설치 파일을 받습니다.
설치 단계 중 추가 작업 선택을 스킵하지 말고 체크해주세요.
우클릭으로 바로 열기
Code(으)로 열기 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가,
Code(으)로 열기 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가 에 체크해주세요.
크롬이 기본 브라우저가 아니라면 함께 설정해두세요. 윈도우 10의 경우 · 윈도우 11의 경우
확장 프로그램 설치 (Extension)
VSCode 설치 후 확장 프로그램을 설치합니다. 익스텐션(확장)은 코드를 보다 편리하게 작성할 수 있도록 도와주는 도구입니다.
좌측 사이드바의 확장 아이콘에서 검색해 설치합니다.
필수 설치
- Live Server — 라이브 기능으로 로컬 서버에서 개발을 시작하세요.
- Auto Rename Tag — 한 쌍인 HTML 태그(열림·닫음 태그)를 자동 수정합니다.
- Auto Close Tag — 자동으로 HTML 닫기 태그를 생성·수정합니다.
추천 익스텐션
- Sublime Material Theme — Visual Studio Code의 가장 멋진 색 테마
- Indent Rainbow — 들여쓰기를 더 쉽게 읽을 수 있습니다.
- Color Highlight — 편집기에서 웹 색상을 강조 표시합니다.
기본 설정
Ctrl + , 로 설정 화면을 엽니다.
- mouse wheel zoom 체크
- Tab size 검색, 4 입력
- Auto Save 검색, After Delay로 체크
한국어 설정
명령 팔레트를 열고(Ctrl + Shift + P) Language를 검색합니다.
Configure Display Language 클릭 → 한국어 선택. 프로그램이 자동으로 재실행됩니다.
색 테마
Material Theme 확장 프로그램 설치 후, 파일 - 기본 설정 - 테마 - 색 테마에서 변경합니다.
Sublime Material Theme - Dark — 이 교안에 사용된 색 테마입니다.
시작하기 (폴더 열기)
작업 폴더를 VSCode로 여는 방법은 세 가지입니다.
- 우클릭으로 바로 열기
- 윈도우10: 폴더 위에서 우클릭 - Code로 열기
- 윈도우11: 폴더 위에서 우클릭 - 추가 옵션 표시 - Code로 열기
- '폴더 열기' 버튼을 클릭하여 폴더 추가
- 작업할 폴더를 VSCode '탐색기' 위로 끌어다 놓기
우클릭 메뉴는 프로그램 설치 시 설정 가능합니다. 이미 설치한 이후라면 이 포스팅 내용을 참고하세요.
HTML 문서 생성
열어둔 폴더 안에 HTML 문서를 생성합니다.
- 새 파일 아이콘 클릭
- 파일명으로 'index.html' 기입
- 파일 확인: 우클릭 - 파일 탐색기에 표시
생성된 html 파일의 1번 라인에 ! 입력하고 Tab 키를 누르면 기본 HTML 코드가 자동으로 작성됩니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body></body> </html>
