"광주 문화예술 인문스토리 플랫폼"의 두 판 사이의 차이

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
(같은 사용자의 중간 판 9개는 보이지 않습니다)
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-bottom: 20px !important;
+
     margin-bottom: 20px ;
margin-right:40px !important
+
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
 
.c-li-list
20번째 줄: 38번째 줄:
 
}
 
}
 
}
 
}
 +
 +
 +
 +
    .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
 
     {
 
     {
68번째 줄: 116번째 줄:
 
     height: auto;
 
     height: auto;
 
     display: inline-block;
 
     display: inline-block;
 
 
    }
 
 
    .story-list li {
 
 
border-radius:10px;
 
    width: calc(20% - 20px);
 
    height: 80px;
 
    margin-bottom: 50px;
 
    margin-right: 10px;
 
    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;
 
 
  
  
102번째 줄: 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;
 
     }
 
     }
  
174번째 줄: 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:60vw"></iframe>
+
     style="width:calc(100% - 30px);margin-left:15px;height:55vw;min-height:600px;max-height:860px;"></iframe>
  
 
</div>
 
</div>
181번째 줄: 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>
197번째 줄: 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>
433번째 줄: 455번째 줄:
 
</script>
 
</script>
 
<script>
 
<script>
function graph(num)
+
function graph(num,obj1)
 
{
 
{
 +
$('.a-li').removeClass('a-li');
 +
$(obj1).addClass('a-li');
 
//$('.network-g').css('opacity','0');
 
//$('.network-g').css('opacity','0');
 
$('.net-act').removeClass('net-act');
 
$('.net-act').removeClass('net-act');

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

핵심/문맥 콘텐츠

  • 인물/단체
  • 사건
  • 음식
  • 사물
  • 장소
  • 개념/용어
  • 건축물
  • 기록물
  • 문맥항목

스토리데이터 메타버스

양림동 선교사 마을, 새로운 문화와의 만남

광주 비엔날레

극락강 역

무등산 관광호텔

구 MBC

충장로

인문스토리 3D 어셋 바로가기

오웬기념각

충장 22

무등산관광호텔

광주 비엔날레

풍영정

(구) MBC

인문스토리 3D 지도