전 포스팅에 이어서 HTML5 태그를 더 알아봅시다.
<--<img>태그-->
<img>태그는 웹 문서에 이미지를 삽입할 때 쓰이는 태그이다.
태그 |
속성 |
값 |
설명 |
img |
alt |
설명 |
이미지를 대체할 설명을 입력합니다. |
crossorigin |
anonymous/ use-credentials |
다른 사이트의 이미지를 이용할 수 있게 해준다. |
|
height |
픽셀 |
이미지의 높이를 픽셀 단위로 지정한다. |
|
ismap |
ismap |
서버 측의 이미지맵을 지정한다. |
|
src | URL | 삽입하려는 이미지의 경로와 파일 이름 지정. | |
usemap | 맵이름 | 사용자 측의 이미지맵을 지정합니다. | |
witdh | 픽셀 | 이미지의 폭을 픽셀 단위로 지정. |
Ex)
<body>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
</body>▲ <img>태그를 사용해서 google이미지를 가져와 보았습니다.
△ 크기는 300*300 입니다.
구분 |
표현방법 |
설명 |
상대 경로 |
../images or ./images |
HTML문서의 위치와 객체와의 상대적인 위치를 표현합니다. |
절대 경로 |
C:/HTML5CSS3/imgages |
HTML문서와 상관없이 객체의 절대적인 위치를 표현합니다. |
<--<iframe> 태그-->
태그 |
속성 |
값 |
` 설명 |
iframe |
height |
픽셀 / % |
<iframe>의 높이 지정 . |
name |
이름 |
<iframe>의 이름을 지정. |
|
sandbox |
"/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation |
<iframe>의 내용 제한 설정. |
|
src |
URL |
웹 문서의 주소 지정. |
|
srcdoc |
HTML cdoe |
<iframe>에 보여줄 HTML코드 지정. |
|
width |
픽섹 / % |
크기 지정. |
|
seamless |
seamless |
문서의 일부처럼 보이도록 지정. |
<body>
<iframe src="http://www.daum.net/" width="100%" height="50" ></iframe>
</body>▲위 처럼 다른 웹 문서를 불러 올 수 있다.
△왠지 모르겠는데 naver하려다 안됨.
<--<embed>태그-->
<edbed>태그는 HTML5가 생기면서 생긴 태그이며, 웹 문서에 플래시, 동영상, 음악 파일등을 삽입할 수 있는 태그이다.
태그 |
속성 |
값 |
설명 |
embed |
height |
픽셀 |
재생 매체의 높이 지정. |
src |
URL |
삽입하려는 파일의 경로나 파일이름 지정. |
|
type |
MIME type |
삽입하려는 파일의 MIME 타입 지정 |
|
width |
픽셀 |
재생 매체의 폭 지정. |
Ex)
<body>
<embed src="http://player.music.naver.com/naverPlayer/posting/12693974/BA" width = "400" height = "300"></embed>
</body>
'Programming > Html5 + CSS' 카테고리의 다른 글
| CSS3 기초 (1) | 2015.12.02 |
|---|---|
| 여러 태그03 (0) | 2015.12.02 |
| HTML5 시멘틱 구조 및 여러 태그 (0) | 2015.11.25 |
| HTML5기본 구조 & Meta 테그 (0) | 2015.11.25 |
| Html5+CSS3 시작! (0) | 2015.11.25 |
KimMinSung