웹표준기술 1일차
2025. 12. 1. 17:47ㆍ대우개발원 수업 내용/웹표준기술(HTML)
반응형
웹 개발 기초
HTML
CSS
자바스크립트
1일차에 배운 HTML 기본 내용
📌 1일차 HTML 기본 개념 정리
✔ 2.1 HTML의 기본 구성 요소
1) 태그(Tag)
- 웹 페이지를 구성하는 텍스트, 이미지, 버튼 등의 요소를 정의하는 가장 작은 단위
- < > 홑화살괄호 안에 태그명을 작성
- 형식 :
- <태그명>
2) 속성(Attribute)
- 태그에 부가적인 의미나 기능을 부여
- 선택적으로 사용할 수 있고, 여러 개도 가능하지만 태그 없이 단독 사용 불가
- 속성명은 따옴표 없이, 값은 큰따옴표 안에 작성
- 값이 여러 개라면 큰따옴표 안에서 쉼표(,) 로 구분
- 형식 :
- <태그명 속성명="속성값">
- 예:
- <html lang="ko">
3) HTML 문법
- 콘텐츠가 있는 문법
- <태그>내용</태그>
- 콘텐츠가 없는 문법 (빈 태그, Empty Tag)
- <br> <img>
4) HTML 태그의 특징
- 대부분 시작태그 + 종료태그
예) - <html>...</html> <title>문서 제목</title>
- 종료태그 없이 사용하는 태그도 존재
- <br>
- 대소문자 구분 없음
- <HTML> ... </html>
- 공백·대문자·오타에 주의
올바른 예: - <img src="heart.jpg" width="100" height="50" alt="심장이미지">
5) 주석(Comment)
- 브라우저에서는 보이지 않음
- 코드 설명이나 메모 용도로 사용
- <!-- 여기는 주석입니다 -->
✔ 2.2 HTML의 기본 구조
HTML 문서는 일정한 기본 틀 안에서 작성된다.
1) DOCTYPE (문서형 정의 – DTD)
<!DOCTYPE html>
→ 웹 브라우저에게 “이 문서는 HTML5 형식이다”라고 선언.
2) html 태그
HTML 문서의 전체 영역을 감싸는 루트 태그
<html> ... </html>
3) head 태그
웹 브라우저에 직접 보이지 않는 정보 작성
- <meta> : 문자 인코딩, 문서 정보 등 메타데이터
- <title> : 브라우저 탭 제목
- <link> : CSS 연결
- <style> / <script> : 스타일/스크립트 작성
<head>
<meta charset="UTF-8">
<title>문서 제목</title>
</head>
4) body 태그
화면에 실제로 보여지는 모든 내용을 작성하는 영역
<body>
화면에 보이는 내용들…
</body>
✔ 2.3 HTML의 특징 파악하기
1) 블록 요소(Block Element)
- 공간과 상관없이 항상 줄 바꿈이 발생
- 예 :
- <h1> ~ <h6>
- <p>
2) 인라인 요소(Inline Element)
- 공간이 부족할 때만 줄 바꿈
- 예 :
- <a>
- <span>
3) 부모·자식·형제 관계
태그의 중첩 구조로 인해 관계가 형성됨
<div> ← 부모
<p> ← 자식
</p>
</div>
4) 줄 바꿈과 들여쓰기
- 강제 규칙은 아니지만 가독성을 위해 필수적으로 사용
- 들여쓰기를 통해 구조(부모·자식·형제)를 쉽게 파악할 수 있음
✔ 3.1 텍스트 작성 태그
1) hn 태그 (제목 태그)
<h1>큰 제목</h1>
<h2>중간 제목</h2>
2) p 태그 (단락/문장)
<p>문단 내용</p>
3) br 태그 (줄 바꿈)
줄 바꿈<br>여기서부터 새 줄
4) blockquote (긴 인용문)
<blockquote cite="원본 URL">문단 단위 인용문</blockquote>
5) q 태그 (짧은 인용문)
<q cite="원본 URL">짧은 인용문</q>
6) ins / del 태그
추가된 텍스트 / 삭제된 텍스트 표시
<ins>추가 텍스트</ins>
<del>삭제 텍스트</del>
7) sub / sup 태그 (아래·위 첨자)
H<sub>2</sub>O
X<sup>2</sup>
✔ 3.2 그룹짓기
1) div 태그
- 블록 요소를 묶을 때 사용 (레이아웃 구성 시 필수)
<div>내용 묶음</div>
2) span 태그
- 인라인 요소만 묶을 때 사용 (문장 안 강조 등)
<span>강조 텍스트</span>
✔ 3.3 목록 만들기
1) ul 태그 (비순서형 목록)
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>
- 불릿 모양은 CSS에서 변경 가능 (list-style-type)
2) ol 태그 (순서형 목록)
<ol>
<li>첫 번째</li>
<li>두 번째</li>
</ol>
- type 속성으로 번호 스타일 변경
- 1, a, A, i, I
- start 속성으로 시작 번호 조절
- reversed 속성으로 역순 표시 가능
- </li> 생략 가능 (HTML이 자동으로 판단)
3) dl 태그 (정의형 목록)
용어와 설명을 짝으로 작성
<dl>
<dt>용어</dt>
<dd>설명 내용</dd>
</dl>
✔ 전체 요약
구분 내용
| HTML 요소 | 태그, 속성, 문법, 주석 |
| 기본 구조 | DOCTYPE → html → head → body |
| 특징 | 블록·인라인, 부모·자식 관계, 들여쓰기 |
| 텍스트 태그 | h1~h6, p, br, blockquote, q, ins, del, sub, sup |
| 그룹 태그 | div, span |
| 목록 | ul, ol, dl |
사용한 코드로 정리
<!DOCTYPE html>
<html lang="ko">
<head>
<title>웹 문서 만들기</title>
</head>
<body>
<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web page!</title>
</head>
<body>
<!-- 웹 페이지에 표시할 내용을 적습니다 -->
<p>나의 첫번째 웹 페이지 <span style="color: red;">인라인요소</span></p>
<p>두번째 블럭요소</p>
</body>
</html>나의 첫번째 웹 페이지 인라인요소
두번째 블럭요소
태그 설명
| <!DOCTYPE html> | HTML5 문서 선언 |
| <html> | 문서 전체를 감싸는 루트 태그 |
| <head> | 설정 정보 영역 |
| <meta> | 인코딩·반응형·호환성 설정 |
| <title> | 브라우저 탭 제목 |
| <body> | 화면에 표시되는 콘텐츠 |
| <p> | 문단(블록 요소) |
| <span> | 문장 내부 스타일(인라인 요소) |
| <!-- --> | 주석 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>텍스트 연습</title>
</head>
<body>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
<hr>
<p>하나의 문단을 작성할 때는 <br>
p 태그를 사용합니다.</p>
<p>하나의 문단을 작성할 때는 p 태그를 사용합니다.</p>
<hr>
<blockquote cite="https://ko.wikipedia.org/wiki.HTML">
<P>하이퍼 텍스트 마크업 언어</P>
</blockquote>
<P>차세대웹기술지원센터의 데이터에 따르면 <q cite="https://lms.induk.ac.kr/">
21년~</q></P>
<hr>
<p>세일 기간을 맞이하여 온라인 강의 수강원을 할인된 금액(정가<del>36,000원</del><ins>20,000원</ins>)에 판매합니다.</p>
<hr>
<p>공기의 원소 기호는 H<sub>2</sub>0</p>
<p>4<sup>2</sup>은 16입니다.</p>
<hr>
<div class="movie" style="color: blueviolet;">
<p>영화 소개</p>
<p>영화를 소개하는 페이지입니다.</p>
</div>
<div class="tv">
<p>TV 프로그램 소개</p>
<p>TV 프로그램을을 소개하는 페이지입니다.</p>
</div>
<hr>
<h1>판매중인 과일</h1>
<ul type="square">
<li>바나나</li>
<li>사과</li>
<li>수박</li>
<hr>
<h1>제주 올레</h1>
<ul type="square">
<li>올레 1코스
<ul type="circle">
<li>코스 : 시흥 초등학교 옆 - 광치기 해변</li>
<li>거리 : 14.6km(4~5시간)</li>
<li>난이도 : 중</li>
</ul>
</li>
<li>올레 2코스
<ul type="disc">
<li>코스 : 광치기 해변 - 온평 포구</li>
<li>거리 : 14.5km(4~5시간)</li>
<li>난이도 : 중</li>
</ul>
</li>
</ul>
<hr>
<h1>오늘 할일</h1>
<ol type="i" start="4" reversed>
<li>아침 먹기</li>
<li>점심 먹기</li>
<li>저녁 먹기</li>
</ol>
<h1>1박 2일 가족 여행 코스</h1>
<ul>
<li>1일차
<ol type="a">
<li>해녀박물관</li>
<li>낚시체험</li>
</ol>
</li>
</ul>
<ul>
<li>2일차
<ol type="a" start="3">
<li>용눈이오름</li>
<li>만장굴</li>
<li>카약체험</li>
</ol>
</li>
</ul>
</ul>
<h1>내가</h1>
<hr>
<ul type="circle">
<li>집
<ul>
<li>가고싶다</li>
<li>가고싶다</li>
<li>가고싶다</li>
</ul>
</li>
<li>금요일
<ol type="1">
<li>토,일</li>
<li>토,일</li>
<li>토,일</li>
<li>토,일</li>
<li>토,일</li>
</ol>
</li>
</ul>
</body>
<hr>
<dl>
<dt>HTML</dt>
<dd>HTML설명</dd>
<dt>CSS</dt>
<dd>CSS 설명</dd>
</dl>
<hr>
<dl>
<dt><strong>Internet Explorer</strong></dt>
<dd>Internet Explorer 설명</dd>
<dt><b>Firefox</b></dt>
<dd>Firefox 설명</dd>
<dt>Chorme</dt>
<dd>Chorme 설명</dd>
</dl>
<hr>
</html>Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
하나의 문단을 작성할 때는
p 태그를 사용합니다.
하나의 문단을 작성할 때는 p 태그를 사용합니다.
하이퍼 텍스트 마크업 언어
차세대웹기술지원센터의 데이터에 따르면
21년~
세일 기간을 맞이하여 온라인 강의 수강원을 할인된 금액(정가
)에 판매합니다.
공기의 원소 기호는 H20
42은 16입니다.
영화 소개
영화를 소개하는 페이지입니다.
TV 프로그램 소개
TV 프로그램을을 소개하는 페이지입니다.
판매중인 과일
- 바나나
- 사과
- 수박
제주 올레
- 올레 1코스
- 코스 : 시흥 초등학교 옆 - 광치기 해변
- 거리 : 14.6km(4~5시간)
- 난이도 : 중
- 올레 2코스
- 코스 : 광치기 해변 - 온평 포구
- 거리 : 14.5km(4~5시간)
- 난이도 : 중
오늘 할일
- 아침 먹기
- 점심 먹기
- 저녁 먹기
1박 2일 가족 여행 코스
- 1일차
- 해녀박물관
- 낚시체험
- 2일차
- 용눈이오름
- 만장굴
- 카약체험
내가
- 집
- 가고싶다
- 가고싶다
- 가고싶다
- 금요일
- 토,일
- 토,일
- 토,일
- 토,일
- 토,일
- HTML
- HTML설명
- CSS
- CSS 설명
- Internet Explorer
- Internet Explorer 설명
- Firefox
- Firefox 설명
- Chorme
- Chorme 설명
아래는 **앞에서 이미 설명한 태그(doctype, html, head, meta, body, p, div 등)**을 제외하고,
이번 코드에서 새롭게 등장한 태그와 속성만 깔끔하게 정리한 설명이다.
📘 이번 코드에서 새롭게 등장한 태그 정리
✅ 1. <h1> ~ <h6> — 제목(Heading)
- 문서 제목을 표시하는 태그
- 숫자가 작을수록 더 큰 제목
- <h1>이 가장 크고 중요, <h6>가 가장 작음
✅ 2. <hr> — 수평선(Horizontal rule)
- 콘텐츠를 구분하는 구분선을 화면에 그린다.
✅ 3. <br> — 줄바꿈(Break)
- 문단 안에서 강제 줄바꿈을 한다.
✅ 4. <blockquote> — 인용문 블록
- 다른 사람의 글이나 출처가 있는 긴 인용문 표시
- 기본적으로 들여쓰기 적용
<blockquote cite="URL"> ... </blockquote>
- cite 속성: 인용한 원본 주소(눈에 보이진 않지만 의미적으로 남음)
✅ 5. <q> — 짧은 인용문(Inline Quote)
- 문장 안에서 “ ” 인용부호가 자동으로 붙는 태그
<q cite="...">내용</q>
✅ 6. <del> — 삭제된 텍스트(취소선)
- 취소선이 그어진 텍스트를 표현
예: 정가 ~36,000원~
✅ 7. <ins> — 추가된 텍스트(밑줄)
- 새롭게 삽입된 내용
예: 할인된 금액 표시 등
✅ 8. <sub> — 아래첨자 (subscript)
- 화학식 등에서 아래에 붙는 문자
예: H₂O
✅ 9. <sup> — 위첨자 (superscript)
- 지수나 각주 표현
예: 4²
✅ 10. <ul> — 순서 없는 목록(Unordered List)
- 점(●), 네모(■), 동그라미(○) 등의 리스트를 표현하는 목록
✔ type 속성
- type="square" : ■ 네모 점
- type="circle" : ○ 빈 동그라미
- type="disc" : ● 기본 목록 기호
✅ 11. <ol> — 순서 있는 목록(Ordered List)
- 1,2,3 또는 a,b,c 처럼 번호가 붙는 목록
✔ type 속성
- type="i" : 로마 숫자 (i, ii, iii…)
- type="1" : 숫자 목록
- type="a" : a, b, c …
✔ start 속성
- 번호 시작 값을 지정
예: start="4" → 4번부터 시작
✔ reversed 속성
- 번호를 뒤에서 앞으로 거꾸로 표시
✅ 12. <dl> — 정의 목록(Definition List)
- 용어와 그 설명을 표시하는 목록 방식
✔ 구성 요소
태그 의미
| <dt> | 정의할 단어(제목) |
| <dd> | 그 단어의 설명 |
예:
<dt>HTML</dt>
<dd>웹 페이지를 만드는 언어</dd>
✅ 13. <strong> / <b> — 굵은 글씨
✔ <strong>
- “중요한 텍스트”라는 의미적 강조
- 스크린리더 등에 의해 중요도로 인식됨
✔ <b>
- 단순히 굵게 보이기만 함
- 의미적 강조 없음
📌 추가로 사용된 속성들
✔ 1) style (인라인 스타일)
HTML 태그에 직접 CSS를 적용
예: style="color: blueviolet;"
✔ 2) class
CSS에서 특정 그룹의 요소를 선택할 때 사용하는 이름
예: <div class="movie">
📌 전체 새로운 태그 요약표
태그 설명
| <h1>~<h6> | 제목 |
| <hr> | 구분선 |
| <br> | 줄바꿈 |
| <blockquote> | 긴 인용문 |
| <q> | 짧은 인용문 |
| <del> | 취소선 |
| <ins> | 밑줄(삽입된 글) |
| <sub> | 아래첨자 |
| <sup> | 위첨자 |
| <ul> | 순서 없는 목록 |
| <ol> | 순서 있는 목록 |
| <li> | 목록 항목 |
| <dl> | 정의 목록 |
| <dt> | 용어 |
| <dd> | 설명 |
| <strong> | 의미 있는 강조 |
| <b> | 단순한 굵은 글씨 |
'대우개발원 수업 내용 > 웹표준기술(HTML)' 카테고리의 다른 글
| 웹표준기술 4일 (1) | 2025.12.03 |
|---|---|
| 웹표준기술 3일차 (0) | 2025.12.02 |
| 웹표준기술 2일차 (0) | 2025.12.01 |