정보

HTML 속성 src 알아보기

황민도 2024. 4. 19. 18:04

 

오늘은 간략하게 많이 쓰이는 <img>, <script>, <iframe>, <audio>, <video> 같은 태그에 들어가는 src를 알아보려한다.

 

 

(출처 : https://chat.openai.com/)

외부 리소스의 위치(URL)를 지정할 때 사용됩니다.

src는 "source"의 약자로, 해당 요소가 참조해야 할 외부 파일의 경로나 URL을 명시합니다. 각 태그별로 src 속성의 용도를 구체적으로 살펴보겠습니다:

  1. <img> 태그
    • 이미지 파일의 URL을 지정합니다. 예를 들어, <img src="image.jpg" alt="설명">는 웹 페이지에 image.jpg라는 이미지 파일을 표시합니다.
  2. <script> 태그
    • 외부 JavaScript 파일을 로드할 때 사용됩니다. 예를 들어, <script src="script.js"></script>는 script.js 파일을 현재 페이지에 로드하고 실행합니다.

  1. <iframe> 태그
    • 다른 HTML 페이지를 현재 페이지 내에 내장(embed)할 때 사용됩니다. 예를 들어, https://example.com 웹 페이지를 현재 페이지에 표시합니다.
  2. <audio> 및 <video> 태그
    • 오디오 또는 비디오 파일의 소스를 지정합니다. 예를 들어, <audio src="audio.mp3" controls></audio>는 오디오 플레이어를 통해 audio.mp3 파일을 재생할 수 있게 하고, <video src="video.mp4" controls></video>는 비디오 파일을 웹 페이지에 임베드합니다.

src 속성은 해당 요소가 정상적으로 기능하려면 반드시 필요한 경우가 많으며, 경로는 절대 경로나 상대 경로 모두 가능합니다. 사용하는 경로 유형은 파일 구조나 호스팅 환경에 따라 결정됩니다.