|
|
| 1번째 줄: |
1번째 줄: |
| <div class="desktoponly">
| |
| <div class="container">
| |
| <div class="menu">
| |
| <div class="dropdown-desktop" id="협회" style="width: 24%">
| |
| <div class="dropbtn-desktop">[[File:Wikimedia-logo black.svg|16px|link=위키백과:한국 위키미디어 협회]] [[위키백과:한국 위키미디어 협회|<span style="color:#000000; bold;">'''한국위키미디어협회'''</span>]]</div>
| |
| </div><div class="dropdown-desktop" id="협회활동" style="width: 12%">
| |
| <div class="dropbtn-desktop">[[위키백과:한국 위키미디어 협회/협회활동|<span style="color:#000000">협회활동</span>]]</div>
| |
| <div class="dropdown-content-desktop">
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회활동/연간일정|<span style="color:#000000">'22 연간일정</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회활동/주요사업|<span style="color:#000000">'22 협회사업</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회활동/언론보도|<span style="color:#000000">언론보도</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회활동/후원안내|<span style="color:#000000">후원안내</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회활동/자료실|<span style="color:#000000">자료실</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회활동/회원 사랑방|<span style="color:#000000">회원 사랑방</span>]]</div>
| |
| </div>
| |
| </div><div class="dropdown-desktop" id="협회사업" style="width: 12%">
| |
| <div class="dropbtn-desktop">[[위키백과:한국 위키미디어 협회/협회사업|<span style="color:#000000">협회사업</span>]]</div>
| |
| <div class="dropdown-content-desktop">
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/컨퍼런스|<span style="color:#000000">컨퍼런스</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/올해의 위키인|<span style="color:#000000">올해의 위키인</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/에디터톤|<span style="color:#000000">에디터톤</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/온라인 에디터톤 지원|<span style="color:#000000">온라인 에디터톤 지원</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/위키탐방|<span style="color:#000000">위키탐방</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/오프모임 지원|<span style="color:#000000">오프모임 지원</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/교육지원|<span style="color:#000000">교육지원</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/위키마니아|<span style="color:#000000">위키마니아</span>]]</div>
| |
| <div class="btn-long-desktop">[[위키백과:한국 위키미디어 협회/협회사업/사진공모전|<span style="color:#000000">사진공모전</span>]]</div>
| |
| </div>
| |
| </div><div class="dropdown-desktop" id="협회소개" style="width: 12%">
| |
| <div class="dropbtn-desktop">[[위키백과:한국 위키미디어 협회/협회소개|<span style="color:#000000">협회소개</span>]]</div>
| |
| <div class="dropdown-content-desktop">
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/인사말|<span style="color:#000000">인사말</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/연혁|<span style="color:#000000">연혁</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/조직|<span style="color:#000000">조직</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/국제활동|<span style="color:#000000">국제활동</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/역할|<span style="color:#000000">역할</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/정관|<span style="color:#000000">정관</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/이사추천|<span style="color:#000000">이사추천</span>]]</div>
| |
| <div class="btn-medium-desktop">[[위키백과:한국 위키미디어 협회/협회소개/재정현황|<span style="color:#000000">재정현황</span>]]</div>
| |
| </div>
| |
| </div><div class="dropdown-desktop" id="사진첩" style="width: 10%">
| |
| <div class="dropbtn-desktop">[[위키백과:한국 위키미디어 협회/사진첩|<span style="color:#000000">사진첩</span>]]</div>
| |
| <div class="dropdown-content-desktop">
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2022년|<span style="color:#000000">2022</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2021년|<span style="color:#000000">2021</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2020년|<span style="color:#000000">2020</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2019년|<span style="color:#000000">2019</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2018년|<span style="color:#000000">2018</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2017년|<span style="color:#000000">2017</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2016년|<span style="color:#000000">2016</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2015년|<span style="color:#000000">2015</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/사진첩/2014년|<span style="color:#000000">2014</span>]]</div>
| |
| </div>
| |
| </div><div class="dropdown-desktop" id=KIWI" style="width: 10%">
| |
| <div class="dropbtn-desktop">[[위키백과:KIWI|<span style="color:#000000">KIWI</span>]]</div>
| |
| </div><div class="dropdown-desktop" id="오시는길" style="width: 10%">
| |
| <div class="dropbtn-desktop">[[위키백과:한국 위키미디어 협회/오시는길|<span style="color:#000000">오시는길</span>]]</div>
| |
| <div class="dropdown-content-desktop">
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/오시는길#연락처|<span style="color:#000000">연락처</span>]]</div>
| |
| <div class="btn-short-desktop">[[위키백과:한국 위키미디어 협회/오시는길#소셜미디어|<span style="color:#000000">SNS</span>]]</div>
| |
| </div>
| |
| </div><div class="dropdown-desktop" id="회원모집" style="width: 10%">
| |
| <div class="dropbtn-desktop">[[위키백과:한국 위키미디어 협회/회원모집|<span style="color:#000000">회원모집</span>]]</div>
| |
| </div> <!-- div class=menu 닫음-->
| |
| <div class="padding">
| |
| <div class="dropdown-desktop" id="padding" style="width: 100%">
| |
| <div class="dropbtn-padding-desktop"> </div>
| |
| </div>
| |
| </div>
| |
| </div> <!--div class=container 닫음-->
| |
| </div><!--div class=desktoponly 닫음-->
| |
| </div>
| |
| <html><style>
| |
| @media ( max-width:600px ) {
| |
| .desktoponly {
| |
| display: none;
| |
| }
| |
| }
| |
|
| |
|
| /* 레이아웃 정보를 시작합니다 */
| |
|
| |
| /* 플렉스 컨테이너 객체입니다.*/
| |
| .container {
| |
| display: flex;
| |
| }
| |
| /* 메뉴가 차지하는 영역을 650px 부터 시작합니다. */
| |
| .menu {
| |
| flex-grow: 2;
| |
| flex-shrink: 0;
| |
| flex-basis: 650px;
| |
| display : flex;
| |
| }
| |
|
| |
| /* 객체가 차지하고 남은 나머지 영역을 채웁니다. */
| |
| .padding {
| |
| flex-grow: 1;
| |
| flex-shrink: 1;
| |
| flex-basis: 0px;
| |
| }
| |
|
| |
|
| |
| /* 여기까지가 레이아웃 정보 끝입니다 */
| |
|
| |
| /* Dropdown Button의 스타일을 정합니다. */
| |
| .dropbtn-desktop {
| |
| background-color: #efefef;
| |
| text-align: center;
| |
| color: white;
| |
| padding-top: 15px;
| |
| padding-bottom: 15px;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| font-size: 13px;
| |
| border: none;
| |
| }
| |
| /* Dropdown Button과 같지만 Padding 부분이므로 선택시 색이 변하지 않습니다. */
| |
| .dropbtn-padding-desktop {
| |
| background-color: #efefef;
| |
| text-align: center;
| |
| color: white;
| |
| padding-top: 15px;
| |
| padding-bottom: 15px;
| |
| padding-left: 5px;
| |
| padding-right: 5px;
| |
| font-size: 13px;
| |
| border: none;
| |
| }
| |
|
| |
| /* <div class="dropdown"> 으로 선언되어야 합니다. 연관된 dropdown-content 객체의 position 값은 필수입니다. */
| |
| .dropdown-desktop {
| |
| position: relative;
| |
| display: inline-block;
| |
| }
| |
| /* Dropdown Content (기본값 - 숨김) */
| |
| .dropdown-content-desktop {
| |
| display: none;
| |
| position: absolute;
| |
| width : 100%;
| |
| box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
| |
| z-index: 1;
| |
| }
| |
| /* Dropdown Content 영역의 긴 버튼입니다. (활동, 사업)*/
| |
| .btn-long-desktop {
| |
| background-color: #e8e8e8;
| |
| color: black;
| |
| padding: 10px;
| |
| font-size: 11px;
| |
| min-width: 70px;
| |
| border: none;
| |
| display: block;
| |
| }
| |
| /* Dropdown Content 영역의 중간 버튼입니다. (소개)*/
| |
| .btn-medium-desktop {
| |
| background-color: #e8e8e8;
| |
| color: black;
| |
| padding: 10px;
| |
| font-size: 11px;
| |
| min-width: 45px;
| |
| border: none;
| |
| display: block;
| |
| }
| |
| /* Dropdown Content 영역의 짧은 버튼입니다. dropbtn의 너비에 연동됩니다. (사진첩, 소식지)*/
| |
| .btn-short-desktop {
| |
| background-color: #e8e8e8;
| |
| color: black;
| |
| box-sizing: border-box;
| |
| padding-top: 10px;
| |
| padding-bottom: 10px;
| |
| padding-left: 10px;
| |
| font-size: 11px;
| |
| width: 100%;
| |
| border: none;
| |
| display: block;
| |
| }
| |
|
| |
| /* Dropdown button에 입력장치(마우스, 터치패드)를 통해 포인터를 이동시켜 놓으면, Dropdown content가 표시됩니다. */
| |
| .dropdown-desktop:hover .dropdown-content-desktop {display: block;}
| |
| /* Dropdown button 아래에 Dropdown content가 표시될 때, dropbtn 버튼의 배경색이 바뀝니다. */
| |
| .dropdown-desktop:hover .dropbtn-desktop {background-color: #cecece;}
| |
| </style></html>
| |