일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 드림핵
- c
- BOJ
- 기계학습
- WarGame
- XSS Game
- Python
- Javascript
- 숙명여자대학교 정보보안동아리
- 생활코딩
- PHP 웹페이지 만들기
- SWEA
- hackerrank
- CSS
- lob
- 파이썬
- 백준
- Sookmyung Information Security Study
- hackctf
- 숙명여자대학교 정보보안 동아리
- The Loard of BOF
- 머신러닝
- 웹페이지 만들기
- 자료구조 복습
- c++
- HTML
- siss
- BOJ Python
- C언어
- 풀이
- Today
- Total
혜랑's STORY
[WEB 2주차 공부 : HTML] 본문
#링크와 멀티미디어
- 링크 달기
1. 하이퍼텍스트와 링크
1.1 하이퍼텍스트 : 서로 연관된 문서나 텍스트 조각들을 연결
1.2 하이퍼미디어 : 텍스트 뿐 아니라 멀티미디어 정보가 연결
1.3 노드: HTML문서나 멀티미디어 정보를 표현하는 기본 단위 / 링크: 노드를 연결, 이동 / 앵커: 링크의 출발점이나 도착점
2. 링크의 종류 : 특정 단어나 문장, 혹은 이미지에서 다른 문서 / 외부 URL / 문서내 다른 지점으로 링크
2.2 문서간 이동
<a href="파일이름 또는 URL 주소" title="설명"> 링크 텍스트 </a>
2.3 문서내 이동
[목적지 앵커 지정] <a id="고유아이디">목적지</a>
[시작점에서 연결] <a href="#고유아이디">링크로 이동</a>
※이전 버전의 HTML에서는 name 속성을 사용, HTML5에서는 name 속성 대신 id 속성을 사용 권장
- 이미지 사용하기
1. 이미지 파일 종류
1.1 GIF(Graphic Interchange Format) : 사진이 아닌 클립아트나 드로잉 같은 종류의 이미지에 적랍
1.2 JEPG(Joint Photographic Experts Group) : 복잡한 그림이나 사진 등 색상을 많이 사용하는 이미지에 적합
1.3 PNG(Portable Network Graphic) : GIF와 JEPG 형식의 장점, 비압축 형식인 BMP형식의 장점도 고려
2. 이미지 삽입
<img src="파일이름" width="크기(너비)" height="크기(높이)" alt="대체 텍스트">
※ alt : 인터넷이 너무 느려 미처 이미지를 표시하지 못하거나 파일의 주소가 잘못되었을 때 이미지에 대한 설명 텍스트
2.1 <figure> 요소 : 그림, 사진, 다이어그램과 텍스트 등의 콘텐츠를 함께 묶어서 하나의 독립된 단위로 취급할 때 사용
2.2 <figcaption> 요소 : 요소를 위한 제목을 표현, <figure>요소 안에 위치
- 오디오와 비디오 다루기
1. 지원하는 오디오.비디오 파일 형식 : MP3, Wave, MPEG4, OGG, WebM
2. 오디오 삽입하기
<audio controls autoplay src="파일 이름">
-> controls : 미디어 제어기를 표시할지 여부
-> autoplay : 파일이 로드되자마자 자동으로 재생
-> loop : 사운드 반복재생 횟수
3. 비디오 삽입하기
<video controls src="비디오 파일 이름" width="크기(너비)" height="크기(높이)">
-> poster : 동영상이 로딩되고 있을 때 보여줄 이미지
-> preload : 브라우저가 미리 동영상을 로딩 할 지 여부 (auto / metadata / none)
#다양한 입력 폼
- 폼 이해하기
1. 폼 요소 : 회원가입, 상품구매, 키워드 검색 등 사용자로부터 정보를 받을 때 사용
<form name="이름" method="get/post" action="애플리케이션 주소">
1.1 method 속성 : 데이터 전송 방식 지정(get : 전송할 데이터를 url주소 뒤에 포함, 간편한 데이터에는 편리하나 보안에 취약함 / post : 프로그램의 입출력 사용, 데이터 양에 제한이 없다.)
1.2 action 속성 : 데이터를 처리할 애플리케이션 주소(웹서버 경우 URL)
1.3 name 속성 : 폼 요소에 대한 이름
2. 기본 형식으로 입력하기
<input type="입력 형식" name="변수명", value="입력값"/>
2.1 type 속성 : text, password, radio, checkbox, sumbit, reset, buton, image, file, hidden 등
3. 고급 형식으로 입력하기
3.1 요소에 추가된 입력 형식 : email, URL, tel, search, date, month,,,
3.2 색상 및 숫자 입력 : <input type="color"/> / 숫자 입력 : <input type="number"/> / 범위 입력 : <input type="range"/>
'2020 SISS 21기 활동 > 여름방학 WEB' 카테고리의 다른 글
[WEB 3주차 실습 : CSS] (0) | 2020.07.16 |
---|---|
[WEB 3주차 공부 : CSS] (0) | 2020.07.16 |
[WEB 2주차 실습 : HTML] (0) | 2020.07.14 |
[WEB 1주차 실습: HTML] (0) | 2020.07.07 |
[WEB 1주차 공부 : HTML] (0) | 2020.07.07 |