TAG
CSS
JavaScript
Result
Run
License
<header class="header"> <ul> <li><label for="toggle-padding">흰하늘매발톱</label></li> <li><label for="toggle-padding">노란 제비꽃</label></li> <li><label for="toggle-padding">노루귀</label></li> <li><label for="toggle-padding">동강할미꽃</label></li> </ul> </header> <main class="main"> <h2>야생화의 종류</h2> <section> <img src="http://resrc.devdic.com/img/bykind/flowers/field_flowers_01.jpeg" /> <h3>흰하늘매발톱<span><</span></h3> <p> 백두산에 자생하는 식물로 알려져 있다. 보라색과 흰색 두 종류가 있으며 하늘처럼 높은 곳에서만 자라고 꽃받침 모양이 매 발톱 같이 생겼다고 해서 붙여진 이름이다. </p> </section> <section> <img src="http://resrc.devdic.com/img/bykind/flowers/field_flowers_02.jpeg" /> <h3>노란 제비꽃<span><</span></h3> <p> 토종 제비꽃 38종과 지구의 모든 제비꽃 중에서 가장 아름다운 제비꽃. 해발 800m 이상의 고산지역에서만 자라지만 최근 서울 관악산 정상 염주대 부근에서도 발견되었다. </p> </section> <section> <img src="http://resrc.devdic.com/img/bykind/flowers/field_flowers_03.jpeg" /> <h3>노루귀<span><</span></h3> <p> 우리나라 전역에 분포하며 낙엽수림 밑에서만 자란다. 흰색, 보라색, 핑크색 등 꽃 색깔이 아주 다양하다. 제주도의 새끼노루귀와 울릉도섬노루귀가 유명하다. 잎이 나올 때 털이 많고 잎의 모양이 노루귀를 닮았다고 해서 붙여진 이름이다. </p> </section> <section> <img src="http://resrc.devdic.com/img/bykind/flowers/field_flowers_04.jpeg" /> <h3>동강할미꽃<span><</span></h3> <p> 강원도 영월 동간 부근 절벽 바위 틈에서 4년 전 처음 발견된 한국 특산 희귀식물. 분홍색, 자주색, 보라색 등 색깔이 다양하고 다른 할미꽃과 달리 하늘을 보고 피는 것이 특징이다. </p> </section> </main>
body { /* 스크롤바 나오지 않도록 */ overflow: hidden; margin: 0; } .header { width: 100%; margin: 0 auto; height: 100px; background-color: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; position: sticky; top: -30px; z-index: 1; } .header > ul { display: flex; list-style: none; margin: 0; padding-left: 0; gap: 0 20px; justify-content: center; align-items: center; } .main { width: 100%; max-width: 900px; margin: 100px auto 100px; } .main > section > h3 { position: relative; } .main > section { display: grid; margin: 50px 0; grid: "floor . title" "floor . description" / 200px 20px auto; } .main > section:nth-of-type(2n) { grid: "title . floor" "description . floor" / auto 20px 200px; } .main > section:nth-of-type(n+2), #toggle-padding:checked + main > section:nth-of-type(1) { padding-top: 100px; } .main > section > img { grid-area: floor; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .main > section > h3 { grid-area: title; transition: 0.2s; position: relative; } .main > section > h3 > span { position: absolute; top: 0; right: 0; color: #000; font-size: 12px; font-weight: normal; display: inline-block; transform: rotate(90deg); white-space: nowrap; cursor: pointer; } .main > section > h3 > span::before { content: "Moving top"; position: absolute; display: none; background-color: #000; padding: 5px 10px; border-radius: 5px; right: -10px; color: #FFF; } .main > section > h3 > span:hover::before { display: block; transform: rotate(-90deg); } .main > section > h3 > span:hover::after { content: ""; display: inline-block; position: absolute; transform: rotate(-90deg); right: 15px; width: 10px; height: 10px; background: #000; transform: skew(20deg) rotate(65deg); } .main > section > p { grid-area: description; line-height: 1.7; }
window.addEventListener("load", () => { //각각의 메뉴들 const aMenus = Array.from(document.querySelectorAll(".header > ul > li")); /* 메뉴를 클릭해서 스크롤 할 때 */ aMenus.forEach((elMenu, idx, arr) => { elMenu.onclick = e => { let applyIdx = arr.indexOf(e.currentTarget) let elSection = document.querySelector(`.main > section:nth-of-type(${applyIdx+1})`); let applyOffsetTop if(applyIdx == 0) { applyOffsetTop = elSection.offsetTop - 100; } else { applyOffsetTop = elSection.offsetTop; } window.scroll({ top: applyOffsetTop, left: 0, behavior: "smooth" }); } }); let aElSpan = document.querySelectorAll(".main > section > h3 > span"); aElSpan.forEach(elSpan => { elSpan.addEventListener("click", function() { window.scroll({ top: 0, left: 0, behavior: "smooth" }); }); }); });
Console
expand_less
License
License
by DevDic
Close