[HTML 기초 2편] 링크, 이미지, 목록 활용하기

 

이번 시간에는 웹페이지에서 자주 사용되는 링크, 이미지, 목록을 어떻게 활용할 수 있는지에 대해 알아보겠습니다. 이 세 가지 태그는 웹사이트를 더욱 풍성하게 만들 수 있는 중요한 요소입니다. 각각의 활용법을 배워보며 HTML을 잘 다뤄보도록 하겠습니다.

1. 링크 만들기 (<a> Tag)

링크는 웹페이지에서 다른 페이지로 이동할 때나 외부 사이트로 연결할 때 필수적인 Tag입니다. <a> Tag는 하이퍼링크를 만들 때 사용됩니다.

1️⃣ 기본 링크 만들기

예시 웹사이트로 이동

• href: 링크할 URL을 지정합니다. 클릭 시 해당 URL로 이동합니다.

2️⃣ 새 탭에서 링크 열기

새 탭에서 예시 사이트로 이동

• target="_blank": 링크를 새 탭에서 열도록 설정하는 속성입니다.

링크는 웹페이지 내의 다른 콘텐츠나 외부 웹사이트로 이동할 수 있는 중요한 역할을 하므로, 적절한 사용이 필요합니다.

2. 이미지 삽입하기 (<img> Tag)

웹페이지에서 이미지를 삽입할 때는 <img> Tag를 사용합니다. 이미지는 콘텐츠를 시각적으로 풍성하게 만들며, 사용자의 관심을 끌 수 있습니다.

1️⃣ 기본 이미지 삽입

<img src="image.jpg" alt="이미지 설명">

• src: 이미지 파일의 경로를 지정합니다. 이 경로는 이미지가 웹페이지에서 보이도록 연결하는 역할을 합니다.
• alt: 이미지가 표시되지 않을 때 대신 보여줄 설명을 작성합니다. 웹 접근성 향상에 중요한 역할을 합니다.

2️⃣ 이미지 크기 조절

<img src="image.jpg" alt="이미지 설명" width="500" height="300">

• width와 height: 이미지를 원하는 크기로 조정할 수 있습니다.

이미지는 시각적 요소로서 웹페이지의 디자인과 사용자 경험을 향상시킬 수 있습니다. 하지만 이미지 크기를 너무 크게 설정하지 않도록 주의하세요.

3. 목록 만들기 (<ul>, <ol>, <li> Tag)

목록은 정보를 정리하고, 깔끔하게 표현할 때 유용하게 사용됩니다. HTML에서 두 가지 주요 목록을 사용할 수 있습니다: 순서 없는 목록과 순서 있는 목록.

1️⃣ 순서 없는 목록 (<ul>)

<ul>
  <li>커피 원두</li>
  <li>커피 기계</li>
  <li>우유</li>
</ul>

• <ul>: 순서 없는 목록을 만들 때 사용됩니다.
• <li>: 목록 항목을 추가할 때 사용됩니다.

2️⃣ 순서 있는 목록 (<ol>)

<ol>
  <li>가게 오픈</li>
  <li>커피 원두 준비</li>
  <li>커피 만들기</li>
</ol>

• <ol>: 항목의 순서가 중요한 경우, 순서 있는 목록을 만들 때 사용됩니다.
• <li>: 목록 항목을 추가합니다.

3️⃣ 목록 내에 링크와 이미지 넣기

목록 항목 안에 링크 와 이미지 를 클릭하면 미친듯이 만들 수 있습니다.

<ul>
  <li><a href="https://www.example.com">예시 사이트로 이동</a></li>
  <li><img src="coffee.jpg" alt="커피 이미지" width="100" height="100"></li>
</ul>

이렇게 목록 안에는 다른 HTML 요소를 넣어서 다양한 콘텐츠를 따로 보관할 수 있습니다.

마무리

오늘은 링크, 이미지, 목록 활용법에 대해 배웠습니다. 이 기본적인 HTML 태그들을 잘 활용하면 웹페이지를 더욱 풍성하고 유용하게 만들 수 있습니다. 링크를 통해 다른 페이지로 이동하고, 이미지를 통해 시각적으로 정보를 전달하며, 목록을 사용해 정리된 정보를 제공할 수 있죠.

이제 이 태그들을 실습하며 자신만의 웹페이지를 꾸며보세요! 다음 시간에는 HTML에서 자주 사용되는 다른 태그들을 배워보겠습니다. 그럼, 즐거운 웹 개발 되세요!