이미지 삽입(<img>)
약 4분
본문 듣기
HTML에서 이미지 삽입하기: <img> 태그
안녕하세요! 오늘은 HTML의 중요한 부분인 이미지 삽입 방법에 대해 알아보겠습니다. 웹페이지에서 이미지는 내용을 보강하고 더욱 매력적으로 만드는 데 큰 역할을 합니다. 첫 단계로, HTML을 타입스크립트 대신 태그를 사용하여 이미지를 삽입하는 방법을 배워보겠습니다.
<img> 태그 기본 구조
태그는 이미지 파일을 웹페이지에 표시하는 역할을 합니다. 기본 구조는 다음과 같습니다:
코드
html
<img src="이미지의 경로" alt="이미지 설명" />여기서 'src' 속성은 이미지 파일의 경로를 지정하고, 'alt' 속성은 이미지가 로드되지 않는 경우에 표시될 대체 텍스트의 역할을 합니다. 이는 사이트 접근성을 높이는 데 도움을 줍니다.
이미지 삽입 실습하기
이제 VS Code에서 실제로 이미지를 삽입해 보겠습니다. 다음 단계를 따라 해보세요.
- VS Code를 열고 새로운 HTML 파일을 생성합니다. (파일명은
index.html로 설정해 주세요.)
- 기본 HTML 구조를 다음과 같이 입력합니다.
코드
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 삽입 예제</title>
</head>
<body>
</body>
</html><body>태그 안에 다음과 같은<img>태그를 추가합니다. 예시로, 당신이 사용하고 싶은 이미지를 찾아 경로를 입력해 보세요.
코드
html
<img src="your-image-path.jpg" alt="나의 이미지" />- 이미지 경로를 넣고 파일을 저장한 후, 브라우저에서 열어 이미지를 확인해 봅시다!
코드 동작 원리
브라우저는 <img> 태그를 읽고, src 속성에 지정된 경로에서 이미지를 가져옵니다. 만약 경로가 올바르지 않다면, alt 속성에 지정된 텍스트가 대신 표시됩니다. 이것은 사용자에게 이미지의 의미를 전달해 줍니다.
핵심 요약
오늘은 HTML에서 이미지를 삽입하는 방법을 배웠습니다. 태그는 간단하지만, 웹페이지의 시각적 요소를 강화하는 데 매우 중요합니다. 다음 실습 문제를 통해 오늘 배운 내용을 복습해봅시다.
실습 문제
- 다른 이미지 파일을 찾아
<img>태그를 추가해 보세요. - 서로 다른 alt 텍스트를 사용해 보며 어떤 변화를 느끼는지 확인해 보세요.
개인 프로젝트: 자기소개 페이지 만들기
최종적으로, 자신의 소개를 담은 간단한 웹페이지를 만들어 보세요. 본인의 사진과 다양한 정보(취미, 좋아하는 것 등)를 포함해야 합니다. 이를 통해 오늘 배운 내용을 효과적으로 실습할 수 있습니다. 자, 이제 시작해 봅시다!
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.