이번 포스팅은 HTML 웹 문서에서의 이미지 및 여러 미디어 삽입 방법에 대해 포스팅하려 합니다.
포스팅 순서는 이미지 삽입, 오디오 삽입, 하이퍼링크 삽입 입니다.
이미지 삽입
HTML 문서의 <head> 태그에 <img> 태그를 추가해주었습니다.
<img> 태그안에는 src와 alt가 있습니다.
src는 해당 이미지 파일의 경로, alt는 텍스트를 이야기 합니다.
작성법은 <img src="파일 경로" alt="대체 텍스트"> 가 됩니다.
<img> 태그 사용시 경로로 설정된 이미지를 브라우저에 띄울 경우 이미지 사이즈 원본에 맞게 나오므로 CSS 파일에서 <img> 태그에 대한 속성을 부여해줍니다.
width(이미지 너비), height(이미지 높이)를 각각 임의의 값으로 지정하여 적용을 시키면 아래와 같이 나오게 됩니다.
CSS 파일에서는 이미지 크기를 px로 조정했지만 %를 이용해서 조절 할 수도 있습니다.
다만 이 두 종류의 차이점은 다음과 같습니다.
px : 해당 이미지의 높이나 너비를 지정한 px 값 만큼의 크기만 표시
% : 해당 이미지의 높이나 너비를 지정한 %값의 기준으로 크기를 표시
오디오 삽입
오디오를 삽입하는 태그는 2가지가 있으며 각각의 태그는 <object>,<dmbed> 입니다.
사용방법은
<object width = "" height = "" data = ""></object> / <embed src = "경로" width = "" height = ""></embed> 입니다.
이번 오디오 삽입은 <object> 태그를 사용하였으며 결과는 아래와 같이 나오게 됩니다.
이미지 우측의 재생표시 아이콘이 보인다면 정상적용이 된 것입니다.
하이퍼링크
하이퍼링크는 연결된 웹사이트를 빠르게 이용하기 위한 방법 중 하나입니다.
하이퍼링크 사용시 쓰이는 태그는 <a> 태그이며 href 속성을 이용합니다.
HTML 웹문서 코드의 하단 부분에 <p> 태그를 이용한 하이퍼링크를 추가하였습니다.
결과를 확인해보면 [확인하기] 텍스트를 누를 경우 다른 웹페이지가 새창에서 뜨게 됩니다.
만약, 하이퍼링크 클릭 시 새 탭에서 실행을 원하는 경우 태그에 다음과같이 작성하면 됩니다.
<a href = "" target="_blank">
이상으로 HTML 웹문서에 미디어 삽입에 대해 포스팅 하였습니다.
(미디어 삽입은 여러가지가 있지만 그중 많이 쓰이는 기능만 작성하였습니다.)
'FrontEnd > HTML' 카테고리의 다른 글
웹 문서의 표 만들기 (0) | 2024.06.28 |
---|---|
웹 문서의 목록 만들기 (0) | 2021.10.01 |
웹 문서의 텍스트 태그 (0) | 2021.09.28 |
HTML 웹 문서 구조를 만드는 시맨틱 태그 (0) | 2021.09.28 |
HTML의 기본 개념과 문서의 구조 (0) | 2021.01.22 |