카테고리 없음 2025. 9. 26. 04:55

👍 1_글자관련태그.html

📘 주석 요약

<!DOCTYPE html> : 이 문서가 HTML임을 선언.
<html lang="ko"> : 문서 언어는 한국어.
<head> : 문서 정보(제목, 설명, 메타, 링크 등).
<meta charset="UTF-8"> : 한글 깨짐 방지, UTF-8 인코딩.
<meta name="viewport"> : 반응형 모바일 화면 지원.
<title> : 브라우저 탭에 표시되는 제목.
<body> : 실제 화면에 표시되는 내용.
<br> : 줄바꿈 태그(빈 태그).
<hr> : 수평선 태그.
<h1> ~ <h6> : 제목 태그, 단계별 계층 구조. (h1은 문서당 1개 권장)
<p> : 문단 나눔. 줄바꿈은 <br> 필요.
<pre> : 입력한 그대로 줄바꿈/공백 반영.
<b> : 단순 굵게(시각적 강조).
<strong> : 의미적 강조(스크린리더도 강조).
<i> : 단순 기울임.
<em> : 의미적 강조(기울임).
<s> : 취소선.
<mark> : 형광펜 강조.
<small> : 글자 작게.
<big> : 글자 크게. (HTML5에서 비권장)
<sub> : 아래첨자.
<sup> : 위첨자.

📑 코드 해석 (중요 부분 중심)

회원관리프로그램입니다. <br /> 1. 회원추가 <br /> 2. 전체 회원 조회

→ br로 강제 줄바꿈, 콘솔 출력처럼 나열.

<hr />

→ 화면에 가로 구분선.

<h1>대장 제목</h1> ... <h6>h6제목입니다.</h6> <h7>태그가 아닌 일반 텍스트로 인식</h7>

→ h1~h6까지만 제목 태그, h7은 없음.

<p> 문단영역을 나누는 태그로는 p태그와 prer가 있음 개행을 하더라도 줄바꿈이 일어나지 않음<br> ... </p>

→ <p> 내부에서는 개행이 무시, 줄바꿈은 <br> 필요.

<pre> pre의 경우 브라우저에 자체 스타일이 부여 개행하는데로 잘 들어감 </pre>

→ 입력한 공백·줄바꿈 그대로 반영.

→ 둘 다 굵게 보이지만 의미 차이: strong은 중요성까지 전달.

→ 둘 다 기울임 보이지만 em은 의미 강조.

<s>...</s> → 취소선 <mark style="background:red">...</mark> → 빨간 형광펜 효과 <small>...</small> → 글자 작게 <big>...</big> → 글자 크게 <sub>...</sub> → 아래첨자 <sup>...</sup> → 위첨자

🎯 시험 대비 핵심 포인트

h태그는 h1~h6까지만 존재 → h7은 일반 텍스트 처리.
시맨틱 차이:
- <b> vs <strong>
- <i> vs <em>
  의미 전달 가능한 태그를 쓰는 게 HTML5 표준/접근성 권장.
<p>는 자동 줄바꿈 안 함 → <br> 필요.
<pre>는 입력 그대로 표시 (코드 블록, 시·가사 표현에 유용).
<mark>, <small>, <sub>, <sup> 등은 “출력 예제 문제”로 자주 나옴.
<big>은 구식 태그 — 현재는 CSS로 대체 권장.

👉 정리하면, 이 파일은 텍스트 관련 HTML 태그 기본기 + 시맨틱/비시맨틱 구분을 묻는 시험에 딱 맞는 내용이에요.

👍 2_표태그.html을 정리해드릴게요.

📘 주석 요약

표(table): row(행) + cell(셀) 구조.
태그 구성:
- <table> : 표 전체
- <tr> : 행(Row)
- <td> : 일반 셀(Data Cell)
- <th> : 제목 셀(Header Cell, 기본적으로 굵게·가운데 정렬됨)
- <thead> : 표 머리 부분 (제목 행)
- <tbody> : 표 본문 부분 (데이터 행들)
- <tfoot> : 표 하단 요약 부분 (주로 합계, 비고 등)
셀 병합:
- colspan="2" → 열 2칸 합치기
- rowspan="2" → 행 2칸 합치기

