HTML/ [HTML] A태그와 IMG태그를 활용하여 LIST 실습
2023-02-28 19:35:54

리스트 만들기

리스트를 만들기 위해서 사용하는 주로 사용하는 태그는 ol, ul 태그가 있다.

 

각자 내용은 비슷 하지만 실습을 통해 어떻게 다른지 알아보자.

소스 코드

<body>
  <ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
  </ul>

  <ol>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
  </ol>
</body>

 

결과

 

ㅇㄹㅇㄹ
ul 태그는 점이 붙고 ol 태그는 번호가 붙는다.

A 태그를 활용한 실습

위와 같이 간단하고 빠르게 리스트를 만들 수 있으며 a 태그를 활용하여 간단한 실습을 진행해보자.

소스 코드

  • href 속성에 경로(url)를 입력하여 각 페이지로 이동하게 설정
<body>
  <ul>
    <li><a href="https://www.naver.com">네이버로 이동</a></li>
    <li><a href="https://www.google.com">구글로 이동</a></li>
    <li><a href="https://www.daum.net">다음으로 이동</a></li>
  </ul>
</body>

 

결과

 

각 리스트별 링크로 생성되며 클릭시 네이버, 구글, 다음 메인페이지로 이동한다.

IMG 태그를 활용한 실습

리스트 img 태그를 사용하여 여러가지 항목을 간편하게 정리 할 수 있다.

소스 코드

  • src 속성에 이미지가 저장되있는 경로를 입력하여 이미지를 불러옴 (외부 이미지도 불러 올 수 있음)
  • alt 속성은 이미지의 경로가 잘못됬을 시 나타나며 입력된 내용을 출력
  • width, height 값을 입력하여 이미지의 크기를 고정
<body>
  <ol>
    <li><img src="../img/electronics-6801339_1920.jpg" alt="이미지깨짐" style="width: 100px;height: 100px;">첫번째 이미지 보기</li>
    <li><img src="../img/laptop-6966045_1920.jpg" alt="이미지깨짐" style="width: 100px;height: 100px;">두번째 이미지 보기</li>
    <li><img src="../img/mug-6966047_1920.jpg" alt="이미지깨짐" style="width: 100px;height: 100px;">세번째 이미지 보기</li>
  </ol>
</body>

 

결과

 

이미지 출처 : 픽사베이

A 태그와 IMG 태그를 활용한 실습

a 태그와 img 태그를 같이 쓰면 이미지를 누르면 페이지가 이동되게끔 설정 할 수 있다.

 

소스 코드

  • ul 태그는 기본적으로 세로로 나열되기 때문에 list-style: none 속성을 사용하여 리스트 스타일을 제거 (가로정렬을 하기위해 사용)
  • li 태그에 float: left 속성을 사용하여 3개의 이미지를 왼쪽 정렬
  • padding-right: 5px 속성은 li 끼리 붙어 있어 이미지가 붙어 있는거 처럼 보여서 오른쪽으로 5px 띄어주기 위해 사용
<body>
  <ul style="list-style: none;">
    <li style="float: left;padding-right: 5px;">
      <a href="https://www.naver.com">
        <img src="../img/electronics-6801339_1920.jpg" alt="1번이미지깨짐" style="width: 100px; height: 100px;">
      </a> <br> 네이버로 이동
    </li>
    <li style="float: left;padding-right: 5px;">
      <a href="https://www.google.com">
        <img src="../img/laptop-6966045_1920.jpg" alt="2번이미지깨짐" style="width: 100px; height: 100px;">
      </a> <br> 구글로 이동
    </li>
    <li style="float: left;padding-right: 5px;">
      <a href="https://www.daum.net">
        <img src="../img/mug-6966047_1920.jpg" alt="3번이미지깨짐" style="width: 100px; height: 100px;">
      </a> <br> 다음으로 이동
    </li>
  </ul>
</body>

 

결과

 

이미지 클릭 시 해당 페이지로 이동. 이미지 출처 : 픽사베이

 

728x90

'HTML' 카테고리의 다른 글

[HTML] input을 활용한 메뉴 탭 만들기  (0) 2023.03.07
[HTML] TABLE 태그 사용하여 입사지원서 만들기  (1) 2023.02.28
[HTML] 태그 및 VScode 단축키 정리  (0) 2023.02.27

티스토리툴바