코드 그라데이션

4. 이미지, 오디오, 비디오, 하이퍼링크 삽입하기 본문

Front/Mega-HTML

4. 이미지, 오디오, 비디오, 하이퍼링크 삽입하기

완벽한 장면 2023. 5. 12. 02:10

이미지 삽입 <img> 태그

  • src 속성은 이미지 파일의 경로를 지정 => 웹 브라우저에 알려준다.
  • alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어줄 텍스트를 지정
  • src 속성은 웹 문서 파일과 이미지 파일이 같은 경로에 있다면, 이미지 파일 이름만 적으면 된다.
  • 만약 하위 폴더에 있다면 src 속성에 하위 폴더와 함께 이미지 파일 이름을 적어야 한다.
  • alt를 지정하면 인터넷 연결이 불안정하거나 이미지 파일 경로를 잘못 넣었을 때처럼 이미지를 제대로 표시할 수 없는 경우에 이미지 대신 텍스트가 나타난다.
  • 화면을 꾸밀 때 사용한 이미지는 텍스트를 따로 넣지 않아도 된다. 빈 칸으로 두면 된다.
  • width는 이미지 너비 지정, height는 이미지 높이 지정. 둘 중 하나만 지정해도 됨. 이 때 나머지 값은 자동으로 지정됨.

기본형

 

이미지 파일 형식의 종류

 

이미지 크기를 표현하는 단위

이미지 크기를 표현하는 단위

 

예제 - 이미지 삽입하기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>이미지 공부</title>
</head>

<body>
    <img src="images/a.gif" alt="Good" width="200px" height="200px">
    <img src="images/공부.gif" alt="Good" width="200px" height="200px">
    <h1>굿잡</h1>
</body>

</html>

 

실행 결과

 

 

오디오와 비디오 삽입하기

1) <object> , <embed> : 다양한 멀티미디어 파일을 삽입할 때 사용.

  • 전자를 통해 웹 문서 안에 다른 문서를 삽입할 수도 있다.
  • 후자에서는 src 속성을 사용해 삽입할 다양한 멀티미디어 파일을 지정한다.
  • 후자는 닫는 태그가 필요 없다.

예제 - pdf 파일 삽입하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>PDF 삽입하기</title>
</head>
<body>
  <h1>웹 문서에 PDF 파일 삽입하기</h1>
  <object width="900px" height="800px" data="자바_AM_Day15.pdf"></object>
</body>
</html>

 

실행 결과

 

 

2) <audio>, <video> : 오디오와 비디오 파일 삽입하는 태그

  • HTML에서 배경 음악이나 효과음 등 오디오 파일을 삽입할 때는<audio>태그를 사용
  • 비디오 파일을 삽입할 때는 <video> 태그를 사용한다.
  • 이 때 오디오나 비디오 파일을 시작 하거 나 종료할 수 있는 컨트롤 바 속성을 함께 표시함
  • <video> 태그도 비디오를 재생하거나 멈출 수 있도록 controls 속성을 함께 사용해서 삽입한다.
  • 비디오 파일의 너빗값을 지정하지 않으면 웹 브라우저에 가득 차게 나타나므로 너빗값은 적절히 지정하는 게 좋다.
  • 오디오 파일을 배경 음악처럼 사용하려면 <audio> 태그에서 autoplay 속성과 loop 속성을 지정하면 된다.
  • 이 때 플레이어가 보이지 않도록 하려면 controls 속성을 빼면 된다.

속성

 

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>AudioTest</title>
</head>

<body>
    <audio src="medias/music.mp3" controls loop></audio>
</body>

</html>

 

예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Video Test</title>
</head>

<body>
    <video src="medias/4월12일_백엔드오후반.mp4" controls autoplay width="800" height=" 500"></video>
</body>

</html>

 

 

