"광주 문화예술 인문스토리 플랫폼"의 두 판 사이의 차이
광주문화예술인문스토리플랫폼
(같은 사용자의 중간 판 17개는 보이지 않습니다) | |||
4번째 줄: | 4번째 줄: | ||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"> | ||
<style> | <style> | ||
+ | .a-li | ||
+ | { | ||
+ | filter: sepia(0.2) !important; | ||
+ | } | ||
@media screen and (max-width:1000px) | @media screen and (max-width:1000px) | ||
{ | { | ||
9번째 줄: | 13번째 줄: | ||
{ | { | ||
− | width: calc(50% - 40px) !important; | + | width: calc(50% - 40px) ; |
− | margin- | + | margin-bottom: 20px ; |
− | margin-right: | + | margin-right:40px ; |
− | + | height:120px; | |
+ | } | ||
+ | .c-li-list | ||
+ | { | ||
+ | width:calc(33% - 20px) !important; | ||
+ | margin-right:15px !important | ||
+ | } | ||
+ | } | ||
+ | @media screen and (min-width:1001px) | ||
+ | { | ||
+ | .story-list li | ||
+ | { | ||
+ | width: calc(20% - 20px); | ||
+ | margin-right: 10px; | ||
+ | height: 90px; | ||
+ | } | ||
+ | .c-li-list | ||
+ | { | ||
+ | width:calc(33% - 20px) !important; | ||
+ | margin-right:15px !important | ||
} | } | ||
} | } | ||
+ | |||
+ | |||
+ | |||
+ | .story-list li { | ||
+ | |||
+ | border-radius:10px; | ||
+ | |||
+ | |||
+ | margin-bottom: 50px; | ||
+ | |||
+ | padding: 10px; | ||
+ | list-style: none; | ||
+ | float: left; | ||
+ | border: 1px solid black; | ||
+ | /* border-radius: 18px; */ | ||
+ | transition: all 0.5s; | ||
+ | cursor: pointer; | ||
+ | text-align: center; | ||
+ | vertical-align: middle; | ||
+ | display: flex; | ||
+ | box-shadow: 0 0 20px #eee; | ||
+ | background-size: 200% auto; | ||
+ | align-items: center; | ||
+ | background-image: linear-gradient(to right, #ECE9E6 0%, #FFFFFF 51%, #ECE9E6 100%); | ||
+ | justify-content: center; | ||
+ | |||
+ | |||
+ | |||
+ | } | ||
+ | |||
.network-g | .network-g | ||
{ | { | ||
display: block; | display: block; | ||
position:absolute; | position:absolute; | ||
− | + | opacity:0; | |
+ | z-index:1; | ||
} | } | ||
+ | .net-act | ||
+ | { | ||
+ | opacity:1 !important; | ||
+ | z-index:999 !important; | ||
+ | } | ||
#catlinks | #catlinks | ||
{ | { | ||
57번째 줄: | 116번째 줄: | ||
height: auto; | height: auto; | ||
display: inline-block; | display: inline-block; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
91번째 줄: | 123번째 줄: | ||
background-position: right center; /* change the direction of the change here */ | background-position: right center; /* change the direction of the change here */ | ||
color:black; | color:black; | ||
+ | filter: sepia(0.2) !important; | ||
} | } | ||
163번째 줄: | 196번째 줄: | ||
<iframe | <iframe | ||
src="https://dh.aks.ac.kr/~sandbox/cgi-bin/GuestQuery.py?db=gwangju&project=gwangju&key=%EC%9A%B0%EC%9D%BC%EC%84%A0%EC%84%A0%EA%B5%90%EC%82%AC%EC%82%AC%ED%83%9D" | src="https://dh.aks.ac.kr/~sandbox/cgi-bin/GuestQuery.py?db=gwangju&project=gwangju&key=%EC%9A%B0%EC%9D%BC%EC%84%A0%EC%84%A0%EA%B5%90%EC%82%AC%EC%82%AC%ED%83%9D" | ||
− | style="width:calc(100% - 30px);margin-left:15px;height: | + | style="width:calc(100% - 30px);margin-left:15px;height:55vw;min-height:600px;max-height:860px;"></iframe> |
</div> | </div> | ||
170번째 줄: | 203번째 줄: | ||
<ul class="story-list"> | <ul class="story-list"> | ||
− | <li onclick="graph(3)">선사시대부터 | + | <li onclick="graph(3,this)" class="a-li">선사시대부터 |
광주 | 광주 | ||
</li> | </li> | ||
− | <li onclick="graph(4)">광주의 여성 | + | <li onclick="graph(4,this)">광주의 여성 |
</li> | </li> | ||
− | <li onclick="graph(5)">광주비엔날레 | + | <li onclick="graph(5,this)">광주비엔날레 |
</li> | </li> | ||
− | <li onclick="graph(1)">다섯가지를 버려요. | + | <li onclick="graph(1,this)">다섯가지를 버려요. |
오방 최흥종 이야기 | 오방 최흥종 이야기 | ||
</li> | </li> | ||
− | <li onclick="graph(2)">나라를 사랑한 | + | <li onclick="graph(2,this)">나라를 사랑한 |
의로운 병사들 | 의로운 병사들 | ||
</li> | </li> | ||
186번째 줄: | 219번째 줄: | ||
− | <li onclick="graph(6)">The May 18 Democratic Uprising: | + | <li onclick="graph(6,this)">The May 18 Democratic Uprising: |
Witness and Remembrance | Witness and Remembrance | ||
</li> | </li> | ||
− | <li onclick="graph(7)">The Faces of Gwangju: Foreigners | + | <li onclick="graph(7,this)">The Faces of Gwangju: Foreigners |
</li> | </li> | ||
− | <li onclick="graph(8)">The Faces of Gwangju: Artists | + | <li onclick="graph(8,this)">The Faces of Gwangju: Artists |
</li> | </li> | ||
− | <li onclick="graph(9)">Overlooking Gwangju | + | <li onclick="graph(9,this)">Overlooking Gwangju |
</li> | </li> | ||
− | <li onclick="graph(10)">Understanding Traditional Culture and Society through | + | <li onclick="graph(10,this)">Understanding Traditional Culture and Society through |
Gwangju’s Cultural Heritage: Confucianism | Gwangju’s Cultural Heritage: Confucianism | ||
</li> | </li> | ||
201번째 줄: | 234번째 줄: | ||
</ul> | </ul> | ||
</div> | </div> | ||
+ | <div class="col-md-12"> | ||
+ | <button class="all-bu" onclick="all_sdata();">스토리데이터 목록 바로가기</button> | ||
+ | </div> | ||
<div class="col-md-12" style=" height: 500px; | <div class="col-md-12" style=" height: 500px; | ||
width: 100%;"> | width: 100%;"> | ||
219번째 줄: | 255번째 줄: | ||
<h2 class="s-header">핵심/문맥 콘텐츠 </h2> | <h2 class="s-header">핵심/문맥 콘텐츠 </h2> | ||
<ul class="story-list"> | <ul class="story-list"> | ||
− | <li onclick="move_s(1)">인물/단체</li> | + | <li class="c-li-list" onclick="move_s(1)">인물/단체</li> |
− | + | <li class="c-li-list"onclick="move_s(2)">사건</li> | |
− | + | <li class="c-li-list"onclick="move_s(3)">음식</li> | |
− | + | <li class="c-li-list" onclick="move_s(4)">사물</li> | |
− | + | <li class="c-li-list" onclick="move_s(5)">장소</li> | |
− | + | <li class="c-li-list" onclick="move_s(6)">개념/용어</li> | |
− | + | <li class="c-li-list" onclick="move_s(7)">건축물</li> | |
− | + | <li class="c-li-list" onclick="move_s(8)">기록물</li> | |
− | + | <li class="c-li-list"i onclick="move_s(9)">문맥항목</li> | |
− | + | ||
</ul> | </ul> | ||
412번째 줄: | 448번째 줄: | ||
$( document ).ready(function() { | $( document ).ready(function() { | ||
setTimeout(() => { | setTimeout(() => { | ||
− | $('.network-g'). | + | $('.network-g').css('opacity','0'); |
− | $('#net3'). | + | $('#net3').addClass('net-act'); |
}, 50); | }, 50); | ||
}); | }); | ||
419번째 줄: | 455번째 줄: | ||
</script> | </script> | ||
<script> | <script> | ||
− | function graph(num) | + | function graph(num,obj1) |
{ | { | ||
− | $('.network-g'). | + | $('.a-li').removeClass('a-li'); |
− | $('#net'+num). | + | $(obj1).addClass('a-li'); |
+ | //$('.network-g').css('opacity','0'); | ||
+ | $('.net-act').removeClass('net-act'); | ||
+ | $('#net'+num).addClass('net-act'); | ||
} | } | ||
470번째 줄: | 509번째 줄: | ||
location.href="https://dh.aks.ac.kr/~gwangju/wiki/index.php/3D_%EC%96%B4%EC%85%8B_%EB%AA%A9%EB%A1%9D"; | location.href="https://dh.aks.ac.kr/~gwangju/wiki/index.php/3D_%EC%96%B4%EC%85%8B_%EB%AA%A9%EB%A1%9D"; | ||
+ | } | ||
+ | function all_sdata() | ||
+ | { | ||
+ | |||
+ | location.href="https://dh.aks.ac.kr/~gwangju/wiki/index.php/%EC%8A%A4%ED%86%A0%EB%A6%AC_%EB%AA%A9%EB%A1%9D"; | ||
} | } | ||
2024년 7월 16일 (화) 22:43 판
인문스토리 네트워크
스토리데이터
- 선사시대부터 광주
- 광주의 여성
- 광주비엔날레
- 다섯가지를 버려요. 오방 최흥종 이야기
- 나라를 사랑한 의로운 병사들
- The May 18 Democratic Uprising: Witness and Remembrance
- The Faces of Gwangju: Foreigners
- The Faces of Gwangju: Artists
- Overlooking Gwangju
- Understanding Traditional Culture and Society through Gwangju’s Cultural Heritage: Confucianism
핵심/문맥 콘텐츠
- 인물/단체
- 사건
- 음식
- 사물
- 장소
- 개념/용어
- 건축물
- 기록물
- 문맥항목