프론트엔드 1일차 HTML(멀티 미디어 관련 태그, 하이퍼 링크 태그)

2024. 1. 10. 16:48ㆍ프론트엔드

멀티미디어관련태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>멀티 미디어 관련 태그</title>
</head>
<body>
    <!-- 
        img 태그
        - 이미지를 추가하는 태그
        - inline-block태그
        - 크기를 지정하지 않으면 원본 크기로 불러옴
        - 속성
         - src : 이미지가 있는 주소
         - alt : 이미지를 불러오지 못했을 때 보여줄 문자열. 없으면 웹 표준 검사에 걸림
         - width : 너비
         - height : 높이
         - width와 height에 단위를 안쓰면 px로 적용. auto를 값으로 지정 하려면 비율이 유지
     -->
    <img src="https://www.fitpetmall.com/wp-content/uploads/2023/10/230420-0668-1.png" 
    alt="고양이" 
    width="500"
    height="auto">
    <!-- 
        audio 태그
         - 음원을 재생하는 태그
         - 속성
          - controls
           - 컨트롤러를 보여줌
          - autoplay
           - 자동재생
           - 브라우저 설정에 따라서 자동 재생이 안될 수 있음
          - loop
           - 음원 재생이 끝났을 때 다시 실행할지를 결정
          - preload
           - 음원이 재생하기 전 미리 다운로드 받아 놓을지를 결정
           - none : 안받음
           - metadata : 메타데이터만 받음
           - auto : 받음
     -->
    <audio src="/static/audio.mp3"
    controls
    autoplay="autoplay"
    loop
    preload="none"
    ></audio>
    <!-- 
        video 태그
        - 비디오 재생을 위한 태그
        - audio태그 속성을 그대로 사용할 수 있음
        - 추가적인 속성
         - poster
          - 재생 시작전 보여줄 이미지
    -->
    <video src="https://media.istockphoto.com/id/1342582689/ko/%EB%B9%84%EB%94%94%EC%98%A4/%EB%B9%84%EB%94%94%EC%98%A4-%EB%B3%84%EC%9D%80-%EB%85%B9%EC%83%89-%ED%99%94%EB%A9%B4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%97%90-%ED%9A%A8%EA%B3%BC-%EB%B0%B0%EA%B2%BD%EC%9D%84-%EB%B9%9B%EB%82%9C%EB%8B%A4-%ED%81%AC%EB%A6%AC%EC%8A%A4%EB%A7%88%EC%8A%A4-%EC%9E%A5%EC%8B%9D.mp4?s=mp4-640x640-is&k=20&c=Cb3eM9kI2GFrejYC5M0XYO1LSFsZ6xYQXSJEU9gZcps="
    controls
    autoplay="autoplay"
    loop
    preload="auto"
    poster="https://www.fitpetmall.com/wp-content/uploads/2023/10/230420-0668-1.png" ></video>
    
    <br>
    <br>

    <img src="https://www.fitpetmall.com/wp-content/uploads/2023/10/230420-0668-1.png" 
    alt="고양이" 
    width="500"
    height="500" usemap="#testmap">
    <!-- 
        map 태그
         - 요소의 영역을 분할하여 링크를 걸 때 사용
         - 영역 분할할 요소에 usemap을 지정. 값으로 #map의 name속성값
        - area태그
         - 영역을 지정
         - 속성
          - shape
           - rect(사각형), circle(원), poly(다각형)를 이용하여 도형의 종류를 선택
          - cords
           - 좌표
           - 도형 종류에 맞게 좌표를 입력. x, y좌표 순으로
          - href
           - 이동할 문서의 주소
          - alt
           - 대체 문자
     -->
    <map name="testmap">
        <area shape="rect" coords="0,0,250,250" href="http://www.naver.com" alt="네이버">
        <area shape="circle" coords="375, 125, 125" href="http://www.google.com" alt="구글">
        <area shape="poly" coords="0, 250, 500, 250, 500,500,0,500" href="http://www.daum.net" alt="다음">
    </map>
</body>
</html>

 

하이퍼 링크 태그

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>하이퍼 링크 태그</title>
</head>
<body>
    <!-- 
        a태그 - 공통
         - 다른 페이지로 이동하거나 
         - 같은 페이지 내에서 특정 위치로 이동하거나
         - 파일을 다운로드 하거나
         - 전화, 이메일을 전송할 때 사용
         - href는 이동할 위치
         - 태그 안에는 밑줄
         - 상태 마다 글자 색이 다름
          - 방문 하기 전, 방문한 후, 클릭 했을 때
         - 속성
          - target
           - 이동할 때 어떤 창에서 이동할건지를 결정하는 속성
           - _self : 기본값, 현재 창
           - _blank : 새창
           - _parent : 부모창
           - _top : 최상위 부모창

     -->
     <!-- 
        a 태그 - 다른 페이지 이동
         - href에 이동할 페이지의 주소를 작성
         - 
      -->
    <a href="http://www.naver.com" target="_self">네이버로 가기</a>

    <!-- 
        a태그 - 다운로드
         - download 속성을 이용
         - download = "파일명"을 통해 저장할 때 파일명을 지정
         - href에는 다운로드할 파일을 작성
     -->

     <a href="../../static/audio.mp3" download = "오디오.mp3">오디오 파일 다운로드</a>

     <br>
     <!-- 
        a태그 - 전화나 메일 연결
         - href에 전화는 tel:을 이용
         - href에 메일은 mailto:를 이용
      -->

      <a href="tel:+821112345678">전화걸기</a>
      <br>
      <a href="mailto:whalstjr1313@naver.com">메일로 문의하기</a>
      <br>

    <!-- 
        a태그 - 같은 페이지 내에서 특정 위치로 이동
         - href에 #아이디명을 작성
         - 아이디명은 이동할 요소의 id 속성값
        id는 문서 내에서 중복되면 안됨
     -->
     <a href="#title" >제목으로 이동하기</a>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <h1 id="title">제목</h1>

     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>
저작자표시

'프론트엔드' 카테고리의 다른 글

프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성)  (0) 2024.01.15
프론트엔드 1일차 HTML(폼 관련 태그)  (2) 2024.01.10
프론트 엔드 1일차 HTML(표 관련 태그, 영역 관리 태그)  (0) 2024.01.10
프론트 엔드 1일차 HTML(글자 관련 태그, 목록 태그)  (0) 2024.01.10
프론트 엔드 1일차 HTML(글자 꾸미기 태그)  (1) 2024.01.10

관련글

티스토리툴바