2. 개발환경설정
VSCode 설치(인스톨러·포터블), 필수 확장 프로그램, Emmet `lang` 변경 등 HTML 학습용 개발 환경 세팅을 다룬다.
1. 관련 링크
| 항목 | 링크 |
|---|---|
| HTML 표준 (WHATWG) | https://html.spec.whatwg.org/ |
| HTML 유효성 검사 | https://validator.w3.org/ |
| CSS 유효성 검사 | https://jigsaw.w3.org/css-validator/ |
| MDN Web Docs (한국어) | https://developer.mozilla.org/ko/ |
| Can I Use (브라우저 호환성) | https://caniuse.com/ |
Info: 💡 위 링크는 즐겨찾기 해두면 평생 씁니다. 특히 MDN 은 모든 HTML/CSS/JS 문법의 표준 레퍼런스.
2. VSCode 설치
대표적인 무료 코드 에디터. 설치 방법은 두 가지 — 인스톨러 (보통 사용) 와 포터블 (USB 휴대 가능).
1. 다운로드
https://code.visualstudio.com/ 에서 OS 에 맞는 버전 다운로드.
2. 포터블 설치 (선택)
압축을 푼 디렉토리 안에 data 폴더 를 만들면 포터블 모드로 동작합니다 (설정·확장이 그 폴더 안에 저장됨).
| OS | 폴더 이름 |
|---|---|
| Windows / Linux | data |
| macOS | code-portable-data |
Mac 포터블 / 환경 폴더 위치
vscode 에서 포터블 프로그램을 다운로드 후 아래의 파일을 추가한다.
1. 압축 푼 디렉토리에 data 디렉토리 생성하기
(윈도우, 리눅스 = data / 맥 = code-portable-data)
2. 확장프로그램 설치
※ 각 플랫폼별 사용자 환경 폴더의 위치는 다음과 같습니다.
-
Windows
%APPDATA%\Code -
macOS
$HOME/Library/Application Support/Code -
Linux
$HOME/.config/Code
※ 각 플랫폼별 확장팩이 설치된 폴더의 위치는 다음과 같습니다.
-
Windows
%USERPROFILE%\.vscode\extensions -
macOS
~/.vscode/extensions -
Linux
~/.vscode/extensions
3. VSCode 확장 프로그램
Ctrl + Shift + X 로 확장 패널을 열고 다음 3개를 설치합니다.
| 확장 | 역할 |
|---|---|
| Live Server | HTML 파일을 실제 서버처럼 띄워서 변경 즉시 새로고침 |
| open in browser | 우클릭으로 다른 브라우저에서 열기 |
| Prettier - Code formatter | 코드 자동 정렬 (포맷터) |
Info: ⚠️ Live Server 가 "페이지가 작동하지 않습니다" 오류를 낼 때는 방화벽·포트(5500) 충돌·다른 서버 동작 여부를 확인.
4. VSCode 환경 설정
3. lang 속성을 ko 로 변경
Emmet 으로 HTML 골격(! + Tab)을 만들면 기본 <html lang="en"> 이 나옵니다. 한국어로 바꿔봅시다.
Ctrl + Shift + P→ Settings (UI) 열기
- 검색창에 Emmet: Variables 입력
- Add Item →
item: lang,value: ko→ OK - VSCode 재시작
4. Wrap with Abbreviation 단축키 등록
선택한 영역을 Emmet 약어로 한꺼번에 감싸는 기능. 자주 쓰니 단축키로 등록해 둡니다.
5. 화면 확대 / 축소
Ctrl + Shift + P → "Zoom" 검색.
6. 자동 줄바꿈
긴 줄이 화면 밖으로 나가지 않도록 설정합니다.
7. 숨김 파일 표시 (.git 등)
기본적으로 . 으로 시작하는 파일은 가려져 있습니다. 작업 시 보이게 설정.
5. VSCode 단축키
Info: 💡 macOS 에서는
Ctrl대신Cmd(⌘) 를 누릅니다.
| 동작 | 단축키 (Win/Linux) |
|---|---|
| 사이드 패널 열고 닫기 | Ctrl + B |
| 명령 팔레트(설정) 열기 | Ctrl + Shift + P |
| 자동 정렬 (Prettier) | Alt + Shift + F |
| 현재 줄 복사 (아래로) | Ctrl + Shift + ↓ |
| 줄 번호로 이동 | Ctrl + G |
| 단어 단위 커서 이동 | Ctrl + ← / Ctrl + → |
| 라이브 서버로 열기 | Alt + L → Alt + O |
| 다른 브라우저로 열기 | Shift + Alt + B |
| 파일 탐색기 패널 | Ctrl + Shift + E |
| 검색 패널 | Ctrl + Shift + F |
| 확장 프로그램 패널 | Ctrl + Shift + X |
| 터미널 열고 닫기 | Ctrl + ` |
| 다중 커서 (마우스) | Alt + 클릭 |
6. 개발자 도구 (Inspector)
Info: 👁️🗨️ 개발자 도구 = HTML / CSS / JavaScript 작업을 도와주는 브라우저 내장 도구.
모든 웹브라우저에 들어있습니다. 웹페이지에서 우클릭 > 검사 또는 단축키:
| OS / 동작 | 단축키 |
|---|---|
| Windows / Linux 열기 | F12 또는 Ctrl + Shift + I |
| macOS 열기 | ⌥ + ⌘ + I |
| 요소 직접 선택 모드 | Ctrl + Shift + C (Win) / ⌥ + ⌘ + C (Mac) |
8. 도구 열기
9. 도킹 위치 변경
도구 창 위치(아래 / 오른쪽 / 분리) 를 조정할 수 있습니다.
10. Elements 탭
웹페이지의 HTML 트리를 보여줍니다. 화살표 아이콘 (Ctrl + Shift + C) 으로 화면 요소를 클릭하면 해당 태그가 강조됩니다.
-
강아지 이미지를 누르면
<h1>이 강조됨 -
<h1>태그 안에<a>가 중첩 → 삼각형(▶) 클릭으로 확장/축소
11. 임시 수정
요소를 우클릭 > Edit text 또는 더블클릭으로 글씨를 수정할 수 있습니다.
Info: ⚠️ 이 수정은 내 화면에서만 적용됩니다. 새로고침 / 뒤로가기 하면 사라지고, 실제 서버 파일은 바뀌지 않습니다.
서비스 중인 웹페이지의 소스를 직접 보면서 학습하는 좋은 도구입니다.
7. 웹브라우저 설치
Info: ⚠️ Internet Explorer 는 2022년 6월 15일자로 단종되어 더 이상 설치하지 않습니다. 대신 Microsoft Edge 를 사용하세요.
| 브라우저 | 다운로드 |
|---|---|
| Chrome | google.com/chrome |
| Edge | microsoft.com/edge |
| Firefox | mozilla.org/firefox |
| Safari | macOS 기본 내장 |
| Opera | opera.com |
Info: 💡 같은 페이지가 여러 브라우저에서 어떻게 보이는지 확인하는 크로스 브라우저 테스트 가 실무의 기본입니다.
8. 호스팅 신청 (닷홈)
만든 페이지를 인터넷에 공개하려면 서버 공간(호스팅) 이 필요합니다. 학습용으로는 닷홈 무료 호스팅을 씁니다.
- https://www.dothome.co.kr/ 회원가입 — 아이디·비밀번호 반드시 메모
- 화면 중간쯤의 무료 호스팅 클릭
- 회원정보 입력 후 웹호스팅 설정 정보 메모 (이메일 인증 코드 대기)
Info: 📌 호스팅 정보 4가지 — FTP 주소, 포트, 아이디, 비밀번호 — 는 다음 단계(FTP) 에서 그대로 씁니다.
9. FTP 프로그램 (파일질라)
FTP = File Transfer Protocol. 내 컴퓨터의 파일을 호스팅 서버로 업로드 할 때 씁니다.
- https://filezilla-project.org/ 에서 파일질라 클라이언트 설치
- 사이트 관리자 열고 닷홈 정보 입력
- 로그인 성공 확인
Info: ⚠️ 로그인 실패 시 — 아이디 / 비밀번호를 다시 확인. 비밀번호에 특수문자가 들어 있으면 메모장에 한 번 옮겨 보면서 정확히 복붙.
Info: 💡 닷홈 계정의
html폴더 아래에index.html을 올리세요. 그래야내아이디.dothome.co.kr로 접속됩니다.
10. 유효성 검사
| 검사 | URL | 사용 방식 |
|---|---|---|
| HTML 검사 | https://validator.w3.org/ | URL / 파일 업로드 / 직접 입력 |
| CSS 검사 | https://jigsaw.w3.org/css-validator/ | 동일 |
Info: 👁️🗨️ 유효성 검사는 문법 오류 만 잡아줍니다 — 의미·접근성까지 검증하지는 않습니다. 그래도 시작 단계에선 빨간 줄 0개 를 목표로 두면 좋은 습관이 됩니다.
11. 부록: HTML 문서 설명
웹 페이지의 구조를 정의하는 HTML 문서에 대한 기본적인 설명입니다.
HTML(HyperText Markup Language)은 웹 페이지를 구조화하고 콘텐츠를 표시하기 위해 사용되는 표준 마크업 언어입니다. 제목, 단락, 목록 등의 텍스트 요소를 정의하고, 이미지, 비디오, 링크와 같은 멀티미디어 자원을 연결하여 웹 브라우저가 사용자에게 정보를 어떻게 보여줄지 결정합니다. HTML은 웹 기술의 핵심이며, CSS(스타일링) 및 JavaScript(동적 기능)와 결합하여 현대적인 웹 경험을 제공합니다.
Info: 💡 다른 더미 텍스트 도구 — Lorem Ipsum (영문, lipsum.com), 한글입숨 (hangul.thrive.kr).
12. 동영상설명
13. vscode 환경설정 저장경로
