1. 파일 경로 지정
html에서 이미지를 구현할 때 올바른 경로 지정이 매우 중요하다.
src로 경로를 지정하면 기본적으로 html과 같은 폴더의 이미지 파일을 구현한다.
하지만 웹 사이트의 구현은 다양한 이미지가 필요하고 이를 체계적으로 정리하여야 수정 및 정보 확인이 쉽다.
1.1. 기본 파일 경로: ./
파일 경로 지정은 src=”파일 이름”을 통해 지정한다.
파일 이름은 해당 이미지의 속성값을 포함한 정보이다. (.png/ .jpg 등)
폴더를 별도로 지정하지 않으면 html과 같은 폴더에서 이미지를 탐색한다.
./ 는 파일 경로를 지정할 때 ‘같은 폴더 안에’라는 의미를 가진다.
예를 들어, <img src=”bear.jpg”></img>로도 이미지 구현이 가능하지만. ./를 이용하여 <img src=”./bear.jpg”></img>로도 같은 이미지를 구현할 수 있다.
1.2. 하위 파일 경로: ./폴더이름/파일이름
웹 페이지를 제작할 때, html이 저장된 폴더를 기준으로 하위 폴더의 이미지를 구현할 경우가 있다.
이경우 해당 파일의 세부 경로를 작성하여 구현이 가능한데, 폴더이름과 파일이름을 /로 구분하여 표현해주는 것이다.
<img src=”./in/bear.jpg”></img>로 사용하여 하위 폴더 경로를 지정하면 이미지가 동일하게 구현된다.
1.3. 상위 파일 경로: ../파일 이름
상위 폴더는 현재 폴더를 기준으로 .의 개수에 따라 상위 경로의 수가 지정된다.
바로 위의 폴더라면 .이 한개, 그보다 위인 경우 ..으로 표현할 수 있다.
1.4. 경로 지정의 예
폴더 구분: html > 1 > 2
파일 구분: img0 > img1 > img2
현재 폴더: [./img1.jpg] = [../1/img1.jpg =, [.../html/1/img1.jpg]
하위 폴더: [./2/img2.jpg] = [../1/2/img2.jpg]
상위 폴더: [../img0.jpg] 상위의 상위폴더: [.../]
2. 이미지를 삽입하는 Tag: <img></img>
이미지를 html에 구현하고 싶을때, <img src=”파일 경로”></img>를 이용하면 구현이 가능하다.
src는 소스의 약자로 이미지 파일의 이름과 속성을 포함하여 작성한다.
해당 파일 경로는 html과 같은 폴더안에 위치하여야 하며, 오타 혹은 확장자가 틀린 경우 읽어낼 수 없다.
때문에 이미지가 출력되지 않는 경우를 대비하여 Alt tag를 삽입하여 해당 파일의 속성을 정의해줄 수 있다. (안내문구로도 활용이 가능하다.)
삽입한 이미지의 크기는 img tag에서 설정이 가능하다.
<img src=”파일 경로” width=”00%”> 로 width의 크기를 지정할 수 있다.
해당 width의 %는 현재 속해있는 대분류 태그 (일반적으로 body)에 대한 크기 비율을 말한다.
만약 해당 값은 px로 지정하면 고정된 px값으로 이미지가 출력된다.
<img src="bear11.jpg" alt="곰가족사진">
2.1. 너비를 지정하는 속성: width=””
width는 table이나 img 등에서 사용하여 크기를 지정할 수 있는 태그이다.
%로 지정하면 상위 요소에 대한 비율로, px로 지정하면 자체 pixel 값으로 지정된다.
용도에 따라 table 이나 img 등 다양하게 사용이 가능하다.
2.2. 높이를 지정하는 속성: height=””
height는 width와 마찬가지로 이미지나 table의 크기를 지정할 수 있는 태그로 높이를 지정하는데 사용한다.
작동 원리는 width와 동일하다.
3. 객체를 삽입하는 Tag: <object></object>
객체란 여러 데이터를 복합적으로 가지고 있는 덩어리를 말하는데, 대표적으로 pdf 확장자 파일이 있다.
특히 pdf는 html에 호환이 되는 항목이기 때문에 html에 직접 삽입하는 것이 가능하다. (html5에서는 pdf 삽입이 가능하다.)
또한, 높이나 넓이 등의 속성을 지정하는 것도 가능하기 때문에 데이터를 삽입하고 꾸미는 것이 가능하다.
기본 형태: <object data="경로">
4. 오디오 파일 삽입하는 Tag: <embed src="경로">/ <audio src="경로">
오디오 파일을 html에서 구동하도록 삽입하는 Tag이다.
다른 img나 object와 마찬가지로 정확한 경로가 지정되어야 구동이 가능하다.
embed 혹은 audio 를 사용하는데, 브라우저의 환경에 따라 audio가 구동되지 않는 경우도 있다.
5. 동영상 파일 삽입하는 Tag: <video src="경로"></video>
동영상 파일을 삽입하는 Tag이다.
기본 형태로 삽입하면 동영상 재생이나 컨트롤이 불가능하다.
때문에 별도의 속성을 지정하여 웹 브라우저에서 비디오의 구현을 지정할 수 있다.
◍ controls: 사용자가 조작할 수 있는 기능을 추가한다.
◍ autoplay: 웹 브라우저가 로딩되면 자동으로 재생된다.
◍ loop: 반복하여 재생한다.
◍ muted: 음소거 재생
<video src="video/salad.mp4" controls autoplay loop muted width="500">
</video>
일부 브라우저(chrome)는 muted가 삽입되어야 autoplay가 진행된다.
해당 Tag는 동영상이 로드되기 전까지 작동하지 않는다는 단점이 있어 스트리밍처리가 완료된 동영상 구현을 더 선호하는 추세이다.
6. 스트리밍이 완료된 동영상을 삽입하는 방법
iframe은 다른 웹 사이트나 소스를 지정한 html 문서에 보여주는 명령어이다.
<iframe src=" "></iframe>를 사용하여 삽입할 수 있으며, 영역의 크기는 width: 350px height: 150px가 디폴트 값이다.
YouTube 동영상을 우클릭하면 소스 코드를 복사할 수 있다.
이를 html 문서의 <body></body> 사이에 붙여넣기하면 iframe을 적용한 상태로 삽입된다.
예: src="https://www.youtube.com/embed/XlcKiizWQVI?autoplay=1&mute=1&controls=0"
src에 get 방식으로 해당 정보를 입력하면 속성을 지정할 수 있다.
=1 인 경우 ‘True’ 값으로 지정되어 속성이 활성화 된다.
◍ autoplay: 자동재생, 음소거가 되어 있어야만 자동 재생됨
◍ mute: 음소거
◍ loop: 반복재생
◍ controls: 컨트롤바
◍ start: 시작하는 시간을 초단위로 결정
7. HTML에 대한 파일확장자와 호환성 Check
브라우저 별로 파일 확장자에 대한 호환성이 상이하다.
이는 해당 브라우저의 회사와 확장자 라이센스를 가진 회사의 비즈니스 체결과 관련있다.
때문에 실제 사용자의 환경과 구동 정보를 고려하여 호환성을 체크하는 것이 중요하다.
'HTML > 기본 이론' 카테고리의 다른 글
| [HTML] Chapter 08. 사용자의 데이터 입력 (0) | 2021.05.09 |
|---|---|
| [HTML] Chapter 07. 문서에서 다른 페이지로 이동 (0) | 2021.05.08 |
| [HTML] Chapter 05. 표만들기 (0) | 2021.05.06 |
| [HTML] Chapter 04. 목록 형성 (0) | 2021.05.05 |
| [HTML] Chapter 03. HTML의 문자 표시 (0) | 2021.05.04 |
