<!DOCTYPE html> - HTML5 문서임을 알리는 지시어
<html>
<head> <- 문서 제목, CSS 스타일 정의, 자바스크립트 코드, 메타데이터 정의
<title>
<body> <- 문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등
<!-- --> 주석
HTML 태그 특징
1)구성
1.시작태그, 종료태그 있는경우
<html> ... </html>
2.시작태그만 있는경우
<br>, <img.....>
2)태그, 속성은 대소문자 구분X
<HTML> ... </html> 가능
3)속성 값에 불필요한 공백 문자는 HTML5 표준에 어긋남.
가끔 한글이 깨져 보이는 경우
<head>태그안에 <meta charset="UTF-8">선언
<h1>, ~ <h6> 태그 (<h1> ~ </h1>)
head(문단 태그) 1이 가장크며 6으로 갈수록 작아짐
title 속성으로 툴팁 달기
<h1 title ="h1태그 작성">처럼 사용하면 h1으로 작성한 문단에 마우스를 가져다 대면 툴팁이 나옴
<p> ~ </p> - 단락 나누기
- 여러 개 빈 칸은 하나로. 여러 줄은 한줄로 붙여 출력
<br> - 새로운 줄로 넘어가기
<hr> - 수평선 긋기
< <를 표현하기위함 (HTML에서 <를 출력하기 위한 방식)
> >를 표현하기 위함
HTML5 문자는 유니코드 문자셋, UTF-8 코드 체계
예약어, 키보드로 입력이 어려운 기호, 심볼 등을 표현
1. 엔터티표현 (&엔더티;)
"문자를 표현하기 위해 "로 표현
2. 코드로 표현 (&#코드값;)
"문자를 표현하기 위해 "를 사용
<pre> ~ </pre>
pre태그를 사용하면 사용자가 입력한 그대로 출력
텍스트 꾸미기
<b>~</b> 진하게
<strong> ~ </strong> 중요한
<em> ~ </em> 강조
<i> ~ </i> 이탤릭으로 강조
<b> <i> ~ </i> </b> 진하게 이탤릭으로 강조
<smail> ~ </smail> 한 단계 작은 문자
<del> ~ </del> 취소선
<ins> ~ </ins> 밑줄
<sup> ~ </sup> 윗첨자
<sub> ~ </sub> 아래첨자
<mark> ~ </mark> 하이라이팅(형광펜)
태그는 블록태그, 인라인 태그로 구분.
블록 태그
- 항상 새 라인에서 시작하여 출력
- 양 옆에 다른 콘텐츠 배치 없이 한 라인 독점
- 가장 자주 사용 되는 블록 태그 <div>
인라인 태그
- 블록 속에 삽입되어 블록의 일부로 출력
- 가장 자주 사용 되는 인라인 태그 <span>
메타 데이터(meta data) : 데이터를 설명하는 데이터
- 사진 데이터의 meta data = 장소, 시간
- 이미지 데이터 meta data = 이미지 폭, 높이, 컬러 해상도
- 오디오 데이터 meta data = 재생 시간, 채널 수, 샘플링 주파수
HTML meat data 태그
- <base>, <link>, <script>, <style>, <title>, <meta>
meta data는 <head> 태그 안에 작성!! (단, <script>는 <body>에 사용가능)
<base>
<body><a href="http://www.naver.com/score/math.html">수학</a></body>을
=>
<head><base href="http://www.naver.com/score/"></head> 선언하면
<body><a href="math.html">수학</a></body>가 된다.
즉, <base>는 기본적으로 사용될 URL 경로 설정을 해준다.
<link> - 외부 자원 연결에 사용 (주로 CSS)
mystyle.css에 저장된 스타일 시트 불러오기
<head> <link type="text/css" rel="stylesheet" href="mystyle.css"> </head>
<meta> - 다양한 메타 데이터 표현
ex) 웹 페이지 저작자, 문자 인코딩 방식, 내용
<img> 태그의 src 속성
img
src="이미지 파일 URL
alt="문자열"
width="이미지 폭"
height="이미지 높이"
리스트 만들기
3가지 종류!
1.순서 있는 리스트(ordered list) - <ol></ol>
2.순서 없는 리스트(unorederd list) - <ul></ul>
3.정의 리스트(definition list) - <dl></dl>
리스트 아이템
<li>...</li> (</;i>생략 가능)
<ol>
<li></li>
<li></li>
</ol> <-<ul>도 사용 방법 동일
<dl>
<dt></dt> //title 제목
<dd></dd> //description 설명
</dl> <- 방식이 살짝 다름.
<ol type = "1"|"A"|"a"|"I"|"i"| start = value> //type에따라 1,2,3,4 A,B,C,D 등등 방식이 바뀜
ul도 비슷한 방식으로 마커를 바꿀 수 있다.
표 만들기
<table> 표 전체를 담는 컨테이너
<caption> 표 제목
<thead> 헤딩 셀 그룹
<tfoot> 바닥 셀 그룹
<tbody> 데이터 셀 그룹
<th> 열 제목(헤딩) 셀 (굵은 글씨)
<tr> 행, 여러 <th>, <td>포함
<td> 데이터 셀
colspan, rowspan : 몇 개의 셀을 merge 할 때 사용
하이퍼링크
1. 같은 웹 사이트 웹 페이지
<a href="picturepage.html">내용</a>
2.다른 웹 사이트 웹 페이지
<a href="http://www.naver.com">네이버</a> //도메인 모두 작성
3.같은 문서 내부 특정 위치
<a href="#TOP">내용</a> //#TOP는 #ID속성
이미지 하이퍼 링크
<a href="주소">
<img src="이미지" alt="내용">
</a>
하이퍼 링크 색 (css로 링크 색 지정 가능)
처음 색 blue
방문 후 purple
마우스로 링크 누르는 동안 red
target 속성 활용 <base>, <a>, <area>, <form> 태그에서 HTML 페이지를 출력한 윈도우 지정
target="_blank" 새 창 (생성)
target="_self" 현재 창
target="_parent" 부모 창
target="_top" 브라우저 창
<a> 태그의 id 속성으로 앵커 만들기
앵커(anchor) - HTML 페이지 내의 특정 위치
<id="앵커이름">으로 앵커 작성
ex) <h2 id="chap1">1장 서론</h2>
<a href="#chap1">서론으로 가기</a> 위 chap1로 이동.
파일 다운로드 링크
<a href="파일 경로" download>내용</a> <-파일 경로에 있는 파일 다운
인라인 프레임 <iframe>
- HTML 페이지 내 HTML 페이지 삽입
<iframe src="iframe1.html" width="200" height="150"> 내용 </iframe>
브라우저 계층 구조
Top윈도우 - 가장 위 윈도우
parent윈도우 - 위에 있는 윈도우
chile윈도우 - 아래 있는 윈도우
HTML5에서 웹 페이지 미디어 삽입 표준화
<audio>, <video> 태그
- HTML5에서는 오디오 비디오 삽입하는 표준 태그다. (플로그인 X)
비 표준 미디어 재생 시 ( ex)플래시 )
- <embed>, <object> 태그사용
<audio> 태그
- controls 속성으로 제어 버튼 출력
- autoplay 속성으로 자동 재생
- loop 버튼으로 반복 재생(없으면 재생 후 다시 시작할지 물어봄)
선택 재생 가능
파일 재생이 안될 시 다음 파일 재생
'학교수업' 카테고리의 다른 글
| 임베디드기초 3주차 (0) | 2021.09.22 |
|---|---|
| 사물인터넷의이해 3주차 (0) | 2021.09.18 |
| 객체지향프로그래밍 3주차 (0) | 2021.09.17 |
| 가상현실프로그래밍 2주차 (0) | 2021.09.16 |
| 정보보호개론 2주차 (0) | 2021.09.15 |