2일차 img 이미지 태그 / audio 소리 태그

2일차 img 이미지 태그 / audio 소리 태그

2020. 10. 24. 17:09ㆍHTML & CSS 💙/HTML 연습

1. 이미지 태그

만약 불러오는 이미지 주소에서 이미지를 찾을 수 없다면 깨진 화면이 나타나고, 깨진 화면 옆으로 캡션만 글씨로 나타난다.

이미지를 임의로 키우고 싶다면, 이미지 태그 안에서 width=" " 를 추가하여 사이즈를 조정할 수 있다.

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
   <p><img src="navi_or.png" alt="SBA"></p>

   <p><img src="https://new.sba.kr/images/web/logo.png" alt="SBA"></p>

   <p><img src="https://new.sba.kr/images/web/logo.png" alt="SBA" width="200"> </p>


  </body>
</html>

결과물

2. 사운드 태그

<audio src="M1_edu_04_UK.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>

<audio src=" "></audio> 가 기본 태그이다.

controls

음원의 재생 등을 조정할 수 있는 컨트롤바를 보이게 할 것인가 아닌가를 결정하는데, 보이지 않게 하고 음원만 들려주고 싶다면 넣지 않으면 된다.

loop

무한 반복으로 재생되게 하고 싶으면 루프 태그를 넣어 준다.

autoplay

웹페이지를 열었을 때 자동으로 재생되게 하고 싶으면 이 태그를 넣으면 된다.

결과물

저작자표시 비영리 변경금지

'HTML & CSS 💙 > HTML 연습' 카테고리의 다른 글

3일차 레이아웃 구성 태그 div / span , div를 이용한 레이아웃 구성 (0)	2020.10.26
3일차 Form 태그 (0)	2020.10.26
3일차 개인연습 Video 태그 및 html 콘텐츠 모델 (0)	2020.10.26
2일차 table 태그 (0)	2020.10.24
2일차 리스트 태그 <li>, <ol>, <ul>,<dl>,<dd>,<dt>,<a href=" > (0)	2020.10.24
1일차 Paragraph, 글씨크기 태그 (0)	2020.10.24

Maryable Day