[attribute] HTML - src 속성 ★ - 외부 리소스 URL주소 지정 (= src속성 = 에스알시속성/에스알씨속성/소스속성)

1. src 예제 - <audio> 경우
2. src 정의
3. src 구문
4. src 예제 - <embed> 경우
5. src 예제 - <iframe> 경우
6. src 예제 - <img> 경우
7. src 예제 - <input> 경우
8. src 예제 - <script> 경우
9. src 예제 - <source> 경우
10. src 예제 - <track> 경우
11. src 예제 - <video> 경우

src 예제 - <audio> 경우

 

<audio src="https://ccrma.stanford.edu/~jos/mp3/harpsi-cs.mp3" controls>

당신 브라우저는 audio 태그 지원 X

</audio>

 

결과보기

src 정의

 

외부 리소스 URL주소 지정.

 

---

 

1. src 속성 사용 가능 태그 종류

<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>

 

2.

<audio> 경우, ogg 파일은 Firefox, Opera, Chrome, Edge에서 작동. (IE나 Safari에서 오디오 파일을 재생하려면 MP3 파일을 사용해야 함.)

 

 

3.

주요 최신 브라우저 모두 지원.

 

src 구문

 

• <audio src="URL">...</audio>
• <embed src="URL">
• <iframe src="URL">...</iframe>
• <img src="URL">
• <input type="image" src="URL">
• <script src="URL"></script>
• <source src="URL">
• <track src="URL">
• <video src="URL">...</video>

 

---

[속성값]

 

URL

리소스 파일 주소 (※ 절대주소/상대주소 모두 가능)

 

src 예제 - <embed> 경우

 

<embed src="https://i.imgur.com/WfW5mBC.png">

 

결과보기

src 예제 - <iframe> 경우

 

<iframe src="https://homzzang.com">

  <p>당신 브라우저는 iframe 지원 X</p>

</iframe>

 

src 예제 - <img> 경우

 

<img src="https://i.imgur.com/WfW5mBC.png" alt="홈짱닷컴" width="185" height="39">

 

결과보기

src 예제 - <input> 경우

 

<form action="/action_page.php">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name"><br><br>

  <input type="image" src="submit.gif" alt="확인" width="30" height="30">

</form>

 

src 예제 - <script> 경우

 

<script src="myScript.js"></script>

 

src 예제 - <source> 경우

 

<audio controls>

  <source src="music.ogg" type="audio/ogg">

  <source src="music.mp3" type="audio/mpeg">

  당신 브라우저는 audio 태그 지원 X

</audio>

 

src 예제 - <track> 경우

 

<video width="560" height="315" controls>

  <source src="movie.mp4" type="video/mp4">

  <source src="movie.ogg" type="video/ogg">

  <track src="movie_en.vtt" kind="subtitles" srclang="en" label="영어">

  <track src="movie_ja.vtt" kind="subtitles" srclang="ja" label="일본어">

</video>

 

src 예제 - <video> 경우

 

<video width="250" height="500" controls src="https://thumbs.gfycat.com/FoolhardyMiserlyAsiantrumpetfish-mobile.mp4">

  당신 브라우저는 video 태그 지원 X

</video>

 

결과보기