이미지 리스트 출력 예제
1. imageList.jsp를 생성하고 실습 이미지인 duke.png를 추가합니다.
2. imageList.jsp를 다음과 같이 작성합니다. for 반복문을 이용해 <ul> 태그 안에 <li> 태그를 연속적으로 출력해서 이미지를 나타냅니다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
.lst_type{overflow:hidden;width:80%;padding:0 10px 10px; margin:0 auto}
.lst_type li{overflow:hidden;clear:both;margin:10px 0 0;color:#2d2c2d;
font-family:'돋움',Dotum;font-size:12px;line-height:100px;
list-style:none ; border-bottom: 2px solid lightgray;position:relative; }
.lst_type li img{display:inline;float:left;position:absolute; }
.lst_type li a{color:#2d2c2d;text-decoration:none; margin-left:340px}
.lst_type li a:hover{text-decoration:underline}
.lst_type li span{color:blue; margin-left:330px;font-family:'돋움',Dotum;font-size:14px; }
</style>
<meta charset="UTF-8">
<title>이미지리스트창</title>
</head>
<body>
<ul class="lst_type">
<li>
<span style="margin-left:50px">이미지 </span>
<span>이미지 이름</span>
<span>선택하기</span>
</li>
<%
for(int i = 0; i < 10; i++) {
%>
<li>
<a href="#" style="margin-left:50px">
<img src="image/duke.png" width="90" height="90" alt=''>
</a>
<a href="#">
<strong>이미지 이름: 듀크<%=i %></strong>
</a>
<a href="#">
<input name='chk<%=i %>' type='checkbox'/>
</a>
</li>
<%
}
%>
</ul>
</body>
</html>
3. http:///localhost:8090/pro12/image1.jsp로 요청하면 다음과 같이 출력됩니다.
리스트로 출력하는 기능은 웹 페이지에서 많아 사용하는 기능입니다.
'프로그래밍 언어 > 자바 웹' 카테고리의 다른 글
| session 내장 객체에 데이터 바인딩 실습 (0) | 2025.10.22 |
|---|---|
| 내장 객체(내장 변수) 기능 (0) | 2025.10.19 |
| 구구단 출력 예제 (0) | 2025.10.13 |
| 학점 변환 예제 (0) | 2025.10.10 |
| 스크립트 요소 이용해 실습하기 - 로그인 예제 (0) | 2025.10.07 |