이미지를 브라우저에서 불러오기 위해서는
<img> 태그를 사용해야 합니다.
<img> 태그 예제를 살펴봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>이미지 태그 예제 입니다</h3>
<img src="images/keyboard.png" alt="키보드" width="100%">
</body>
</html>이미지 태그 속성
이미지 태그에서 중요한 부분은 2곳 입니다.
src : 이미지 경로를 기재 합니다. 로컬 경로 와 온라인 상의 URL 경로도 모두 지원 합니다.
alt :대체 테스트를 의미 합니다. 이미지가 나오지 않는 상황에서도 해당 이미지의 정보를 나타내 줄 수 있으며,
시각장애인을 위해 화면 낭독기에서 해당 텍스트를 읽어줍니다. alt 는 필수 속성으로 반드시 기재해주어야 합니다.
<img src="images/keyboard.png" alt="키보드" width="100%">이외 width의 경우 이미지 가로사이즈를 지정합니다. 사이즈는 퍼센트(%) 와 고정사이즈 px 로 지정 가능합니다.
퍼센트(%) : 브라우저가 줄어들어도 해당 크기에 맞게 조정이 됩니다
PX : 고정사이즈 이기에 브라우저가 줄어들면 화면에 보이는 그림이 짤릴 수도 있습니다.
하기는 width=1000px 로 입력시 브라우저가 줄어들면서 이미지도 짤린 결과 값 입니다.
브라우저에서 이미지를 불러오기위한 <img> 태그 기본 사용법 이였습니다
감사합니다.
비디오 태그 예제
HTML 웹문서에서 비디오 재생을 위해서는 비디오 태그를 사용합니다. 비디오 태그 예제를 살펴보겠습니다. 비디오 태그 예제 입니다. 비디오 태그에서 중요한 속성은 하기와 같습니다. src : 비디
soo0100.tistory.com
오디오 태그 예제
사운드 재생을 위한 오디오 태그 예제입니다. 브라우저에서 사운드 플레이를 위해서는 라는 태그를 사용해야 합니다. 예제를 보겠습니다. 오디오 태그 예제 입니다 태그 중 핵심적인 역할의 속
soo0100.tistory.com
<Object> 태그 예제
Object 태그는 이미지, 비디오, PDF 파일 등의 멀티미디어 파일들을 브라우저에 표시할 수 있습니다. HTML5에서는 이미지는 태그, 비디오는 태그를 사용하지만, H5 이전에는 Object 태그가 이러한 미디
soo0100.tistory.com
'앱 만들기 > HTML5' 카테고리의 다른 글
| 오디오 태그 예제 (6) | 2023.03.06 |
|---|---|
| html 표 셀 합치기 예제 (4) | 2023.03.04 |
| html 표 만들기 (4) | 2023.02.28 |
| <dl> 태그 예제 (2) | 2023.02.27 |
| <ul>태그 예제 (2) | 2023.02.26 |
댓글