홈페이지에 배너를 추가하려 할 때 배너만을 위해 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

+ Recent posts

"여기"를 클릭하면 광고 제거.

티스토리툴바