이미지는 웹사이트에서 눈에 보이는 것이기 때문에 head가 아닌 body섹션에 추가해야 한다.
새로운 요소인 img를 사용하자. 이 또한 빈 태그이기 때문에 종료 태그가 없다. 추가한 후에는 source를 의미하는 src속성을 추가한다(Href도 가능한 것 같은데 관습적으로 src속성을 사용하는 듯? 속성마다 쓰이는 곳이 정해져있다고 한다) 아무튼 속성값으로는 로컬 파일에 대한 상대경로나 이미지가 저장된 웹 서버의 URL을 입력하면 된다.
맨 윗줄에 코드를 추가해보았다.
<body>
<img src="challenges-trophy.jpg" alt="trophy">
<h1>sol's challenge for Friday, May 6th</h1>
<p id="todays-challenge">
Learn about the basics of web development - sepcifically dive into HTML &
CSS. hi
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources.</a>
</p>
</body>
이미지가 추가되었다.
src 속성 뒤의 alt속성에는 이미지 로드에 실패했을 경우 표시되는 폴백 텍스트를 지정할 수 있다. 스크린 리더를 쓰는 사람들이 보는 텍스트이기 때문에 이 텍스트로 이미지를 파악할 수 있도록 지정해주어야 한다. 모든 이미지 요소에 추가해야 하는 매우 중요한 요소이다.
공부 정리용 블로그