윙배너 하고싶은데요.
본문
답변 1
다음 코드가 도움이 될지 모르겠습니다.
<style>
:root {
--w-banner: 12em;
}
.wrap {
width: 80%;
margin: auto;
background-color: #eee;
}
.header {
height: 7em;
}
.wing_banner {
position: sticky;
height: 0;
top: 0;
display: flex;
justify-content: space-between;
}
.wing_banner .left, .wing_banner .right {
width: var(--w-banner);
align-self: start;
text-align: center;
background-color: #ddd;
}
.content {
margin-left: var(--w-banner);
width: calc(100% - calc(var(--w-banner) * 2));
background-color: #ccc;
}
</style>
<div class="wrap">
<header class="header">
header
</header>
<div class="wing_banner">
<div class="left">
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
</div>
<div class="right">
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
<p>Google AdSense</p>
</div>
</div>
<div class="content">
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>abcde<br>
</div>
</div>
답변을 작성하시기 전에 로그인 해주세요.
