HTML CSS JS 수업을 들은 내용을 정리해둔 게시글입니다!
1️⃣ Git & GitHub 세팅부터 시작하기
VS Code 터미널 열고 Git Bash 선택 → 아래 명령어로 깔끔하게 세팅!
git init
git config user.name "your_name"
git config user.email "your_email"
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your_repo.git
git push -u origin main2️⃣ 웹 개발의 3대 기둥
- HTML : 웹 페이지의 뼈대와 내용
- CSS : 멋진 스타일과 레이아웃
- JavaScript : 움직임과 인터랙션
3️⃣ 웹 페이지의 3단계 구성
- 배치: 텍스트, 이미지, 버튼 위치 잡기
- 스타일링: 색, 폰트, 크기 조절
- 기능 구현: 버튼 클릭, 애니메이션 등 동작 추가
4️⃣ HTML·CSS는 문서, JS는 코드
- HTML과 CSS는 ‘문서’를 만드는 것
- JS는 실제 ‘프로그래밍 언어’로, 웹 동작을 제어
- JS 배우면 ‘웹 개발자’로 가는 길 활짝!
5️⃣ VS Code 환경 최적화 팁
-
탭 크기 4 → 2, 워드랩 켜기
-
추천 확장팩 ⭐️
- 한글팩
- Material Icon
- One Dark Pro (테마)
- Live Server (자동 새로고침)
- Live Preview (내장 미리보기)
- Indent Rainbow (들여쓰기 색깔별 표시)
- Bracket Pair Colorizer (괄호 색깔 구분)
- Auto Rename Tag (태그 자동 변경)
6️⃣ HTML 기본 구조와 Emmet 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>문서 제목</title>
</head>
<body>
</body>
</html>! + Tab→ 기본 틀 자동 생성<html lang="ko">→ 페이지 언어 설정, SEO와 접근성 UP
7️⃣ 자주 쓰는 HTML 태그 모음
| 태그 | 설명 |
|---|---|
<h1> ~ <h6> | 제목 태그 |
<p> | 문단 |
<br> | 줄바꿈 |
<hr> | 구분선 |
<a href=""> | 링크 |
<img src="" alt=""> | 이미지 + 대체 텍스트 |
<ul>, <ol> + <li> | 리스트(순서/비순서) |
<div>, <span> | 박스와 인라인 요소 |
8️⃣ 태그 속성으로 기능 더하기
<img src="logo.png" alt="회사 로고" title="로고 이미지" />src: 이미지 경로alt: 이미지 설명 (접근성 필수!)title: 마우스 오버 시 설명
9️⃣ 특수문자 엔티티 자주 쓰는 것
| 문자 | 엔티티 |
|---|---|
< | < |
> | > |
| 공백 | |
🔟 텍스트 꾸미기 태그
<sup>: 위 첨자 (예: 1st)<sub>: 아래 첨자 (예: H2O)<u>: 밑줄<s>: 취소선<mark>: 하이라이트<abbr title="...">: 약어 뜻 설명
1️⃣1️⃣ 리스트 중첩 쉽게 만들기
- Emmet 예:
ul>li*4→ 4개 리스트 아이템 한 번에 - 들여쓰기만 잘 하면 깔끔한 중첩 리스트 가능
