Riucc's Storage :: [JSP] - 이미지컨텐츠 row 분할하여 출력(nth-child)

[JSP] - 이미지컨텐츠 row 분할하여 출력(nth-child)

JSP 개발 참고2018. 5. 14. 00:16

336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

○ 이미지컨텐츠 row 분할하여 출력(nth-child)

// writeprint.css (이미지컨텐츠 row 분할 위한 css)

element.style {

}

.main-content {

background: #fff;

clear: both;

margin: 0 auto;

overflow: hidden;

max-width: 100%;

}

.content-area {

width: 100%;

}

.content {

position: relative;

}

.content-home {

float: left;

margin: 0;

width: 100%;

}

.rclayout .post-grid {

border-left: 0;

border-right: 0;

width: 100%;

}

.post-grid:nth-child( 2n+1 ) {

}

.post-grid:nth-child( 2n+2 ) {

border-left: 1px solid #fff;

}

.rclayout .post-grid:nth-child( 3n ) {

border-left: 1px solid #fff;

border-right: 0;

}

.rclayout .post-grid:nth-child( 3n-1 ) {

border-left: 0;

border-right: 1px solid #fff;

}

.rclayout .post-grid:nth-child( 3n ), .rclayout .post-grid:nth-child( 3n-1 ) {

width: 50%;

}

.post-meta-thumb {

color: rgba(255, 255, 255, 0.9);

left: 20px;

right: 20px;

top: 20px;

position: absolute;

}

.post-bottom {

color: rgba(255, 255, 255, 0.9);

right: 20px;

bottom : 20px;

position: absolute;

}

.post-inner {

color: rgba(255, 255, 255, 0.9);

margin: 0 auto;

max-width: 96%;

position: relative;

text-align: center;

-ms-transform: translateY(-50%);

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

top: 50%;

z-index: 99;

}

.post-cats {

text-align: center;

line-height: 20px;

font-style: normal;

font-size: 13px;

opacity: 1;

visibility: visible;

-webkit-transition: opacity 0.24s ease-in-out;

-moz-transition: opacity 0.24s ease-in-out;

transition: opacity 0.24s ease-in-out;

}

.post-cats {

margin-bottom: 20px;

}

.post header, .attachment header {

clear: both;

text-align: center;

}

.uppercase {

text-transform: uppercase;

}

.post-avtar {

float: left;

}

.post-cover {

background-position: center center;

background-size: cover;

height: 100%;

opacity: 0.6;

position: absolute;

width: 100%;

}

.post-grid {

background: #262626;

border-bottom: 2px solid #fff;

box-sizing: border-box;

float: left;

height: 440px;

position: relative;

width: 50%;

}

.post {

}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

display: block;

}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: inherit;

vertical-align: baseline;

}

body {

background: #ffffff;

line-height: 1;

color: #848484;

font: 13px/20px arial, sans-serif;

}

::selection {

background: #222;

color: white;

text-shadow: none;

}

// index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<link rel="stylesheet" href="css/writeprint.css">

<!-- a:link 클릭하지 않은 링크

a:visited 한번 클릭했거나 들어가보았던 링크

a:active 링크부분에서 마우스를 누르고 있는 상태

a:hover 링크를 클릭하려고 마우스를 가져갔을 때 상태

decoration -> underline; 밑줄, none; 밑줄 없음

-->

a:link {

text-decoration: none;

color: #ffffff;

}

a:visited {

text-decoration: none;

color: #ffffff;

}

a:active {

text-decoration: none;

color: #ffffff;

}

a:hover {

text-decoration: none;

color: #EDA900;

}

</style>

<%@ page import="file.fileDTO"%>

<%@ page import="file.fileDAO"%>

<%@ page import="java.util.ArrayList"%>

<%@ page import="java.net.URLEncoder"%>

</head>

<body>

request.setCharacterEncoding("UTF-8");

String userSessionID = null;

if (session.getAttribute("userID") != null) {

userSessionID = (String) session.getAttribute("userID");

}

if (userSessionID != null) {

}

<% if (userSessionID != null){ %>

<div id="nav_text4" class="nav_text_class" style="padding: 0px 25px 0px 25px; cursor: pointer;" onclick="location.href='./userMypage.jsp'">마이페이지</div>

<% } else if(userSessionID == null) { %>

}

<% if(userSessionID == null) { %>

<% } else if(userSessionID != null){ %>

}

</div>

</header>

</div>

ArrayList<fileDTO> writeList = new ArrayList<fileDTO>();

writeList = new fileDAO().getWriteCreatedList();

fileDTO write;

int i = 0;

for (i = 0; i < writeList.size(); i++) {

write = writeList.get(i);

<a href="userWriteDetailView.jsp?userWriteTitle=<%= write.getTitle() %>" title="<%=write.getTitle()%>"><div class="post-cover" style="background-image: url('./uploadImage/<%=write.getFileRealName()%>'); opacity: 0.6"></div></a>

<img class="rounded-circle" src="./userProfilePicture/<%=write.getUserPropilePicture()%>" height="50" width="50"> <span class="post-author">by <a href="http://the-edit.co.kr/author/editor_m"><%=write.getUserWriteID()%></a></span>  <small><%=write.getUserWriteTime()%></small>

</div>

<a href="userWriteDetailView.jsp?userWriteTitle=<%= write.getTitle() %>" title="<%=write.getTitle()%>"><%=write.getTitle()%> </a>

</h2>

</header>

</div>

금액<span style="color: red;"> <%=write.getUserCoinAmount()%></span> 추천<span style="color: red;"> <%=write.getUserLikeAmount()%></span> 댓글<span style="color: red;"> <%=write.getUserCommentAmount()%></span> 감사<span style="color: red;"> <%=write.getUserReportAmount()%></span>

</div>

</article>

<%} %>

</div>

</body>

</html>

저작자표시 (새창열림)

'JSP 개발 참고' 카테고리의 다른 글

[JSP] - 게시물 추천, 좋아요 중복없이 한번만 하기 (1)	2018.05.17
[JSP] - 자신이 쓴 게시물만 삭제하기 (0)	2018.05.16
[JSP] - 다른 테이블에서 작성자 프로필사진 가져오기 (0)	2018.05.06
[JSP] - 게시물 상세 DB 출력하기 (0)	2018.05.05
[JSP] - 게시물 검색 및 검색된 내용의 DB 출력하기 (0)	2018.05.05

최근 등록 현황

달력

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

카운터

[JSP] - 이미지컨텐츠 row 분할하여 출력(nth-child)

'JSP 개발 참고' 카테고리의 다른 글

최근 글

최근 월별 글

최근 댓글

최근 글

최근 월별 글

최근 댓글

최근 글

최근 월별 글

최근 댓글

지난달

2026.2

다음달

티스토리툴바