반응형
반응형 오른쪽 사이드 바
750px 보다 크면 오른쪽 위치,
750px 보다 작으면 하단 위치
position:fixed 로 스크롤이 되어도 항상 브라우저에 위치하게 처리했다.
간단한 trasition 으로 형대가 변경되는 모션 아닌 모션을 넣어봤다.
relation_co_kr_260821.html
0.01MB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
alert("ready!!");
$(window).resize(function(){
let BrWidth = document.documentElement.clientWidth;
console.log("BrWidth", BrWidth);
});
});
</script>
<style>
@font-face {
font-family: 'SBAggro';
src: url('https://cdn.jsdelivr.net/gh/superd75/myfont@v1.0.0/137/SBAggroL.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/superd75/myfont@v1.0.0/137/SBAggroL.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SBAggro';
src: url('https://cdn.jsdelivr.net/gh/superd75/myfont@v1.0.0/137/SBAggroM.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/superd75/myfont@v1.0.0/137/SBAggroM.woff') format('woff');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'SBAggro';
src: url('https://cdn.jsdelivr.net/gh/superd75/myfont@v1.0.0/137/SBAggroB.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/superd75/myfont@v1.0.0/137/SBAggroB.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
.fnt_size40 { font-family: 'SBAggro', sans-serif; font-size:40px; font-weight:300; }
.fnt_size30 { font-family: 'SBAggro', sans-serif; font-size:30px; font-weight:500; }
.fnt_size20 { font-family: 'SBAggro', sans-serif; font-size:20px; font-weight:bold; }
* { margin:0px; padding:0px; border:0px; box-sizing:border-box; }
header { margin:0 auto; width:100%; max-width:1200px; height:80px; border-bottom:1px solid #ddd; }
section { margin:0 auto; width:100%; max-width:1200px;}
article { width:100%; min-height:800px; display:flex; }
article + article { border-top:1px solid #ddd; }
footer { margin:0 auto; width:100%; max-width:1200px; padding:30px 0 30px 0; background:#ececec; }
.header_wrap { width:100%; height:80px; }
.felx_c_c { display:flex; justify-content:center; align-items:center; }
.display_on { display:block; }
.display_off { display:none; }
@media all and (min-width:1200px){
.rbar_wrap { position:fixed; flex-direction:column; right:30px; top:50%; transform:translateY(-50%); width:80px; padding:7px; border-radius:15px; background:#ececec; transition: all 0.5s; }
.rbar_wrap .cells { display:flex; flex-direction:column; }
.rbar_wrap .cells + .cells { border-top:0px; }
.rbar_wrap .cell { width:100%; height:80px;}
.rbar_wrap .cell a { width:100%; height:100%; text-decoration:none; }
.rbar_wrap .cell + .cell { border-top:1px solid #ddd; }
.footer_padb { margin-bottom:0px; }
}
@media all and (min-width:751px) and (max-width:1199px) {
.rbar_wrap { position:fixed; flex-direction:column; right:30px; top:50%; transform:translateY(-50%); width:80px; padding:7px; border-radius:15px; background:#ececec; transition: all 0.5s; }
.rbar_wrap .cells { display:flex; flex-direction:column; }
.rbar_wrap .cells + .cells { border-top:1px solid #ddd; }
.rbar_wrap .cell { width:100%; height:80px;}
.rbar_wrap .cell a { width:100%; height:100%; text-decoration:none; }
.rbar_wrap .cell + .cell { border-top:1px solid #ddd; }
.footer_padb { margin-bottom:0px; }
}
@media all and (max-width:750px){
.rbar_wrap { position:fixed; flex-direction:row; right:3%; bottom:20px; width:94%; padding:7px; border-radius:15px; background:#ececec; transition: all 0.5s; }
.rbar_wrap .cells { display:flex; flex-direction:row; }
.rbar_wrap .cells + .cells { border-top:1px solid #ddd; }
.rbar_wrap .cell { width:calc(100% / 3); height:80px;}
.rbar_wrap .cell a { width:100%; height:100%; text-decoration:none; }
.rbar_wrap .cell + .cell { border-left:1px solid #ddd; }
.footer_padb { margin-bottom:170px; }
}
</style>
</head>
<body>
<header>
<div class="header_wrap felx_c_c fnt_size20">Header</div>
</header>
<section>
<article class="felx_c_c"><span class="fnt_size20">Article1</span></article>
<article class="felx_c_c"><span class="fnt_size20">Article2</span></article>
<article class="felx_c_c"><span class="fnt_size20">Article3</span></article>
</section>
<footer class="felx_c_c">
<div class="footer_padb">
<span class="fnt_size20">Footer</span>
</div>
</footer>
<div class="rbar_wrap">
<div class="cells">
<div class="cell">
<a href="#" class="felx_c_c">
<span>menu1</span>
</a>
</div>
<div class="cell felx_c_c">
<span>menu2</span>
</div>
<div class="cell felx_c_c">
<span>menu3</span>
</div>
</div>
<div class="cells">
<div class="cell felx_c_c">
<span>menu4</span>
</div>
<div class="cell felx_c_c">
<span>menu5</span>
</div>
<div class="cell felx_c_c">
<span>menu6</span>
</div>
</div>
</div>
</body>
</html>반응형
'무료홈페이지소스 > jquery' 카테고리의 다른 글
| HTML 테이블을 엑셀처럼 thead, tbody 일부 고정하기 (0) | 2026.04.28 |
|---|---|
| 특정 영역만 단독으로 CSS 적용 (0) | 2026.03.17 |
| MutationObserver (0) | 2026.02.06 |
| [소스] 모달 팝업(modal)에서 스크롤(scroll) 제어 (0) | 2026.01.15 |
| 주민등록번호 앞 6자리 + 뒤자리 첫 번째 1자리만 입력 (0) | 2025.11.14 |