웹 페이지에서 이미지는 단순히 그림으로 사용 될 수도 있고 버튼으로도 사용되는 등 다양한 역할을 하고 있습니다. 그런면에서 이미지를 적재적소에 넣고 활용하는 것도 중요하다고 할 수 있습니다.
<img>태그
웹 페이지에 이미지를 삽입할 때는<img>를 사용합니다. 그냥 <img>만 사용하는 것은 크게 의미 없고, src=경로 속성을 함께 사용해서 이미지 파일이 존재하는 경로를 지정해줘야합니다. 경로라는 단어가 존재하는데 경로에 대한 내용은 파일 경로 포스트를 참고해주세요.
<body>
<img src='../img/hi.png'>
</body>
width, height 속성
이미지에는 width와 heigth라는 속성이 존재합니다. 이 속성을 통해 자유자재로 이미지의 크기를 줄일 수 있습니다. 위의 hi!이미지는 150X150사이즈의 이미지인데, 속성을 통해 크기를 조정해보겠습니다.
<img src='../img/hi.png' width='50px' height='50'>
alt 속성
다음으로 중요한 것이 alt속성입니다. alt속성은 웹 접근성과 관련이 있는 속성입니다. 그래서 이미지가 어떤 정보나 의미를 담고 있다면 반드시 추가해주어야할 속성입니다. alt속성은 이미지에 대한 설명을 제공하는 속성입니다. alt속성은 다음 세 가지의 일을 합니다.
- 화면 낭독기가
alt속성에 명시된 글을 읽어줍니다. - 네트워크 문제 등으로 인해 이미지를 제대로 표시할 수 없는 경우 이미지 대신
alt속성에 명시된 글을 표시해줍니다. - 검색 엔진의 이미지 검색은 alt에 써진 문구를 기반으로 검색합니다.
다음은 경로에 이미지 파일이 없는 경우 웹 브라우저에서 보여지는 화면입니다.
<img src='../img/이런 사진 있니.png' alt='이런 사진 없어요.'>
나는 나대로🥉