📌 HTML 문서의 기본 구조
<!doctype html>: 현재 문서가 HTML5 언어 로 작성한 웹 문서라는 뜻입니다.
<html> ~</html>: 웹 문서의 시작과 끝을 나타내 는 태그입니다. 웹 브라우저가 <html> 태그를 만나 면 </html>까지 소스를 읽어 화면에 표시합니다.
<head〉 ~</heady>: 웹 브라우저가 웹 문서를 해 석하는 데 필요한 정보를 입력하는 부분입니다.
〈body> ~</body>: 실제로 웹 브라우저 화면 에 나타나는 내용입니다.
<!DOCTYPE html> 또는 <!doctype html>
웹 브라우저에게 ‘이제부터 처리할 문서는 HTML 문서라고 알려주는 것
웹 문서 시작을 알리는 <html> 태그
• 실제문서정보와 내용이 시작되고 끝나는것을 표시하는 태그
• lang 속성을 사용해 문서에서 사용할 언어 지정
• 문서 정보를 지정하는 <head> 부분과 문서 내용을 입력하는 <body> 부분 포함
브라우저에게 정보를 주는 <head> 태그
• 문서 관련 정보 입력, 웹 브라우저 화면에는 보이지 않음.
• 문서에서 사용할 외부 파일 링크
문자 세트 등 문서 정보가 들어 있는 <meta> 태그 한글로 된 내용을 표시하기 위해서 UTF-8 문자 세트를 사용
‹meta charset="UTF-8">
이외에도 다양한 문서 정보를 지정
〈meta name="keywords" Content="html의 구조">- 웹 문서의 키워드
〈meta name="description" content="html의 구조를 알아봅시다">- 웹 문서의 설명
‹meta name="author" content="Kyunghee Ko"> - 웹 문서의 소유자나 제작자
문서 제목을 나타내는 <title> 태그
웹 브라우저에 내용을 표시하는 <body> 태그
• 실제 브라우저에 표시될 내용 입력
• 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들
📌 웹 문서 구조를 만드는 시맨틱 태그
✏️ 정의
시맨틱(semantic) : 의미론적인, 의미가 통하는 이름만 봐도 의미를 알 수 있는 HTML 태그
✏️ 왜 사용할까?
• 화면 낭독기 같은 보조 기기에서 사이트의 구조를 이해
• 할 수 있다.
• 문서 구조가 정확히 나눠지므로 PC나 모바일 등 다양한 화면에서 웹 문서를 표현하기가 쉽다.
• 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
✏️ 종류
헤더 영역을 나타내는 <header> 태그
- 헤더 영역
- 사이트 전체의 헤더 or 특정 영역의 헤더
- 검색 창이나 사이트 메뉴 삽입
내비게이션 영역을 나타내는 <nav> 태그
- 내비게이션 영역
- 웹 문서 위치에 영향을 받지 않음
- 문서 안에 여러 개 만들 수 있음(id로 구분)
핵심 콘텐츠를 담는 <main> 태그
- 웹 문서에서 핵심이 되는 내용
- 웹 문서마다 다르게 보여주는 내용으로 구성
- 웹 문서에서 한 번만 사용
독립적인 콘텐츠를 담는 <article> 태그
- 독립된 웹 콘텐츠 항목 (따로 떼어도 콘텐츠가 되는 내용)
<section>태그를 포함할 수 있음
콘텐츠 영역을 나타내는 <section> 태그
- 콘텐츠 영역
- 몇 개의 콘텐츠를 묶는 용도로 사용
- css 적용을 위해 묶는 용도로 쓰지 말 것
사이드 바 영역을 나타내는 <aside>
- 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바 표시
- 필수 요소가 아니므로 필요할 경우에만 사용
푸터 영역을 나타내는 <footer>
- 사이트 제작 정보나 저작권 정보, 연락처 등
- 다른 시맨틱 태그 사용해 다양한 정보 포함
여러 소스를 묶는 <div>
- 소스를 묶는 용도
- 영역을 구별하거나 스타일 적용하기 위해
📌 텍스트 태그 알아보기
<hn>
<hn> 태그- 제목 표시 기본형 : <hn> 제목 </hn> 제목을 표시할 때 사용하는 태그
크기 : h1 > 2 > h3 > h4 > h5 > h6
<p>
<p> 태그 - 텍스트 단락 기본형 : <p> 텍스트 </p>
입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어짐
<br>
<br> 태그 - 줄 바꾸기 기본형 : <br>
줄을 바꿀 위치에 <br> 태그를 사용. 닫는 태그가 없음
<blockquote>
<blockquote> 태그 - 인용문 넣기
기본형 :<blockquote> 인용 내용 </blockquote> 다른 텍스트보다 안으로 들여 써짐. (tab 눌렀을 때 처럼)
strong vs b
<strong>, <b>- 굵게 표시 기본형 : <strong> 내용 </strong>, <b> 내용 </b>
• <strong>- 중요한 내용이라서 강조해야 할 때
• <b> - 단순히 굵게 표시할 때
em vs i
<em>, 시 <>- 이탤릭체로 표시하기 기본형 : <em> 내용 </em> , </i> 내용 </i>
<em>- 흐름상 특정 부분을 강조하고 싶을 때
•<i> - 단순히 이탤릭체로 표시할 때
<ol>, <i>
<ol>, <i> - 순서 목록
기본형 : <o>
<i>항목 1</li>
<i>항목 2</li>
.......
<O>
• 각 항목 앞에 숫자가 붙여짐
• type 속성 : 순서 목록의 숫자 조정
(1: 숫자, a: 소문자, A:대문자, i:로마소문자,
1:로마대문자)
• start 속성 : 목록의 시작 번호 수정
<ul>, <i>
<ul>, <i> - 순서 없는 목록
기본형 : <u>
<i> 항목 1</i> <i>항목 2</liv>
•••••••
</u>
• 각 항목 앞에 불릿이 붙여짐
<dl>, <dt>, <dd>
<dl>, <dt>, <dd> - 설명 목록
<h2>상품 구성</h2>
<dl>
<dt>선물용 3kg</dt>
<dd>소과 13~16과</dd>
<dd>중과 10~12과</dd>
</dl>
<dl>
<dt>선물용 5kg</dt>
<dd>중과 15~19과</dd>
</dl>기본형 : <dl>
<dt> 이름(제목) 1</dt>
<dd> 값(설명) 1</dd>
<dt> 이름(제목) 2</dt>
<dd> 값(설명) 2</dd>
.......
</dl>
•'이름(제목)'과 '값(설명)' 형태로 된 목록
• <dt> 태그 - 이름(제목) 지정
• <dd> 태그 - 값(설명) 지정
• 하나의 <dt>에 여러 개의 <dd> 값을 가질 수 있다
표 만들기 태그
<caption> :표제목
<table>: 표전체
<tr> : 행,
<td> : 셀,
<th> : 제목 셀
<img>
<img> 태그 : 웹 문서에 이미지를 삽입할 때 사용
기본형 <img src="이미지 파일 경로" alt="대체용 텍스트">
<img> 태그의 width, height 속성
• 이미지 크기 조정하기
• width height 중 1개만 지정해도 나머지 속성은 자동으로 비율을 계산
오디오와 비디오 삽입
<object> 태그
• 음악 파일 뿐만 아니라 동영상이나 자바 애플릿, PDF 파일 등 다양한 개체를 삽입
• 기본형
<object width="너비" height="높이" data="파일"></object>
- data - 재생할 파일 지정
- width, height - 플레이어 화면 크기 지정
<embed> 태그
• 대부분 브라우저에서 사용 가능
<object>,<audio>,<video>태그를 지원하는 브라우저에서 멀티미디어 삽입할 때 사용
• 기본형
<embed src="파일 경로" width="너비" height="높이">
- 닫는 태그 없음
- Src : 멀티미디어 파일 지정
- width, height : 플레이어 크기 지정
<embed src="medias/spring.mp3">
<audio src="오디오 파일 경로"></audio>
<video src="비디오 파일 경로"></video>
플레이어 표시 없이 배경 음악 넣기
<audio src="medias/spring.mp3" autoplay loop></audio>
비디오 자동 재생하기
<video src="medias/salad.mp4" width="700" autoplay muted loop></video>
📌 폼 삽입하기
웹에서 만나는 폼
• 사용자가 웹 사이트로 정보를 보낼 수 있는 요소들은 모두 폼(form)
• 품과 관련된 대부분의 작업들은 정보를 저장하거나 검색하거나 수정하는 일들
• 이런 작업은 모두 데이터베이스를 기반으로 한다.
• 아이디를 입력하는 텍스트 필드나 버튼 같은 품의 형태를 만드는 것은 HTML 태그
• 품에 입력한 사용자 정보를 처리하는 것은 ASP나 PHP 같은 서버 프로그래밍 이용
<form> 태그
• 폼을 만드는 기본 태그.
<form>과 </form> 사이에 여러 폼 요소 삽입
• 기본형
<form [속성="속성값"]> 여러 폼 요소 </form>
<fieldset> 태그
• 폼 요소를 그룹으로 묶는 태그
• 기본형
<fieldset [속성="속성값"]>~</fieldset>
<label> 태그
• <input> 태그와 같은 폼 요소에 레이블을 붙일 때 사용
<Label>아이디(6자 이상)<input type="text"></Label>
<input> 태그의 type 속성 한 눈에 살펴보기
text
한 줄짜리 텍스트를 입력할 수 있는 텍스트 박스를 넣습니다.
password
비밀번호를 입력할 수 있는 필드를 넣습니다.
search
검색할 때 입력하는 필드를 넣습니다.
url
URL 주소를 입력할 수 있는 필드를 넣습니다.
email
이메일 주소를 입력할 수 있는 필드를 넣습니다.
tel
전화번호를 입력할 수 있는 필드를 넣습니다.
checkbox
주어진 여러 항목에서 2개 이상 선택할 수 있는 체크 박스를 넣습니다.
radio
주어진 여러 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
number
숫자를 조절할 수 있는 스핀 박스를 넣습니다.
range
숫자를 조절할 수 있는 슬라이드 막대를 넣습니다
date
사용자 지역을 기준으로 날짜(연, 월, 일)를 넣습니다.
month
사용자 지역을 기준으로 날짜(연, 월)를 넣습니다.
week
사용자 지역을 기준으로 날짜(연, 주)를 넣습니다.
time
사용자 지역을 기준으로 시간(시, 분, 초, 분할 초)을 넣습니다.
datetime
국제 표준시(UTC)로 설정된 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
datetime-local
사용자가 있는 지역을 기준으로 날짜와 시간(연, 월, 일, 시, 분, 초, 분할 초)을 넣습니다.
submit
전송 버튼을 넣습니다.
reset
리셋 버튼 을 넣습니다.
image
Submit 버튼 대신 사용할 이미지를 넣습니다.
button
일반 버튼을 넣습니다
file
파일을 첨부할 수 있는 버튼을 넣습니다.
hidden
사용자에게는 보이지 않지만 서버로 넘겨주는 값이 있는 필드를 만듭니다.
<input> 태그의 다양한 속성
autofocus
페이지를 불러오자마자 원하는 폼 요소에 마우스 커서 표시
placeholder
입력란에 표시하는 힌트로, 필드를 클릭하면 사라짐
readonly
내용을 보기만 하고 입력하지 못하게 함.
required
• 필수 필드 체크
• 필수 필드는 브라우저에서 직접 체크하는 것이므로 오류 메시지 내
용은 브라우저들마다 다르게 나타남
텍스트 영역 <textarea>
• 여러줄의텍스트입력
• 게시판글입력양식,사용자약관등
<select>, <optgroup>, <option>
• 여러 옵션 중에서 선택 – 드롭다운 목록
• 공간을 최소한으로 사용하면서 여러 옵션 표시 가능
<datalist>, <option>
• 데이터 목록에 제시한 값 중에서 선택하면 그 값이 자동으로 텍스트 필드에 입력됨
• 데이터 목록에 id를 이용해 이름을 붙이고,
• <input> 태그의 list 속성에 데이터 목록 id를 지정함.
<button>
• 다양한 형태의 버튼 삽입
• 화면 낭독기에서 버튼임을 정확히 전달할 수 있음
• CSS를 이용해 원하는 형태로 꾸밀 수 있음
