728x90
반응형
웹 개발을 시작할 때 가장 먼저 배우게 되는 언어는 HTML입니다. HTML 코드를 효율적으로 작성하기 위해서는 개발 도구인 Visual Studio Code (VS Code) 와 다양한 확장 프로그램을 활용하는 것이 좋습니다. 이 글에서는 VS Code의 확장 프로그램 설치 방법과 기본적인 HTML 문법을 정리하였습니다.
1. 프로그램 확장파일 설치
비주얼 스튜디오 코드(Visual Studio Code)는 마이크로소프트에서 제공하는 무료 코드 편집기입니다.
아래는 웹 개발에 유용한 VS Code 확장 프로그램들입니다.
| 번호 | 확장 프로그램 | 설명 |
| 1 | Material Theme | VS Code에 구글 Material 디자인 테마 적용 |
| 2 | Material Icon Theme | 파일/폴더 아이콘을 보기 좋게 변경 |
| 3 | Auto Rename Tag | HTML 태그 수정 시 자동으로 짝 태그도 함께 수정 |
| 4 | HTML CSS Support | HTML 작성 시 CSS 지원 기능 추가 |
| 5 | CSS Peek | CSS 선택자 클릭 시 해당 정의 위치로 이동 |
| 6 | Autoprefixer | CSS에 자동으로 벤더 프리픽스 추가 |
| 7 | Indent-rainbow | 들여쓰기를 색으로 구분해 가독성 향상 |
| 8 | Live Server | 실시간으로 HTML 코드 결과 확인 가능 |
| 9 | Korean Language Pack | VS Code UI를 한글로 전환 |
| 10 | Prettier | 코드 자동 포맷팅 도구 |
| 11 | ESLint | 자바스크립트 코드 오류 검사 및 스타일 가이드 제공 |
| 12 | Path Intellisense | 경로 자동 완성 기능 제공 |
Live Server 확장 프로그램을 사용하면 HTML 코드 저장 시 자동으로 브라우저에 변경사항이 반영됩니다.
2. HTML 시작하기
HTML 문서의 기본 구조는 아래와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>첫 HTML 프로그램</title>
</head>
<body>
안녕하세요
</body>
</html>
이 코드를 .html 확장자로 저장하고 브라우저에서 열면 화면에 "안녕하세요" 라는 문장이 출력됩니다.
3. HTML 주요 태그 정리
HTML은 태그(tag) 를 이용해 웹 페이지의 구조를 작성합니다.
아래는 자주 사용하는 기본 태그들입니다.
1) 텍스트 관련 태그
| 태그 | 설명 |
| <h1> ~ <h6> | 제목(크기 순서대로 작아짐) |
| <p> | 문단(단락) 구분 |
| <br> | 줄바꿈 |
| <blockquote> | 인용문 삽입 |
| <b> | 굵은 글씨 (단순 강조) |
| <strong> | 중요 강조 |
| <i> | 이탤릭체 |
| <em> | 흐름상 강조 |
| <mark> | 형광펜 효과 |
| <u> / <ins> | 밑줄 |
| <sup> | 위첨자 |
| <sub> | 아래첨자 |
| <del> | 취소선 |
2) 목록 태그
| 태그 | 설명 |
| <ol> | 순서 있는 목록 |
| <ul> | 순서 없는 목록 |
| <li> | 목록의 항목 |
3) 설명 목록 태그
| 태그 | 설명 |
| <dl> | 설명 목록 전체 |
| <dt> | 항목 이름 |
| <dd> | 항목 설명 |
4) 표 관련 태그
| 태그 | 설명 |
| <table> | 표 전체 |
| <tr> | 행(row) |
| <td> | 일반 셀 |
| <th> | 제목 셀 |
| <thead> | 표 제목 영역 |
| <tbody> | 본문 영역 |
| <tfoot> | 요약 영역 |
| colspan / rowspan | 셀 병합 (열/행 합치기) |
| <caption> | 표 제목 표시 |
5) 특수문자
| 기호 | 코드 |
| ® | ® 또는 ® |
| ⓒ | © 또는 © |
4. Live Server로 실시간 HTML 보기
VS Code에서 Live Server 확장 프로그램을 설치한 후 .html 파일을 마우스 우클릭 → "Open with Live Server"를 클릭하면 웹 브라우저가 자동으로 열리며 실시간으로 수정된 결과를 확인할 수 있습니다.
반응형
'1인칭 학습 시점_웹개발 > HTML&CSS' 카테고리의 다른 글
| [HTML/CSS] float 속성과 요소의 위치 지정 방법 총정리 (0) | 2024.07.08 |
|---|---|
| [CSS 기초] 마진 vs 패딩 차이, 박스 모델 완벽 이해하기 (1) | 2024.07.05 |
| [HTML/CSS 기초] 웹폰트, 텍스트 스타일, 자간·행간, 목록 디자인까지 총정리 (0) | 2024.07.04 |
| [HTML/CSS 기초] 멀티미디어 태그, 폼 태그, 레이아웃 구조, CSS 문법 총정리 (1) | 2024.07.03 |
| [HTML] 멀티미디어 삽입과 폼 요소 태그 정리 (1) | 2024.07.02 |