🎯 시험 대비 핵심 포인트

표 기본 구조
- <table> → <thead> / <tbody> / <tfoot>
- 각 안에는 <tr> → <th> 또는 <td>
차이점
- <th>: 제목 셀 (자동 굵게, 가운데 정렬)
- <td>: 일반 데이터 셀
셀 병합 속성
- colspan (가로 병합), rowspan (세로 병합)
스타일 적용
- 표는 기본적으로 테두리 없음 → CSS로 border 지정해야 보임.
- border-collapse: collapse; 속성을 쓰면 이중 테두리 제거 가능 (시험에서 자주 물어봄).

👉 요약하면, 이 파일은 표 만들기, 행/열 병합, <th>와 <td> 차이, 테두리 스타일링이 시험 핵심이에요.

👍 3_이미지및멀티미디어관련태그.html

📘 주석 요약

이미지 태그 <img>
- 필수 속성: src(이미지 경로), alt(대체 텍스트)
- 선택 속성: width, height (픽셀 또는 % 가능)
- alt의 역할:
  - 이미지 로딩 실패 시 대체 텍스트 표시
  - 스크린 리더에서 읽어주는 문구 → 웹 접근성 필수
미디어 태그
- <audio> : 오디오 파일 재생
- <video> : 비디오 파일 재생
- 공통 속성:
  - src : 미디어 파일 경로
  - controls : 재생 컨트롤 표시
  - autoplay : 자동 재생
  - loop : 반복 재생
  - poster : 비디오 썸네일 이미지
CSS 스타일링
- #id:hover → 마우스 오버 시 효과
- cursor: pointer → 마우스 커서 변경
- transition + transform: scale(1.1) → 확대 애니메이션 효과

🎯 시험 대비 핵심 포인트

src와 alt 필수 속성, 의미와 역할 정확히 이해.
이미지 크기 조절: px vs %, 고정/가변 단위 차이.
CSS 효과:
- hover, cursor, transform, transition
- 이미지 확대/축소 예제.
미디어 태그 사용법: audio/video 기본 속성 암기.
HTML 접근성: alt → 화면 낭독기, 사용자 경험 고려.

✅ 요약: 이 파일은 이미지 삽입, 크기 조절, 마우스 오버 효과, 오디오 재생 등 HTML 실습의 핵심 내용이 포함되어 있습니다.

시험 문제 유형: <img> 필수 속성, 고정/가변 크기 차이, alt의 역할, CSS hover 적용, <audio> 속성 이해

👍 4.목록 관련 HTML 태그.html

📘 주석 요약

기본 목록 태그 <li>
- 항목(Item) 하나를 나타냄
- 반드시 <ul>(순서 없는 목록), <ol>(순서 있는 목록), <dl>(정의 리스트) 안에서 사용 권장
순서 없는 목록 <ul>
- 기본 bullet 표시: ●, ○, ■ 등
- CSS로 커스터마이징 가능
순서 있는 목록 <ol>
- 숫자, 알파벳, 로마 숫자 등 순서 표시 가능
- 속성 예시:
  - start="10" → 시작 번호 지정
  - type="I" → 로마 숫자 대문자
정의 리스트 <dl>
- <dt> : 용어(term)
- <dd> : 정의(description)

🎯 시험 대비 핵심 포인트

순서 없는 목록 : <ul> + <li>
순서 있는 목록 : <ol> + <li>
- 속성: start, type
정의 리스트 : <dl> + <dt> + <dd>
중첩 목록 가능 → ul 안에 ul/ol, ol 안에 ul/ol 가능
li 단독 사용은 비권장 → 반드시 목록 요소 안에서 쓰기

✅ 요약: 이 파일은 HTML 목록 태그 기본 구조와 중첩, 속성 활용을 보여줍니다.

시험에서 자주 나오는 포인트: ul vs ol vs dl, start/type 속성

👍 4_폼(form)과 입력(input) 양식 관련 HTML 태그 (중요)

