[웹 디자인] 4일차: HTML 링크와 이미지

링크

HTML에서 링크는 사용자가 다른 페이지나 리소스로 이동할 수 있도록 합니다. 링크는 <a> 요소를 사용하여 정의됩니다.

하이퍼링크

• <a>: 앵커 태그로, 링크를 정의하는 요소입니다.
• href: 하이퍼링크 참조 속성으로, 이동할 URL을 지정합니다.

예제:

<a href="https://www.example.com">Example Website</a>

링크의 다양한 속성

• target: 링크를 클릭할 때 열리는 방법을 지정합니다.
  • _self: 현재 창에서 열림 (기본값)
  • _blank: 새 창이나 새 탭에서 열림
  • _parent: 부모 프레임에서 열림
  • _top: 최상위 프레임에서 열림

예제:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

• title: 링크에 대한 추가 정보를 제공합니다. 사용자가 링크 위에 마우스를 올렸을 때 툴팁으로 표시됩니다.

예제:

<a href="https://www.example.com" title="Visit Example Website">Example Website</a>

링크 텍스트와 이미지

• 텍스트 링크: 링크 텍스트로 표시됩니다.
• 이미지 링크: 링크 텍스트 대신 이미지로 표시됩니다.

예제:

<!-- 텍스트 링크 -->
<a href="https://www.example.com">Visit Example Website</a>

<!-- 이미지 링크 -->
<a href="https://www.example.com">
  <img src="example.jpg" alt="Example Image">
</a>

이미지

HTML에서 이미지는 <img> 요소를 사용하여 삽입됩니다. 이미지는 웹 페이지에 시각적 요소를 추가하는 데 매우 유용합니다.

이미지 요소

• <img>: 이미지를 삽입하는 요소입니다. 닫는 태그가 없습니다.
• src: 이미지 소스 속성으로, 이미지 파일의 경로를 지정합니다.
• alt: 대체 텍스트 속성으로, 이미지가 표시되지 않을 때 대체 텍스트를 제공합니다.
• width: 이미지의 너비를 지정합니다.
• height: 이미지의 높이를 지정합니다.

예제:

<img src="example.jpg" alt="Example Image" width="500" height="300">

이미지 경로

• 절대 경로: 전체 URL을 사용하여 이미지를 참조합니다.
  • 예: https://www.example.com/images/example.jpg
• 상대 경로: 현재 문서를 기준으로 이미지를 참조합니다.
  • 예: images/example.jpg

이미지의 접근성

• alt 속성: 이미지를 대체하는 텍스트를 제공하여 접근성을 향상시킵니다. 시각장애인 사용자가 스크린 리더를 사용할 때 유용합니다.

예제:

<img src="example.jpg" alt="A description of the example image">

이미지의 크기 조절

• CSS를 사용한 크기 조절: 이미지의 크기를 CSS로 조절할 수 있습니다.

예제:

<style>
  .responsive-image {
    width: 100%;
    height: auto;
  }
</style>

<img src="example.jpg" alt="Responsive Image" class="responsive-image">

결론

링크와 이미지는 HTML 문서에서 중요한 역할을 합니다. 링크를 사용하여 사용자가 다른 페이지나 리소스로 이동할 수 있으며, 이미지를 통해 시각적인 요소를 추가할 수 있습니다. 이번 글에서는 링크와 이미지 요소의 다양한 속성과 사용법에 대해 배웠습니다.

다음 글에서는 폼과 입력 요소에 대해 알아보겠습니다.

다음 글에서 만나요!