하이퍼링크 삽입하기

  • 클릭하면 연결된 곳으로 바로 이동해 웹 사이트를 편리하게 사용할 수 있는 기능
  • <a> 태그로 링크를 삽입하고, href 뒤에 주소를 적는다.
  • 텍스트 링크를 만들려면 a 태그 사이에 링크로 만들 텍스트를 입력하고, href 에는 텍스트를 클릭하면 연결할 문서의 경로와 파일명을 넣으면 된다.
  • 이미지도 동일한 방법으로 이미지에 링크를 추가할 수 있다.
  • 링크가 추가된 이미지 위로 마우스를 올리면, 마우스 커서 모양이 손등 모양으로 바뀐다.
  • <a> </a> 사이에 <img> 태그를 넣으면 이미지에도 링크를 만들 수 있다.
  • <target> 속성은 링크를 새 탭에서 열어준다.
  • target 속성에  _blank 라고 지정하면 링크를 클릭했을 때 연결된 문서가 새 탭에서 열린다. 

 

예제

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>A 태그</title>
    </head>
    <body>
        <a href="https://www.naver.com">naver</a>
        <a href="videoTest.html"><img src="images/안녕.jpg" alt="안녕"></a>
        <a href="https://www.daum.net" target="_blank">daum</a>
    </body>
</html>

실행 결과

 

 

문제 1

결과 화면

조건

1. 텍스트 단락에 줄 바꿈 있음.

2. 목록 부분은 '순서 없는 목록' 으로 지정할 것.

3. 목록 내용 중 굵게 표시한 부분과 이텔릭체로 표시한 부분은 중요하지 않지만 다른 텍스트와 구별하기 위한 것

4. 혜택 내용은 순서 있는 목록 으로 표시하되, 숫자는 알파벳 소문자를 사용할 것.

5. 문서 마지막에 이미지를 삽입할 것.

 

코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>IT 수강생 모집</title>
</head>
<body>
  <h1>IT 수강생 모집</h1>
  <h2>IT에 관심 있는 여러분 환영합니다</h2>
  <p>메가 IT에서 모두를 대상으로 수강생을 모집합니다. 학부나 전공에 상관없습니다. <br>
  평소 IT에 관심있었던 사람들의 지원바랍니다.</p>
  <ul>
    <li><b>모집 기간 :</b> 4월 2일 ~ 5월 11일</li>
    <li><b>모집 분야 :</b> 프론트, 백엔드, 게임개발</li>
    <li><b>지원 방법 :</b> 양식 작성 후 이메일 접수<br>
    <i>지원서 양식은 메가IT 홈페이지 공지 게시판에 있습니다.</i></li>
  </ul>
  <h3>혜택</h3>
  <ol type="a">
    <li>취업지원</li>
    <li>공부공간 제공</li>
  </ol>
  <img src="images/a.jpg" width="500" height="500" alt="">  
</body>
</html>

 

 

문제 2

실행 화면

조건

1) 4행 3열의 표 만들기

2) 1~3행의 첫번째 열 합치기

3) 4행의 2열과 3열 합치기

4) 화면에 내용이 있는 부분은 제목 셀로 지정할 것.

 

코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>IT 수강생 모집</title>
  <style>
    table, td, th {
      border:1px solid #ccc;
    }
    td, th {
      padding:10px 20px;
    }
    td:last-child{
      width:200px;
    }
  </style>
</head>
<body>
  <h1>IT 수강생 지원 양식</h1>
  <table>
    <tr>
      <th rowspan="3">개인정보</th>
      <th>이름</th>
      <td></td>
    </tr>
    <tr>
      <th>나이</th>
      <td></td>
    </tr>
    <tr>
      <th>연락처</th>
      <td></td>
    </tr>
    <tr>
      <th>IT 지원 분야</th>
      <td colspan="2"></td>
    </tr>    
  </table>
</body>
</html>
728x90

'Front > Mega-HTML' 카테고리의 다른 글

6. input 태그 (1)  (0) 2023.05.12
5. 폼 삽입하기  (0) 2023.05.12
3. 목록과 표 만들기  (0) 2023.05.12
2. 텍스트 입력하기  (0) 2023.05.12
1. HTML 시작하기, 시멘틱 태그  (0) 2023.05.12
'Front/Mega-HTML' Related Articles more
Comments