📘 주석 요약

기본 아이디어
- Java에서 Scanner 역할을 HTML에서 대체
- 사용자 입력을 받아 서버로 전송
입력 태그 <input>
- type="text" : 한 줄 텍스트 입력
- type="password" : 비밀번호 입력, 입력값 숨김
- type="search" / url / email : 특화된 입력 상자
- type="number" : 숫자 입력 + 스핀박스 지원
- type="range" : 슬라이드바 입력
- type="date/month/week/time/datetime-local" : 날짜/시간 입력
- type="color" : 색상 선택
- type="file" : 파일 첨부
- type="hidden" : 화면에 표시하지 않고 값 전송
텍스트 영역 <textarea>
- 여러 줄 입력 가능
- cols, rows 속성으로 크기 조절
- CSS resize: none으로 크기 조절 제한 가능
폼 <form>
- 입력 요소를 묶어 서버로 값 전송
- action : 요청 URL
- method : 전송 방식 (GET/POST)
- submit 버튼 클릭 시 전송
그룹화 <fieldset> + <legend>
- <fieldset> : 입력 요소 그룹화
- <legend> : 그룹 제목
라디오 버튼 / 체크박스
- type="radio" : 같은 name 그룹 내 한 개만 선택 가능
- type="checkbox" : 여러 개 선택 가능, 값은 value 전달
버튼 만들기
- <input type="submit/reset/button">
- <button type="submit/reset/button">
- button 기본값은 submit (폼 내부에서)
선택 목록 <select> + <option>
- 제시된 옵션 중 선택
- value 속성값이 서버로 전송
- <datalist> : 텍스트박스와 선택 목록 결합

🎯 핵심 포인트 (시험 대비)

폼(Form) 이해
- form 내부 input 요소 → submit 클릭 시 action URL로 값 전송
- method 차이: GET → URL에 노출 / POST → URL 비노출
입력 요소 속성
- placeholder : 입력 안내 문구
- required : 필수 입력
- maxlength : 입력 최대 길이
- name : 서버에 전달될 key 값
- value : 실제 입력된 값
라디오 vs 체크박스
- 라디오 → 한 그룹 내 단일 선택
- 체크박스 → 여러 개 선택 가능
특수 입력 타입
- 숫자/슬라이드바/날짜/시간/색상/파일/숨김 값 등
- 각 타입의 특징과 전송 방식 숙지
그룹화 & 레이아웃
- fieldset + legend → 폼 구성 요소 묶기
- 시각적 구분 + 접근성 향상
버튼과 전송 동작
- button 기본 타입 주의 (폼 내부에서 submit 기본)
- reset → 입력값 초기화
선택 목록과 데이터 리스트
- <select> + <option> : 단일 선택 목록
- <datalist> : 텍스트 입력 + 선택 가능

✅ 요약:
이 파일은 HTML 폼 작성법, 다양한 input 타입, submit/GET/POST 전송, 라디오/체크박스, 버튼, select/datalist 등을 다루며, 실제 웹 입력 UI 구현과 시험에서 자주 출제되는 핵심 내용을 포함합니다.

👍 5_HTML 영역 관련 태그

📘 주석 요약

블록(block) 요소 vs 인라인(inline) 요소
- 블록 요소
  - 한 줄 전체를 차지, 자동 줄바꿈
  - 예: h1 ~ h6, p, pre, textarea, ul, ol, li, div
- 인라인 요소
  - 내용 길이만큼만 영역 차지, 줄바꿈 없음
  - 줄바꿈 필요 시 <br> 사용
  - 예: input, label, button, mark, s, img, span
div 요소
- 블록 요소
- 영역 지정 가능 (width, height)
- 레이아웃 그룹화 용도
span 요소
- 인라인 요소
- 블록처럼 영역 지정 가능하지만 줄바꿈 없음
- 텍스트 강조나 레이아웃 일부에 사용
iframe 요소
- 다른 웹페이지 또는 콘텐츠를 현재 문서에 포함
- 속성:
  - src : 포함할 페이지 URL
  - frameborder : 테두리 유무
  - width, height : 크기 지정
  - allowfullscreen : 전체 화면 허용

