연습장:Sakura/1: 두 판 사이의 차이

  • 최근 수정 시각: 2023년 7월 31일 (월) 19:45
  • 창작 문서는 문서 별 라이선스를 확인하세요. 실용 문서는 다른 조건이 없는 한 크리에이티브 커먼즈 저작자표시-동일조건변경허락 3.0에 따라 사용할 수 있습니다. 자세한 내용은 이용 약관을 참고하세요.
    이용자 보호 창구 | evewiki.kr@gmail.com후원계좌 | 100-152-076102 케이뱅크 김성보
편집 토론 역사
< 연습장:Sakura
(▼눈뽕)
태그: 비우기 수동 되돌리기
편집 요약 없음
태그: 되돌려진 기여
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"> &nbsp; </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>

2023년 7월 31일 (월) 19:45 판