1. 이미지 태그
<body>
<img />
</body>
| 속성 이름 | 설명 |
| src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미니의 너비 지정 |
| height | 이미지의 높이 지정 |
2. 오디오 태그
| 속성 이름 | 설명 |
| src | 음악 파일의 경로 지정 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
| autoplay | 음악을 자동 재생할지 지정 |
| loop | 음악을 반복할지 지정 |
| controls | 음악 재생 도구를 출력할지 지정 |
3. 비디오 태그
| 속성 이름 | 설명 |
| src | 비디오 파일의 경로 지정 |
| poster | 비디오 준비 중일 때의 이미지 파일 경로 지정 |
| preload | 비디오를 재생하기 전에 모두 불러올지 지정 |
| autoplay | 비디오를 자동 재생 할지 지정 |
| loop | 비디오를 반복할지 지정 |
| controls | 비디오 재생 도구를 출력할지 지정 |
| width | 비디오의 너비 지정 |
| height | 비디오의 높이 지정 |
<실습>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id = "abcde"> img 태그 </h1>
<img src = "img/%EB%AA%BD%EA%B3%A8.jpg" alt="몽골여행가자"
width="500px" height="500px">
<hr><hr>
<h1> img 태그2 </h1>
<img src = "img/dog.jpg" usemap="#test">
<map name="test">
<area shape ="rectangle"
coords="179,44,353,154"
href = "img/head.jpg"
target ="_self">
<area shape ="rectangle"
coords="307,206,445,306"
href = "img/disk.jpg"
target ="_self">
<area shape ="rectangle"
coords="529,354,601,407"
href = "img/leg.jpg"
target ="_self">
</map>
<audio controls autoplay loop
src = >
preload = "metadata"</audio>
<video width = "500px" height = "500px" controls poster ="img/" src = "mp4" ></video>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/KeEtLXYsUJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
<h1>하이퍼링크 태그</h1>
<a href = "http://www.naver.com" target="_blank">네이버로가기
</a>
<a href ="http://www.naver.com"><img src="img/naver.jpg"></a>
<hr>
<hr>
<hr>
<hr>
<a href = "#abcde"> 맨위로 </a>
</body>
</html><이미지와 음악은 저작권때문에 삭제>
<동영상은 유투브에서 소스 가져옴>
img 태그
img 태그2
하이퍼링크 태그
<수업내용>
@페이지 영역 분할 태그
<frame></iframe>
(Inline Frames)
-> 웹 문서 안에 다른 웹페이지를 추가하는 태그
속성
width/height : 페이지 크기 설정
name : 인라인 프레임의 이름
src : 페이지 경로
#현재 iframe 사용을 권장하지 않음
-> youtube 동영상 가져올때 사용
## <div></div>
(Division)
-> block 형식의 공간을 분할(수직으로 공간분할>
##
<span></span>
-> inline 형식의 공간을 분할(수평으로 공간분할)
-> Text 단위
@html5 페이지 구조
-> 시멘틱태그 : 페이지 구조를 특정기느에 맞는 태그를 사용하여 구분
- header , section , footer , nav
##<header></header>
##<nav></nav>
-> 웹문서의 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을때 사용
-> <section>태그내부에</section>태그를 넣을 수 있음
##<article></article>
-> 웹페이지 내용이 들어가는 영역
-> 검색로봇은 이 태그가 사용된 컨텐츠는 배포 할 수 있는 컨텐츠로 인식
##<aside></aside> - 사이드바
- 본문 이외의 기타내용을 담고 있는 영역
- 광고등에 주로 사용
##<footer>
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 7. HTML textarea 태그 / select 태그 / fieldset태그 / legend 태그 / 공간 분할 태그 (0) | 2019.09.10 |
|---|---|
| <이공계기술전문연수> 6. HTML 입력 양식 태그 / form 태그 (0) | 2019.09.10 |
| <이공계전문기술연수> 4. HTML 테이블 태그(table tag) (0) | 2019.09.08 |
| <이공계전문기술연수> 3. HTML 웹의 역사 / tag / 이클립스(Eclipse)(2) (0) | 2019.09.07 |
| <이공계전문기술연수> 2. HTML 웹의 역사 / tag / 이클립스(Eclipse)(1) (0) | 2019.09.07 |
1. 이미지 태그
<body>
<img />
</body>
| 속성 이름 | 설명 |
| src | 이미지의 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미니의 너비 지정 |
| height | 이미지의 높이 지정 |
2. 오디오 태그
| 속성 이름 | 설명 |
| src | 음악 파일의 경로 지정 |
| preload | 음악을 재생하기 전에 모두 불러올지 지정 |
| autoplay | 음악을 자동 재생할지 지정 |
| loop | 음악을 반복할지 지정 |
| controls | 음악 재생 도구를 출력할지 지정 |
3. 비디오 태그
| 속성 이름 | 설명 |
| src | 비디오 파일의 경로 지정 |
| poster | 비디오 준비 중일 때의 이미지 파일 경로 지정 |
| preload | 비디오를 재생하기 전에 모두 불러올지 지정 |
| autoplay | 비디오를 자동 재생 할지 지정 |
| loop | 비디오를 반복할지 지정 |
| controls | 비디오 재생 도구를 출력할지 지정 |
| width | 비디오의 너비 지정 |
| height | 비디오의 높이 지정 |
<실습>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 id = "abcde"> img 태그 </h1>
<img src = "img/%EB%AA%BD%EA%B3%A8.jpg" alt="몽골여행가자"
width="500px" height="500px">
<hr><hr>
<h1> img 태그2 </h1>
<img src = "img/dog.jpg" usemap="#test">
<map name="test">
<area shape ="rectangle"
coords="179,44,353,154"
href = "img/head.jpg"
target ="_self">
<area shape ="rectangle"
coords="307,206,445,306"
href = "img/disk.jpg"
target ="_self">
<area shape ="rectangle"
coords="529,354,601,407"
href = "img/leg.jpg"
target ="_self">
</map>
<audio controls autoplay loop
src = >
preload = "metadata"</audio>
<video width = "500px" height = "500px" controls poster ="img/" src = "mp4" ></video>
<iframe width="1280" height="720" src="https://www.youtube.com/embed/KeEtLXYsUJI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<hr>
<h1>하이퍼링크 태그</h1>
<a href = "http://www.naver.com" target="_blank">네이버로가기
</a>
<a href ="http://www.naver.com"><img src="img/naver.jpg"></a>
<hr>
<hr>
<hr>
<hr>
<a href = "#abcde"> 맨위로 </a>
</body>
</html><이미지와 음악은 저작권때문에 삭제>
<동영상은 유투브에서 소스 가져옴>
img 태그
img 태그2
하이퍼링크 태그
<수업내용>
@페이지 영역 분할 태그
<frame></iframe>
(Inline Frames)
-> 웹 문서 안에 다른 웹페이지를 추가하는 태그
속성
width/height : 페이지 크기 설정
name : 인라인 프레임의 이름
src : 페이지 경로
#현재 iframe 사용을 권장하지 않음
-> youtube 동영상 가져올때 사용
## <div></div>
(Division)
-> block 형식의 공간을 분할(수직으로 공간분할>
##
<span></span>
-> inline 형식의 공간을 분할(수평으로 공간분할)
-> Text 단위
@html5 페이지 구조
-> 시멘틱태그 : 페이지 구조를 특정기느에 맞는 태그를 사용하여 구분
- header , section , footer , nav
##<header></header>
##<nav></nav>
-> 웹문서의 컨텐츠가 들어가는 영역, 컨텐츠를 주제별로 묶을때 사용
-> <section>태그내부에</section>태그를 넣을 수 있음
##<article></article>
-> 웹페이지 내용이 들어가는 영역
-> 검색로봇은 이 태그가 사용된 컨텐츠는 배포 할 수 있는 컨텐츠로 인식
##<aside></aside> - 사이드바
- 본문 이외의 기타내용을 담고 있는 영역
- 광고등에 주로 사용
##<footer>
'이공계전문기술연수 > HTML | CSS' 카테고리의 다른 글
| <이공계기술전문연수> 7. HTML textarea 태그 / select 태그 / fieldset태그 / legend 태그 / 공간 분할 태그 (0) | 2019.09.10 |
|---|---|
| <이공계기술전문연수> 6. HTML 입력 양식 태그 / form 태그 (0) | 2019.09.10 |
| <이공계전문기술연수> 4. HTML 테이블 태그(table tag) (0) | 2019.09.08 |
| <이공계전문기술연수> 3. HTML 웹의 역사 / tag / 이클립스(Eclipse)(2) (0) | 2019.09.07 |
| <이공계전문기술연수> 2. HTML 웹의 역사 / tag / 이클립스(Eclipse)(1) (0) | 2019.09.07 |
