$$config title: Web3 수업 5일차 keywords: - Top버튼 - 테마색 $$ # Top버튼 ```js $(document).ready(function(){ $(".goto-tp-btn").click(function(){ $("html , body").animate({ scrollTop:0},30) }) $(window).scroll(function(){ let $scrollTop = $(window). scrollTop(); if($scrollTop > 0){ $(".goto-tp-btn").css({opacity : 1},30) }else { $(".goto-tp-btn").css({opacity : 0},30) } }) }) animate -> 움직이게해줌 scrollTop -> Top에서 부터의 스크롤 ``` # 테마 ```js CSS @font-face { font-family: 'GmarketSansMedium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); font-weight: normal; font-style: normal; } html > body, html > body button { font-family:"GmarketSansMedium"; } /* 테마 시작 */ /* 테마 light */ /* html == :root 라고 생각하시면 됩니다. */ :root { --background-color:white; --text-color:#8AAAE5; --primary-color-1:#00539C; } /* 테마 dark */ :root.dark { --background-color:#8AAAE5; --text-color:white; --primary-color-1:#00539C; } :root { color:var(--text-color); background-color:var(--background-color); transition: all 2s; } .color-primary { color:var(--primary-color-1); } :root.dark .color-primary { filter:brightness(110%); } 이후 JS에서 dark class만 toggle로 변경 ``` # Tab 박스 ```css html에 js적용

탭1 탭2 탭3

내용1 내용2 내용3

css html > body * { box-sizing: border-box; } .head, .body { display: flex; justify-content:center; } span { display: flex; justify-content: center; } .head > span { width: 60px; border: 1px solid red; cursor:pointer; } .head > span:nth-child(2) { border-left: 0; border-right: 0; } .body > span { width: 180px; border: 1px solid red; border-top: 0; } .tab-box-1 > .head > .active { color: red; background-color:gold; } .tab-box-1 > .body > span { display: none; } .tab-box-1 > .body > .active { display: flex; } ```