정이솔
3 years ago
parent
acc9a04c01
commit
c90f6382a2
@ -0,0 +1,427 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta content="IE=Edge" http-equiv="X-UA-Compatible" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
|
||||
<title>아이키 매니저::성장 TALK 상세보기</title>
|
||||
<link rel="shortcut icon" href="../../img/favicon.ico">
|
||||
<link rel="stylesheet" href="../../css/style.css">
|
||||
<link rel="stylesheet" href="../../css/swiper.min.css">
|
||||
<script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
|
||||
<script src="../../js/swiper.min.js"></script>
|
||||
<script src="../../js/jquery_popupoverlay.js"></script>
|
||||
<script src="../../js/design.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- wrap -->
|
||||
<div class="wrap">
|
||||
|
||||
<!-- header_sub -->
|
||||
<header class="header_wrapper">
|
||||
<a href="javascript:back.return_url()" class="side_Lbtn hidden pre_btn">이전으로</a>
|
||||
<h1 class="header_title">커뮤니티</h1>
|
||||
<div class="side_Rbtn">
|
||||
</div>
|
||||
</header>
|
||||
<!-- //header_sub -->
|
||||
|
||||
<!-- content -->
|
||||
<div class="community_view01">
|
||||
<!-- 상단 콘텐츠 -->
|
||||
<div class="cont_header">
|
||||
<!-- 태그, 좋아요 댓글 -->
|
||||
<div class="between cont_space">
|
||||
<div class="tag_cont">
|
||||
<span id="yellow">자유글</span>
|
||||
<span id="blue">기록</span>
|
||||
<span id="green">이유식</span>
|
||||
<span id="red">칼럼</span>
|
||||
</div>
|
||||
<div class="count_cont">
|
||||
<div>
|
||||
<div class="like_icon"></div>
|
||||
<span>0</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="comment_icon"></div>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 제목, 옵션 -->
|
||||
<div class="between cont_space">
|
||||
<h2 class="title">시판 이유식 추천 부탁드려요</h2>
|
||||
<a href="#" class="option" id="option1_btn"></a>
|
||||
</div>
|
||||
|
||||
<!-- 작성자 프로필 -->
|
||||
<div class="profile_cont">
|
||||
<!-- 프로필 사진 -->
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<!-- 닉네임 -->
|
||||
<p>닉네임</p>
|
||||
<!-- 작성시각 . 조회수 -->
|
||||
<p>00:00 · 조회 000</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //상단 콘텐츠 -->
|
||||
|
||||
<!-- 본문 -->
|
||||
<div>
|
||||
<!-- community_img -->
|
||||
<div class="community_img">
|
||||
<!-- swiper_wrap -->
|
||||
<div class="swiper_wrap">
|
||||
<div class="swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide img_box" onclick="layer_open('#detail_img_pop');">
|
||||
<img src="../../img/community/community_ex_img.png">
|
||||
</div>
|
||||
<div class="swiper-slide img_box" onclick="layer_open('#detail_img_pop');">
|
||||
<img src="../../img/community/community_ex_img.png">
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //swiper_wrap -->
|
||||
<p class="cont_txt">영양성분을 함유하는 물질을 식품이라고 하며, 천연식품을 그대로 먹기도 하지만 조리, 가공하여 식용으로 이용하는 경우가 많아 이들도 넓은 뜻의 식품에 포함시킨다. 식품은 여러 가지 기준에 따라 분류할 수 있다. 동식물별로 크게 나눌 수도 있고, 산업별(농산·축산·임산·수산)로 나눌 수도 있으며, 영양성분별로 분류할 수도 있다.</p>
|
||||
</div>
|
||||
<!-- //community_img -->
|
||||
</div>
|
||||
|
||||
<!-- 좋아요, 공유 버튼 -->
|
||||
<div class="like_shared_cont">
|
||||
<div class="cont">
|
||||
<!-- 좋아요 -->
|
||||
<button type="button" id="" name="" class="c_btn like_btn">
|
||||
<span class="hidden">아이콘</span>
|
||||
</button>
|
||||
|
||||
<!-- 공유 -->
|
||||
<button type="button" id="" name="" class="c_btn shared_btn">
|
||||
<span class="hidden">아이콘</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 댓글 -->
|
||||
<div class="comment_header">
|
||||
<p>댓글</p>
|
||||
<button type="button" id="" name="" class="refresh">
|
||||
<span class="hidden">아이콘</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- community_comment -->
|
||||
<div class="community_comment">
|
||||
<!-- 댓글 -->
|
||||
<div class="comment">
|
||||
<!-- profile & option box -->
|
||||
<div class="comment_profile">
|
||||
<!-- profile -->
|
||||
<div class="profile_cont">
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<p>닉네임</p>
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- option -->
|
||||
<div class="option2_btn">
|
||||
<div href="#" class="option"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment_text">
|
||||
저는 A사 이유식 괜찮은 것 같더라구요
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 댓글 -->
|
||||
<div class="comment">
|
||||
<!-- profile & option box -->
|
||||
<div class="comment_profile">
|
||||
<!-- profile -->
|
||||
<div class="profile_cont">
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<p>닉네임</p>
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- option -->
|
||||
<div class="option2_btn">
|
||||
<div href="#" class="option" ></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment_text">
|
||||
저는 A사 이유식 괜찮은 것 같더라구요
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 대댓글 - reply class 추가 -->
|
||||
<div class="comment reply">
|
||||
<!-- profile & option box -->
|
||||
<div class="comment_profile">
|
||||
<!-- profile -->
|
||||
<div class="profile_cont">
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<p>닉네임</p>
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- option -->
|
||||
<div class="option2_btn">
|
||||
<div href="#" class="option"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment_text">
|
||||
저는 A사 이유식 괜찮은 것 같더라구요
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 대댓글 - reply class 추가 -->
|
||||
<div class="comment reply">
|
||||
<!-- profile & option box -->
|
||||
<div class="comment_profile">
|
||||
<!-- profile -->
|
||||
<div class="profile_cont">
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<p>닉네임</p>
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- option -->
|
||||
<div class="option2_btn">
|
||||
<div href="#" class="option"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment_text">
|
||||
저는 A사 이유식 괜찮은 것 같더라구요
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 댓글 -->
|
||||
<div class="comment">
|
||||
<!-- profile & option box -->
|
||||
<div class="comment_profile">
|
||||
<!-- profile -->
|
||||
<div class="profile_cont">
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<p>닉네임</p>
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- option -->
|
||||
<div class="option2_btn">
|
||||
<div href="#" class="option"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment_text">
|
||||
저는 A사 이유식 괜찮은 것 같더라구요
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 대댓글 - reply class 추가 -->
|
||||
<div class="comment reply">
|
||||
<!-- profile & option box -->
|
||||
<div class="comment_profile">
|
||||
<!-- profile -->
|
||||
<div class="profile_cont">
|
||||
<div class="profile_img">
|
||||
<img src="../../img/community/community_writer_img.png" alt="프로필 사진">
|
||||
</div>
|
||||
<div class="profile_info">
|
||||
<p>닉네임</p>
|
||||
<p>00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- option -->
|
||||
<div class="option2_btn">
|
||||
<div href="#" class="option"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comment_text">
|
||||
저는 A사 이유식 괜찮은 것 같더라구요
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //community_comment -->
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- //content -->
|
||||
|
||||
</div>
|
||||
<!-- //wrap -->
|
||||
|
||||
<div class="comment_input_cont">
|
||||
<div class="input">
|
||||
<label class="file_icon" for="image-upload"></label>
|
||||
<input type="file" accept="image/*;capture=camera" id="image-upload" style="display:none;">
|
||||
<textarea placeholder="댓글 남기기" onkeydown="resize(this)" onkeyup="resize(this)"></textarea>
|
||||
</div>
|
||||
<div class="submit">
|
||||
등록
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- detail_img_pop, img_popup_wrap팝업 -->
|
||||
<div id="detail_img_pop" class="layer-wrap img_popup_wrap">
|
||||
<div class="bg"></div>
|
||||
<div class="pop-layer">
|
||||
<img src="../../img/community/community_ex_img.png" class="img_popup">
|
||||
<button type="button" id="" name="" class="c_download_img_btn">이미지 저장</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- //detail_img_pop, img_popup_wrap 팝업 -->
|
||||
|
||||
<!-- modal-wrapper -->
|
||||
<div class="community_option" id="option1">
|
||||
<div class="content">
|
||||
<!-- 옵션 모달 -->
|
||||
<ul>
|
||||
<!-- <li>
|
||||
<a>
|
||||
<div class="copy_icon"></div>
|
||||
복사하기
|
||||
</a>
|
||||
</li> -->
|
||||
<li>
|
||||
<a>
|
||||
<div class="edit_icon"></div>
|
||||
수정하기
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<div class="delect_icon"></div>
|
||||
삭제하기
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal_layer"></div>
|
||||
</div>
|
||||
<!-- //modal-wrapper -->
|
||||
|
||||
<!-- modal-wrapper -->
|
||||
<div class="community_option" id="option2">
|
||||
<div class="content">
|
||||
<!-- 옵션 모달 -->
|
||||
<ul>
|
||||
<!-- <li>
|
||||
<a>
|
||||
<div class="copy_icon"></div>
|
||||
복사하기
|
||||
</a>
|
||||
</li> -->
|
||||
<li>
|
||||
<a>
|
||||
<div class="edit_icon"></div>
|
||||
수정하기
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<div class="delect_icon"></div>
|
||||
삭제하기
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="modal_layer"></div>
|
||||
</div>
|
||||
<!-- //modal-wrapper -->
|
||||
|
||||
<!-- modal-wrapper -->
|
||||
<div class="community_option" id="shared">
|
||||
<div class="content">
|
||||
<!-- 공유 모달 -->
|
||||
<div class="shared">
|
||||
<div class="item">
|
||||
<a>
|
||||
<div class="img"><img src="../../img/Icon_Share_Insta.png"></div>
|
||||
인스타그램
|
||||
</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a>
|
||||
<div class="img"><img src="../../img/Icon_Share_Kakao.png"></div>
|
||||
카카오톡
|
||||
</a>
|
||||
</div>
|
||||
<div class="item">
|
||||
<a>
|
||||
<div class="img"><img src="../../img/Icon_Share_Clip.png"></div>
|
||||
URL 복사
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal_layer"></div>
|
||||
</div>
|
||||
<!-- //modal-wrapper -->
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$(".community_header ul li a").on("click", function() {
|
||||
$(this).addClass("active")
|
||||
.parents(".community_header ul li").siblings().find("a").removeClass("active")
|
||||
});
|
||||
$(".like_btn").on("click", function() {
|
||||
$(this).toggleClass("active");
|
||||
});
|
||||
$("#option1_btn").on("click", function() {
|
||||
$("#option1").toggleClass("open");
|
||||
})
|
||||
$(".option2_btn").on("click", function() {
|
||||
$("#option2").toggleClass("open");
|
||||
})
|
||||
$(".shared_btn").on("click", function() {
|
||||
$("#shared").toggleClass("open");
|
||||
})
|
||||
$(".modal_layer").on("click", function() {
|
||||
$(".community_option").removeClass("open");
|
||||
})
|
||||
});
|
||||
var swiper = new Swiper('.swiper-container', {
|
||||
spaceBetween: 20,
|
||||
pagination: {
|
||||
loop: true,
|
||||
el: '.swiper-pagination',
|
||||
},
|
||||
});
|
||||
|
||||
function resize(obj) {
|
||||
obj.style.height = "1px";
|
||||
obj.style.height = (6+obj.scrollHeight)+"px";
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 162 KiB |
Loading…
Reference in new issue