홈페이지에 배너를 추가하려 할 때 배너만을 위해 padding을 변경하고 div를 추가하기가 난감하다.
잘못 바꾸었다가 좌우에 있는 메뉴의 위치가 틀어질 수가 있는데
배너를 추가한 페이지에서만 메뉴의 위치가 틀어져있으면 페이지의 통일감을 깨질 수 있기 때문이다.
그래서 position을 사용하여 기준이 되는 div 옆에 배너를 붙이기로했다.
배너가 잘릴경우 상위 엘리먼트의 overflow가 hidden이 아닌지를 확인해보아야 하며
그래도 최상위로 올라오지 않을시 style에 z-index값을 주는 방법도 있다.
Body
컨테이너
컨텐츠 (기준이되는 박스)
<div id="body" style="background: skyblue;">
<body>
<div id="container" style="background: yellow; ">
컨테이너
<div id="contents" style="background: green;">
컨텐츠 (기준이되는 박스)
<div id="banner" style="background: red;">
배너
</div>
</div>
</div>
</div>
<!-- 컨테이너 CSS -->
#container {
width:250px;
height:350px;
overflow:visible;
}
<!-- 컨텐츠 CSS -->
#contents {
width:200px;
height:300px;
position:relative;
}
<!-- 배너 CSS -->
#banner {
width:100px;
height:200px;
position:absolute;
top:0px;
right:-110px;
}
'Web 개발 > HTML & CSS' 카테고리의 다른 글
| [CSS] div 균등 분할 / 가운데 정렬 (display : table) (0) | 2019.08.08 |
|---|---|
| jQuery로 움직이는 배너 만들기 (0) | 2019.07.26 |