Search
K
📗

HTML에 이미지 추가하기

HTML에 이미지 추가하기

HTML 문서는 아주 오래 전부터 이미지를 추가할 수 있었습니다. 그만큼 HTML 문서에서 이미지가 차지하는 중요도는 큽니다. HTML 문서에 이미지를 추가하는 작업은 매우 중요하고 또한 쉽습니다.

HTML의 이미지

HTML 문서에 이미지를 추가할때 우리는 브라우저에게 어디서 그 이미지를 찾아서 보여주어야 하는지 전달해주어야 합니다. HTML 태그에 정보를 추가하여 이미지 소스에 대한 정보를 전달할 수 있습니다. 이미지 태그는 <img>입니다.
예제 코드 왼쪽에서 여러분은 아래와 같은 코드를 볼 수 있습니다.
<img src="이미지 주소">
그리고 화면에서는 바닐라코딩의 로고를 볼 수 있습니다. 여러분이 보신 태그에는 여러분이 아직 배우지 못했던 부분이 있습니다. 바로, attribute (속성)입니다. 이미지 태그는 src라고 부르는 하나의 속성을 갖고 있습니다. 이미지를 불러오기 위해서 우리는 이 속성에 해당하는 값을 이미지의 URL로 설정해주어야 합니다.
만약 우리가 이미지를 교체하고 싶다면, 우리는 해당 태그의 src 속성값을 다른 이미지의 URL로 바꾸면 됩니다.
인터넷에서 여러분이 직접 찾은 이미지 URL을 사용하여 이미지를 수정해보세요.

요약

몇몇 HTML 태그는 속성을 이용하여 추가적인 정보나 명령을 받을 수 있게 되어있습니다. 이 정보들을 전달해주는 것이 바로 attribute(속성)입니다. 우리는 이미지 태그의 src 속성을 이용하여 이미지의 웹 주소를 변경할 수 있습니다.

주요 개념

  • attribute (속성)

참고할 만한 자료

다음 단계에서는 가장 많이 사용되는 태그 중 하나인 링크에 대해 살펴보겠습니다.