jsp) DB에서 불러온 이미지 미리보기_이미지게시판

 

---

크롬 / 이클립스 / 오라클DB

 

이미지 게시판 만들던 도중 table 같은 게시판 말고

이미지를 미리 보여주면 좋겠다는 생각에서 출발~

이런식으로~ 한 페이지에 9장 들어가게끔 만듦(페이징)

위 이미지는 구글링 '풍경'으로 검색해서 나온 것, 강아지는 '강아지'로 검색.

DB 이미지

생각 :

이미지도 이름만 받으면 되니 ResultSet.next()에서 String 변수로 받음.
URL변수로 하나 만들어서 background-image: url(' '); 에 들어가게끔.

<%
imgboardList board = new imgboardList();
List<boardDTO> b = board.getList(String tbl, String boardNo);
	for(boardDTO dto : b){
 	String img = dto.getImgFileRealName();
	String imgsum = "/uploaded/"+img;
%>   
 <div class="imgbox" style="background-image: url('<%=imgsum%>')"></div>
<%
} //위 for문 닫기
<%

*div 속성에 style을 바로 넣어준 이유는 표현식을 쓰기 위해.

---

문제점

1. 저대로 올리면 가로와 세로가 각각 다른 이미지가 div틀에 갇힌다. (늘어나거나 바둑판처럼)

 

해결 : cover

1. 구글링을 해보니 키워드는 썸네일, 이미지 미리 보기였다.

2. 이미지를 배경으로 넣어서 조절하라는 어떤 게시글의 조언을 읽게 됨.

.imgbox {
    width: 200px;
    height: 150px;
    background-size: cover;
}

---

COVER... 앞으로 많이 볼 것 같다.

속성은 하나하나 선택해서 적용해보고 찾은 것.. 
css에 대해 아는 게 전무하다 보니 키워드도 몰라서 그냥 막무가내 적용해봄.
그렇게 해서 맘에 들게 나오면 css파일에 옮겨 적었다.

overflow: hidden; 을 쓰라는 조언 글도 읽었는데 어떻게 쓰는지 이해가 되지 않아 못썼다.

 

---

레이아웃

 

• 첫 번째 DIV

display: flex;
flex-wrap: wrap;

 

• 두 번째 DIV : img div와 p태그를 감싸는 div 

display: flex;
justify-content: space-evenly;
flex-direction: column;
align-items: center;

 

 

---

 

 

CLASS imgboardList 전체 

public class imgboardList {

	Connection con = null;
	Statement stmt = null;
	ResultSet rs = null;

	public List<boardDTO> getList(String boardNo) throws Exception{
		
		List<boardDTO> boardList = new ArrayList<boardDTO>();
		boardDTO dto;
		
		con = dbcon.getConnection();
		stmt = con.createStatement();
		String sql = "select * from img_tbl where imgNo = "+boardNo;
		rs=stmt.executeQuery(sql);
		
		while(rs.next()) {
			dto = new boardDTO();
			dto.setImgNo(rs.getString("imgNo"));
			dto.setImgTitle(rs.getString("imgTitle"));
			dto.setImgContent(rs.getString("imgContent"));
			dto.setImgFileRealName(rs.getString("imgFileRealName"));
			dto.setImgWriter(rs.getString("imgWriter"));
			dto.setImgDate(rs.getString("imgDate"));
			boardList.add(dto);
		}
		
		if(rs!=null) rs.close();
		if(stmt!=null) stmt.close();
		if(con!=null) con.close();
		
		return boardList;
		
	}
	
}