HTML5 링크와 이미지(Links and Images)
하이퍼링크 생성(Creating Hyperlinks): <a> 요소
하이퍼링크는 다른 페이지, 파일, 이메일 주소 등으로 연결할 수 있는 링크를 만드는 데 사용됩니다. <a> 요소는 앵커(anchor) 요소라고도 하며, href 속성을 사용하여 링크 대상 URL을 지정합니다.
예제: 기본 하이퍼링크
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>하이퍼링크 생성</title>
</head>
<body>
<p><a href="https://www.example.com">예제 사이트로 이동 (Go to Example Site)</a></p>
</body>
</html>
링크의 속성(Link Attributes): href, target, rel
href(Hypertext Reference): 링크의 목적지 URL을 지정합니다.target: 링크를 열 창이나 프레임을 지정합니다._blank는 새로운 창이나 탭에서 링크를 엽니다.rel: 링크 대상과의 관계를 정의합니다.nofollow는 검색 엔진이 이 링크를 따르지 않도록 지시합니다.
예제: 링크 속성 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크 속성</title>
</head>
<body>
<p><a href="https://www.example.com" target="_blank" rel="nofollow">새 탭에서 예제 사이트로 이동 (Go to Example Site in a New Tab)</a></p>
</body>
</html>
이미지 삽입(Inserting Images): <img> 요소
이미지는 웹 페이지에 시각적 콘텐츠를 추가하는 데 사용됩니다. <img> 요소는 이미지 파일을 웹 페이지에 삽입하는 데 사용되며, src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
예제: 기본 이미지 삽입
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 삽입</title>
</head>
<body>
<img src="example.jpg" alt="예제 이미지" />
</body>
</html>
이미지의 속성(Image Attributes): src, alt, width, height
src(Source): 이미지 파일의 경로를 지정합니다.alt(Alternative Text): 이미지가 로드되지 않을 때 표시할 대체 텍스트를 지정합니다.width: 이미지의 너비를 픽셀 단위로 지정합니다.height: 이미지의 높이를 픽셀 단위로 지정합니다.
예제: 이미지 속성 사용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지 속성</title>
</head>
<body>
<img src="example.jpg" alt="예제 이미지" width="300" height="200" />
</body>
</html>
링크와 이미지의 조합(Combining Links and Images)
링크와 이미지를 조합하여 이미지를 클릭하면 링크로 이동하도록 할 수 있습니다. 이미지 요소(<img>)를 앵커 요소(<a>)로 감싸면 이미지가 링크가 됩니다.
예제: 링크와 이미지의 조합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크와 이미지의 조합</title>
</head>
<body>
<a href="https://www.example.com">
<img src="example.jpg" alt="예제 이미지" width="300" height="200" />
</a>
</body>
</html>
하이퍼링크와 이미지는 웹 페이지의 내비게이션과 시각적 표현을 풍부하게 만드는 중요한 요소들입니다. 하이퍼링크를 사용하여 페이지 간 연결을 쉽게 만들고, 이미지를 사용하여 내용을 시각적으로 보강할 수 있습니다. 링크와 이미지를 함께 사용하면 사용자 경험을 더욱 향상시킬 수 있습니다.