🎯 핵심 포인트 (시험 대비)

블록 vs 인라인
- 블록: 줄바꿈 자동, 영역 전체 사용
- 인라인: 내용 길이만큼 영역, 줄바꿈 없음, 필요 시 <br>
div와 span
- div : 레이아웃 구조 및 영역 그룹화
- span : 텍스트 강조 및 인라인 영역 지정
영역 지정
- width와 height 속성으로 크기 조절 가능
- CSS 스타일로 블록/인라인 영역 커스터마이징 가능
iframe
- 외부 페이지/미디어 포함
- 속성: src, width, height, frameborder, allowfullscreen
- 동영상, 다른 HTML 문서 삽입 시 사용

✅ 요약:
이 파일은 HTML에서 영역과 레이아웃 이해를 위한 실습입니다.

블록/인라인 구분
영역 지정(width, height)
외부 콘텐츠 포함(iframe)
시험 포인트: div vs span, 줄바꿈 특징, iframe 기본 속성

앵커 태그(a)와 하이퍼링크

👍 6_ 앵커 태그(a)와 하이퍼링크 관련 태그

📘 주석 요약

앵커 태그 <a>
- HyperLink 생성
- 문서 내/외부 페이지 이동 가능
속성
- href : 이동할 URL 또는 페이지 ID (#id)
- target : 링크 열기 방식
  - _self : 현재 창 (기본값)
  - _blank : 새 창 / 새 탭
- id : 페이지 내 점프(Anchor)용
이미지 링크
- <a> 안에 <img> 넣으면 이미지 클릭 시 이동 가능
페이지 내 점프
- <a href="#id"> → 해당 id 요소 위치로 이동
- 주로 “위로 가기” 버튼 등
스타일링
- <a>를 버튼처럼 보이게 CSS 적용 가능
- text-decoration, display, width, height, background-color, border-radius 등 사용

✅ 요약:
이 파일은 앵커 태그 기본, target 속성, 이미지 링크, 페이지 내 점프, CSS로 링크 버튼화까지 다루고 있습니다.

시험 포인트: href, target, 페이지 점프(#id), 이미지 링크, CSS 스타일링 기본

01_HTML 폴더 시험용 요약

구분태그주요 속성설명예시

문서 구조	<!DOCTYPE html>	없음	문서가 HTML5임을 선언	<!DOCTYPE html>
	<html lang="ko">	lang	문서 언어 지정	<html lang="ko">
	<head>	없음	문서 메타데이터, 제목, 링크 등을 작성	<head>...</head>
	<meta>	charset, name, content	문자 인코딩, 뷰포트, 설명 등	<meta charset="UTF-8">
	<title>	없음	브라우저 탭에 표시될 문서 제목	<title>문서제목</title>
	<body>	없음	화면에 표시할 내용을 작성	<body>...</body>

구분태그주요 속성설명예시

글자 / 텍스트	<h1> ~ <h6>	없음	제목 표시, h1은 문서당 1개 권장	<h1>제목</h1>
	<p>	없음	문단 영역	<p>문단</p>
	<pre>	없음	입력한 줄바꿈 그대로 표시	<pre>줄바꿈 유지</pre>
	<b> / <strong>	없음	글자 굵게 표시 (b: 시각, strong: 의미적)	<b>굵게</b>
	<i> / <em>	없음	글자 기울임 (i: 시각, em: 의미적)	<em>강조</em>
	<s>	없음	취소선	<s>취소</s>
	<mark>	없음	형광펜 효과	<mark>강조</mark>
	<small> / <big>	없음	글자 크기 조절	<small>작게</small>
	<sub> / <sup>	없음	아래첨자 / 위첨자	H<sub>2</sub>O

구분태그주요 속성설명예시

표	<table>	없음	표 전체	<table>...</table>
	<tr>	없음	행(row)	<tr>...</tr>
	<th>	colspan, rowspan	열 제목, 셀 합치기 가능	<th colspan="2">제목</th>
	<td>	colspan, rowspan	일반 셀	<td>내용</td>
	<thead> / <tbody> / <tfoot>	없음	표 구획 나누기	<thead>...</thead>

구분태그주요 속성설명예시

이미지 / 미디어	<img>	src, alt, width, height	이미지 삽입, alt: 대체텍스트	<img src="img.jpg" alt="설명">
	<audio>	src, controls, autoplay, loop	오디오 삽입	<audio src="sound.mp3" controls>
	<video>	src, controls, autoplay, loop, width, height, poster	동영상 삽입	<video src="movie.mp4" controls>

구분태그주요 속성설명예시

목록	<ul>	없음	순서 없는 목록	<ul><li>항목</li></ul>
	<ol>	start, type	순서 있는 목록	<ol start="10" type="I">
	<li>	없음	목록 항목	<li>HTML</li>
	<dl> / <dt> / <dd>	없음	설명 목록	<dl><dt>포함</dt><dd>내용</dd></dl>

구분태그주요 속성설명예시

폼 / 입력	<form>	action, method	입력 양식 틀, 서버로 데이터 전송	<form action="url" method="get">
	<input>	type, name, value, placeholder, required, maxlength, min, max, step	다양한 입력 요소	<input type="text" name="id">
	<textarea>	cols, rows, name	여러 줄 입력	<textarea name="content"></textarea>
	<button>	type	버튼 (submit / reset / button)	<button type="submit">제출</button>
	<select> / <option>	name, value	드롭다운 선택	<select name="menu"><option value="1">A</option></select>
	<datalist>	id	텍스트 입력+선택 옵션	<input list="menu"><datalist id="menu"><option>1</option></datalist>
	<fieldset> / <legend>	없음	폼 그룹화, 제목 표시	<fieldset><legend>정보</legend>...</fieldset>

구분태그주요 속성설명예시

영역 / 레이아웃	<div>	없음	블록 영역 지정, 레이아웃	<div>내용</div>
	<span>	없음	인라인 영역 지정, 텍스트 강조	<span>텍스트</span>
	<iframe>	src, width, height, frameborder, allowfullscreen	다른 페이지/미디어 포함	<iframe src="page.html"></iframe>

구분태그주요 속성설명예시

링크 / 앵커	<a>	href, target, id	하이퍼링크, 페이지 내 이동, 새 창 열기	<a href="url" target="_blank">링크</a>
	<a> + <img>	src, alt	이미지 클릭 시 링크 이동	<a href="url"><img src="img.jpg"></a>

🔑 시험 대비 핵심 포인트

HTML 구조: <!DOCTYPE html> → html → head → body
블록 vs 인라인 요소 구분 + 줄바꿈 특성
텍스트 관련 태그: 강조(b, strong, i, em), 취소선(s), 형광펜(mark)
표: table, tr, th, td + rowspan/colspan
이미지/미디어: img, audio, video + 필수 속성(src, alt)
목록: ul/ol/dl + li/dt/dd
폼: form, input, textarea, select, datalist, button, fieldset/legend
영역/레이아웃: div vs span, iframe 포함
링크: a 태그 기본, target 속성, 이미지 링크, 페이지 내 점프(#id)

ABOUT ME

기록을 통한 기억 기록을 통한 기억

📘 주석 요약

📑 코드 해석 (중요 부분 중심)

🎯 시험 대비 핵심 포인트

📘 주석 요약

🎯 시험 대비 핵심 포인트

👍 3_이미지및멀티미디어관련태그.html

📘 주석 요약

🎯 시험 대비 핵심 포인트

📘 주석 요약

🎯 시험 대비 핵심 포인트

👍 4_폼(form)과 입력(input) 양식 관련 HTML 태그 (중요)

📘 주석 요약

🎯 핵심 포인트 (시험 대비)

👍 5_HTML 영역 관련 태그

📘 주석 요약

🎯 핵심 포인트 (시험 대비)

👍 6_ 앵커 태그(a)와 하이퍼링크 관련 태그

📘 주석 요약

01_HTML 폴더 시험용 요약

🔑 시험 대비 핵심 포인트

티스토리툴바