웹사이트에 생명을 불어넣는 이미지의 힘
Day 5. Adding an Image
<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2family=Fira+Sans:wght@400;700&family=Oswald:wght@700&display=swap"
rel="stylesheet"
/>
<link href="daily-challenge.css" rel="stylesheet" />
<title>My Daily Challenge</title>
</head>
<body>
<img src="challenges-trophy.jpg" alt="A trophy">
<h1>Hoon' Challenge for Tuesday, May 20th</h1>
<p id="todays-challenge">
Learn about the basics of web development - specifically dive into HTML &
CSS.
</p>
<p>
I'll achieve this goal by diving into
<a href="https://www.google.com">more learning resources</a>.
</p>
</body>
</html>
웹사이트를 만들다 보면 내용은 충실한데 뭔가 아쉬움이 남는 경우가 많다. 몇 가지 요소를 추가하면 웹사이트가 더 생동감 있게 변하는데, 그중에서도 가장 효과적인 것이 바로 이미지다. 웹개발을 배우면서 깨달은 이미지에 관한 몇 가지 인사이트를 나누고 싶다.
1. 이미지는 웹사이트의 첫인상을 좌우한다. 랜덤으로 몇 개의 웹사이트를 방문해보면 대부분 이미지가 풍부하게 사용된 것을 볼 수 있다. 인간은 본능적으로 시각적인 요소에 끌리기 때문에, 이미지 하나만으로도 사이트의 매력이 크게 달라진다.
2. HTML에서 이미지를 추가할 때는 <img> 태그를 사용한다. 흥미로운 점은 <img>가 'image'의 축약형이라는 것이다. 많은 초보자들이 <image>로 작성하는 실수를 하는데, 이는 동작하지 않는다.
3. <img>태그는 특별한 종류의 요소다. 대부분의 HTML 요소는 여는 태그와 닫는 태그가 필요하지만, 이미지는 '빈(void)' 요소로 닫는 태그가 없다. 링크와 마찬가지로 속성으로만 구성된다.
4. 이미지를 추가할 때는 src 속성이 필수적이다. 링크에서는 href를 사용하지만, 이미지에서는 src(source)를 사용한다. 웹개발을 처음 배울 때는 이런 차이가 혼란스러울 수 있지만, 경험이 쌓이면 자연스럽게 익숙해진다.
5. 좋은 웹사이트를 만들기 위해 반드시 기억해야 할 것은 alt 속성이다. 이 속성은 단순히 이미지가 로드되지 않을 때 대체 텍스트를 보여주는 것 이상의 의미가 있다. 시각장애인이 스크린 리더를 통해 웹사이트를 이용할 때, 이 텍스트가 읽혀 이미지 내용을 이해할 수 있게 해준다.
6. 접근성은 선택이 아닌 필수다. 웹을 만드는 개발자로서 모든 사용자가 콘텐츠에 접근할 수 있도록 하는 것은 우리의 책임이다. alt 속성을 추가하는 작은 노력으로 더 많은 사람들에게 의미 있는 경험을 제공할 수 있다.
이렇게 보면 이미지 추가는 단순한 작업처럼 보이지만, 그 안에는 웹의 핵심 가치가 담겨 있다. 시각적 매력을 높이면서도 모든 사용자를 배려하는 마음가짐으로 웹사이트를 만들 때, 진정한 의미의 '좋은 웹사이트'가 탄생 한다고 생각한다.
이미지 하나로 웹사이트의 분위기가 완전히 달라지는 것을 경험해보면, 왜 많은 개발자들이 디자인과 사용자 경험에 열정을 쏟는지 이해하게 된다. 나도 계속해서 이런 작은 요소들의 중요성을 잊지 않으며 웹개발 여정을 이어나가려 한다.
