0. vscode 설치 및 확장 프로그램
https://code.visualstudio.com/ <- 여기서 vscode 다운로드 받고(윈도우버전), 확장 프로그램 설치
| 확장 프로그램 이름 | 주요 기능 및 특징 |
|---|---|
| Live Server | HTML 파일을 실시간으로 브라우저에서 미리보기 할 수 있으며, 수정 시 즉시 반영됩니다. |
| Prettier | 코드 포맷터로 HTML, CSS, JS 코드를 설정된 규칙에 따라 일관되게 자동 정렬합니다. |
| ESLint | JavaScript 코드의 문법 오류를 체크하고 일정한 코딩 스타일을 유지하도록 돕습니다. |
| CSS IntelliSense | CSS 작성 시 클래스명이나 속성 등을 자동으로 완성해 주어 작업 속도를 높여줍니다. |
| React Snippets | React 컴포넌트나 훅(Hook) 등 자주 쓰는 코드 조각을 단축어로 빠르게 생성합니다. |
| Next.js Snippets | Next.js 전용 스니펫을 제공하여 프레임워크 기반 개발 효율을 높여줍니다. |
| Rainbow Brackets 2 | 중첩된 괄호마다 서로 다른 색상을 입혀 코드의 구조와 짝을 쉽게 파악하게 합니다. |
| Path Intellisense | 파일 경로 입력 시 자동 완성 기능을 제공하여 파일 참조 오류를 줄여줍니다. |
| Code Spell Checker | 코드 내 오타를 찾아 밑줄로 표시하며, 사용자 정의 단어를 사전에 추가할 수 있습니다. |
| Auto Close Tag | HTML/XML 태그의 시작 태그를 작성하면 종료 태그를 자동으로 생성합니다. |
| Auto Rename Tag | 시작 태그나 종료 태그 중 하나만 수정해도 반대편 태그를 동시에 수정해줍니다. |
| JavaScript (ES6) snippets | 최신 ES6 문법에 최적화된 다양한 코드 스니펫을 제공합니다. |
| Material Icon Theme | 파일 확장자나 폴더 성격에 맞는 직관적인 아이콘을 적용하여 가독성을 높입니다. |
| Tailwind CSS IntelliSense | Tailwind CSS 클래스 자동 완성, 린팅, 미리보기 기능을 지원합니다. |
.
.
.
1. HTML
• 프론트엔드 : 사용자가 직접 보는 화면
• 백엔드 : 서버, 데이터베이스, API
| 핵심 언어 | UI 프레임워크 | 스타일링 | 개발 도구 | API & 통신 | 기타 |
|---|---|---|---|---|---|
| HTML | React | Tailwind CSS | Git & Github | REST API | Figma |
| CSS3 | Vue.js | SCSS/Sass | npm / yarn | Fetch / Axios | Chrome DevTools |
| JavaScript(ES6+) | Next.js | Bootstrap | Vite / Webpack | Json | Jest |
| TypeScript | Angular | CSS Modules | VSCode | OpenAPi(Swagger) | Vercel |
1-1. HTML
HyperText Markup Language 웹페이지의 구조와 내용을 정의하는 언어
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="홍길동의 포트폴리오 페이징">
<title>Document</title>
</head>
<body>
<!-- 헤더 : 사이트 전체 상단 영역 -->
<header>
<h1>홍길동</h1>
<h2>홍길동2</h2>
<nav>
<ul>
<li><a href="#about">소개</a></li>
<li><a href="#skills">기술스택</a></li>
<li><a href="#project">프로젝트</a></li>
<li><a href="#about">연락처</a></li>
</ul>
</nav>
</header>
<!-- main : 페이지의 핵심 콘텐츠 -->
<main>
<!-- section : 주제별 구역 -->
<section id="about">
<h2>안녕하세요</h2>
<p>저는 프론트엔드 개발자를 꿈꾸는 <strong>홍길동</strong>입니다.</p>
</section>
<section id="project">
<h2>프로젝트</h2>
<!-- article : 독립적인 컨텐츠 단위, 뉴스 기사나 블로그 게시글에서 많이 쓰입니다. -->
<article>
<h3>프로젝트 1 - 포트폴리오 웹사이트<h3>
<p>HTML, CSS로 만든 개인 포트폴리오 사이트입니다.</p>
</article>
<article>
<h3>프로젝트 2 - TO-do 앱<h3>
<p>TOdo앱입니다.</p>
</article>
<section>
<h2>연락처</h2>
<!-- address : 연락처 정보를 감싸는 시맨틱 태그 -->
<address>
<p>이메일</p>
<p>github</p>
</address>
</section>
</section>
</main>
<!-- footer : 사이트 하단 영역 -->
<footer>
<p>© 2026 홍길동 . ALL rights reserved.</p>
</footer>
<h1>HTML5 미디어 요소</h1>
<!-- 이미지 + 캡션 -->
<h2>이미지 (figure + figcaption)</h2>
<!--
figure : 이미지/코드/차트 등을 감싸는 컨테이너
figcaption : 그 설명 (캡션)
-->
<figure>
<img src="https://picsum.photos/seed/html5/400/250" alt="랜덤 이미지" width="400">
<figcaption> 그림 1. picsum.photos에서 불러온 랜덤 이미지입니다.</figcaption>
</figure>
<hr>
<!-- 비디오 -->
<h2>비디오</h2>
<!--
controls : 재생/정지/볼륨 컨트롤 표시
autoplay : 자동재생 (보통 muted와 함께 써야 작동)
loop : 반복재생
-->
<video width="400" controls>
<!-- source : 브라우저별 지원 포맷이 다를 때 여러 개 제공 -->
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
이 브라우저는 비디오를 지원하지 않습니다.
</video>
<!-- 오디오 -->
<h2>오디오</h2>
<audio controls>
<source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
이 브라우저는 오디오를 지원하지 않습니다.
</audio>
<hr>
<!-- 테이블 -->
<h2>수강생 목록</h2>
<!--
table : 표 전체
thead : 헤더 행 그룹
tbody : 본문 행 그룹
tr : 행 (row)
th : 헤더 셀 (굵게 + 가운데 정렬)
td : 일반 셀
-->
<table border="1" cellpadding="8" cellspacing="0">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>지역</th>
<th>관심분야</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>홍길동</td>
<td>25</td>
<td>서울</td>
<td>프론트엔드</td>
</tr>
<tr>
<td>2</td>
<td>신짱구</td>
<td>5</td>
<td>도쿄</td>
<td>초코비</td>
</tr>
<tr>
<td>3</td>
<td>김철수</td>
<td>5</td>
<td>도쿄</td>
<td>짱구</td>
</tr>
</tbody>
<!-- tfoot : 합계/요약 행 -->
<tfoot>
<tr>
<td colspan="5">총 3명</td>
</tr>
</tfoot>
</table>
</body>
</html>오늘은 기본적인 html 문법에 대해서 배웠다... 아직 어려운 점은 없었담
📝 https://www.notion.so/TIL-1-1-33a007c98e1a802f815bf6b2722f314e
