3일차: 이미지와 리스트

2025. 1. 29. 08:27

이번 시간에는 웹 페이지에서 이미지와 리스트를 다루는 방법에 대해 배웁니다. 이미지 삽입은 웹 페이지의 시각적 요소를 강화하는 데 중요한 역할을 하며, 리스트는 정보를 정리하여 명확하게 전달하는 데 유용합니다.

이미지 삽입

HTML에서 이미지를 삽입할 때는 <img> 태그를 사용합니다. <img> 태그는 다른 HTML 태그처럼 닫는 태그가 없고, 속성으로 이미지를 지정합니다.

<img> 태그 사용법
기본적인 이미지 삽입 구문은 다음과 같습니다.
```
<img src="image.jpg" alt="설명 텍스트">
```
- src 속성: 이미지를 삽입하는 데 사용되는 속성입니다. 이미지의 파일 경로나 URL을 지정합니다. src는 필수 속성입니다.
- alt 속성: 이미지를 설명하는 대체 텍스트입니다. 이미지가 로드되지 않거나, 시각 장애가 있는 사용자가 화면 읽기 프로그램을 사용할 때 중요한 역할을 합니다. 이 속성은 사용자 경험을 향상시키는 데 중요한 요소입니다.
예시:
```
<img src="https://www.example.com/images/sample.jpg" alt="예시 이미지">
```
이 코드를 사용하면 "sample.jpg" 이미지를 웹 페이지에 삽입할 수 있습니다.
이미지 크기 조정
이미지를 삽입할 때 크기를 조정할 수 있습니다. width와 height 속성으로 이미지의 크기를 지정할 수 있습니다. 이 속성들은 픽셀 단위로 값을 지정합니다.
```
<img src="https://www.example.com/images/sample.jpg" alt="예시 이미지" width="300" height="200">
```
이 코드는 이미지를 너비 300px, 높이 200px로 크기를 지정합니다.
이미지 링크 만들기
이미지를 클릭했을 때 다른 페이지로 이동하도록 할 수 있습니다. 이때 <a> 태그와 함께 <img> 태그를 사용합니다.
```
<a href="https://www.example.com">
  <img src="https://www.example.com/images/sample.jpg" alt="예시 이미지">
</a>
```
위의 코드를 사용하면 이미지를 클릭할 때 "https://www.example.com"으로 이동하게 됩니다.

리스트 작성

HTML에서 리스트를 작성하는 두 가지 방법은 순서 있는 리스트와 순서 없는 리스트입니다. 각 리스트는 항목을 나열하는 데 사용됩니다.

순서 있는 리스트 (<ol>)
순서 있는 리스트는 항목을 숫자나 다른 순서대로 나열할 때 사용합니다. <ol> 태그로 리스트를 정의하고, 각 항목은 <li> 태그로 감쌉니다.
```
<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>
```
출력:
1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목
순서 없는 리스트 (<ul>)
순서 없는 리스트는 항목에 순서가 없고, 보통 점, 동그라미 또는 다른 기호로 표시됩니다. <ul> 태그로 리스트를 정의하고, 항목은 <li> 태그로 정의됩니다.
```
<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ul>
```
출력:
- 사과
- 바나나
- 체리
리스트 항목 (<li> 태그)
<li> 태그는 "List Item"의 약자입니다. 이 태그는 리스트의 항목을 정의하며, <ol>이나 <ul> 태그 안에 포함됩니다. 각 항목은 <li> 태그로 감쌉니다.

이미지와 리스트 실습

이제 이미지를 페이지에 삽입하고, 리스트를 작성해보겠습니다.

이미지 삽입 실습

아래 코드를 사용하여 이미지를 삽입해 보세요.

<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>이미지와 리스트 실습</title>
  </head>
  <body>
    <h1>웹 페이지에 이미지 삽입하기</h1>
    <p>아래 이미지는 예시 이미지입니다.</p>
    <img src="https://via.placeholder.com/300" alt="예시 이미지" width="300" height="200">
  </body>
</html>

이 코드는 "https://via.placeholder.com/300" 이미지를 300x200 픽셀 크기로 삽입합니다. 이 링크는 실제 이미지로 대체하여 사용할 수 있습니다.

리스트 작성 실습

아래 코드를 사용하여 순서 있는 리스트와 순서 없는 리스트를 작성해 보세요.

<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>리스트 실습</title>
  </head>
  <body>
    <h1>순서 있는 리스트</h1>
    <ol>
      <li>HTML 배우기</li>
      <li>CSS 배우기</li>
      <li>JavaScript 배우기</li>
    </ol>

    <h1>순서 없는 리스트</h1>
    <ul>
      <li>사과</li>
      <li>바나나</li>
      <li>체리</li>
    </ul>
  </body>
</html>

이 코드는 순서 있는 리스트와 순서 없는 리스트를 각각 작성합니다. 순서 있는 리스트는 학습할 언어의 순서를 나열하고, 순서 없는 리스트는 과일 목록을 나열합니다.

결론

오늘은 HTML에서 이미지 삽입과 리스트 작성을 배웠습니다. <img> 태그를 사용하여 웹 페이지에 이미지를 삽입하고, 다양한 속성으로 이미지를 조정할 수 있음을 이해했습니다. 또한, <ol>과 <ul> 태그를 사용해 순서 있는 리스트와 순서 없는 리스트를 작성하는 방법을 배웠습니다. 이 기능들은 웹 페이지에서 정보를 깔끔하게 정리하고, 시각적으로 매력적인 콘텐츠를 만드는 데 매우 유용합니다.

저작자표시

'개발 > HTML' 카테고리의 다른 글

5일차: HTML 속성 및 스타일링 (1)	2025.01.31
4일차: 테이블과 폼 (0)	2025.01.30
2일차: 텍스트 형식화와 링크 (1)	2025.01.28
1일차: HTML 기본 이해 (0)	2025.01.27
HTML의 Dialog 팝업 구현: 다양한 유형의 예제 (0)	2025.01.13

subinto의 개발노트