📘 [Day01 HTML 학습 & 복습 노트]
💬 [ 강사님 말씀 정리 ]
| 번호 | 주요 내용 | 요약 |
|---|---|---|
| 1️⃣ | 구글링 습관화 | 개발자는 네이버보다 구글! 검색력은 생존력이다. |
| 2️⃣ | 운영체제 차이 | 프론트엔드 → Mac / 백엔드 → Windows (둘 다 익히면 👍) |
| 3️⃣ | 영어 공부 필수 | 책보다 공식 문서를 보자. (예: React, MDN, W3Schools) |
| 4️⃣ | React vs Vue vs Angular | 현재는 React가 대세. JS & Java는 기본 중의 기본! |
| 5️⃣ | 기술은 ‘이해’가 아니라 ‘숙련’ | 코드를 외우지 말고 손으로 익히자. 협업, 코드 공유 중요! |
| 6️⃣ | HTML은 프로그래밍 언어가 아니다 | HTML은 마크업 언어(Markup Language) |
| 7️⃣ | React 사용 이유 | 정적인 HTML을 동적으로 만들기 위해 |
| 8️⃣ | 서버의 이미지 접근 제한 | 서버는 로컬 파일 접근 불가 → 보안상 이유 |
| 9️⃣ | 백엔드 습관 | 큰 틀 먼저 잡고 내부를 채워라. 구조적 사고 연습! |
| 🔟 | 공식 문서 공부 추천 | HTML 공식문서 예제 직접 만들어보기 |
🌐 [ HTML 기초 이론 ]
HTML은 Hyper Text Markup Language — ‘이동 가능한 텍스트’를 표현하는 마크업 언어이다.
🧩 마크업(Markup)
→ 구조화된 표식으로, 텍스트에 기능을 부여하는 언어적 표시
| 구분 | 예시 | 설명 |
|---|---|---|
| 쌍태그 | <h1>제목</h1> | 열고 닫는 형태의 태그 |
| 단일태그 | <img /> | 닫는 태그가 없는 단독 사용 형태 |
💡 HTML ↔ 기계어 간의 번역은 브라우저(Chrome, Edge, Safari) 가 담당한다.
🧱 [ HTML 문서 구조 예시 ]
<html>
<head>
<title>문서 제목</title>
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body>
<h1>제목</h1>
<p>문단 내용</p>
</body>
</html>🧩 [ 주요 마크업 정리 ]
| 태그 | 의미 / 용도 | 주요 속성 |
|---|---|---|
<h1>~<h6> | 제목 (head) 태그 | - |
<p> | 문단(paragraph) | - |
<br /> | 줄바꿈 | - |
<hr /> | 구분선 | - |
<ul> / <ol> | 순서 없는 / 있는 리스트 | - |
<li> | 리스트 항목 | - |
<a href=""> | 하이퍼링크 | target="_blank" → 새 탭 열기 |
<img /> | 이미지 표시 | src, alt, width, height |
<audio> / <video> | 오디오 / 비디오 삽입 | src, controls, autoplay, muted |
📸 공통 속성:
src="파일경로"
🎛️ 오디오/비디오 옵션:controls,autoplay,muted
✏️ [ 마크업 작성 시 주의사항 ]
1️⃣ 들여쓰기로 부모-자식 구조를 명확히 표현한다.
2️⃣ 부모-자식 관계를 정확히 구분해야 CSS, JS 적용이 쉬워진다.
🔠 [ input 태그 속성 정리 ]
<input type="text" name="username" placeholder="이름을 입력하세요" />| 속성 | 설명 |
|---|---|
type | 입력 형식 지정 (text, password 등) |
name | 입력값의 식별자 |
value | 입력 상자의 기본값 |
disabled | 비활성화 |
readonly | 읽기 전용 |
maxlength | 최대 입력 문자 수 제한 |
autofocus | 페이지 로드시 자동 포커스 |
placeholder | 입력 가이드 텍스트 (입력 시 사라짐) |
⚠️ 주의:
<textarea>에placeholder를 사용할 때 태그 사이에 공백이 있으면 placeholder가 사라진다.
⚙️ [ input + type 속성 종류 ]
| type 값 | 설명 |
|---|---|
text | 기본 입력 상자 |
password | 비밀번호 입력 |
file | 파일 첨부 (multiple 가능) |
radio | 단일 선택 버튼 |
checkbox | 복수 선택 버튼 |
number | 숫자 입력 |
date | 날짜 선택 |
datetime-local | 날짜 + 시간 선택 |
time | 시간 선택 |
month | 월 선택 |
week | 주 선택 |
range | 범위 슬라이더 |
submit | 폼 전송 |
reset | 폼 초기화 |
button | 일반 버튼 |
<button type="button">버튼</button> | 일반 버튼(추천 방식) |
🧩 예시
<input type="button" value="목록 보기"/>
<input type="submit" value="글쓰기"/>📚 [ 참고 사이트 ]
| 카테고리 | 사이트명 | 설명 |
|---|---|---|
| 🖼️ 무료 이미지 | Pixabay | 사진, 영상, 음원 무료 다운로드 |
| ✍️ 무료 폰트 | 눈누 | 한글 웹폰트 무료 제공 |
💭 [ 오늘의 느낀점 ]
오늘 HTML을 배우면서, 단순히 코드를 ‘외우는 것’보다
왜 쓰는지, 어떻게 쓰는지를 아는 게 훨씬 중요하다는 걸 느꼈다.
내일 팀 프로젝트에서는 다양한 코드를 직접 써보며
눈과 손에 완전히 익혀보자!
🧱 [ 실습 결과 ]
실습 1
실습 2
실습 3
