반응형
css의 background 로 통이미지가 들어가 있을 경우
이를 이미지 조작 없이 늘리는 꼼수.
현재 이미지는 제목 블록, 내용 블록, 버튼블록으로 나뉘어져 있다.
그리고
<div class="weekReport">
과 같이 css를 이용해 background 를 그린다.
이를 늘리기 위해 z-index를 이용하여 밑에 2개의 background 를 깔았다.
일단 상단을 그리데 하단 버튼 클록이 나오지 않게 height 를 조정한다.
<div class="weekReport" style="position:absolute;height:324px;z-index:-1;"></div>
그리고 그 밑에 -2의 z-index에 top을 조정하여 background image가 제목블록이 짤리게 그린다.
<div class="weekReport" style="position:absolute;height:624px;top:200px;z-index: -2;"></div>
그럼 일단 늘어난 background 가 생성되었다. 이 위에 다시 같은 class를 사용하는 div를 얹는데
이 때는 background 를 그리지 않는 것으로 마무리 한다.
- 오리지널 div, height를 늘어난 만큼 늘려주었다.
<div class="weekReport" style="background:none;height:824px;">
웹표준에 대해서 잘 모르기 떄문에 이것이 문제가 되는지는 모르겠다.
일단 꼼수를 이용하여 해결하였기에 기록하였음.
이를 이미지 조작 없이 늘리는 꼼수.
현재 이미지는 제목 블록, 내용 블록, 버튼블록으로 나뉘어져 있다.
그리고
<div class="weekReport">
과 같이 css를 이용해 background 를 그린다.
이를 늘리기 위해 z-index를 이용하여 밑에 2개의 background 를 깔았다.
일단 상단을 그리데 하단 버튼 클록이 나오지 않게 height 를 조정한다.
<div class="weekReport" style="position:absolute;height:324px;z-index:-1;"></div>
그리고 그 밑에 -2의 z-index에 top을 조정하여 background image가 제목블록이 짤리게 그린다.
<div class="weekReport" style="position:absolute;height:624px;top:200px;z-index: -2;"></div>
그럼 일단 늘어난 background 가 생성되었다. 이 위에 다시 같은 class를 사용하는 div를 얹는데
이 때는 background 를 그리지 않는 것으로 마무리 한다.
- 오리지널 div, height를 늘어난 만큼 늘려주었다.
<div class="weekReport" style="background:none;height:824px;">
웹표준에 대해서 잘 모르기 떄문에 이것이 문제가 되는지는 모르겠다.
일단 꼼수를 이용하여 해결하였기에 기록하였음.