Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
Tags
- 반응형div박스
- 가로세로비율div
- 대전와플
- 행운의방문객
- 괴정동삼겹살
- 괴정동등갈비전골
- 대전돼지고기
- 반응형padding-bottom
- 크롬행운의방문객
- height%
- 대전등갈비전골
- 괴정동림벅
- 대전림벅
- 높이%
- 대전괴정동맛집
- 크롬이벤트
- 대전괴정동림벅
- 대전괴정동돈덩어리
- 반응형div
- 괴정동와플
- 메이플와플
- 크롬방문객
- 괴정동돈덩어리
- 둔산동해물파전
- 크롬연간설문조사
- 크롬설문조사
- 부드러운와플
- 반응형height
- 크롬피싱
- table-cell
Archives
- Today
- Total
목록반응형div박스 (1)
오늘 뭐했지?
[HTML/CSS] 반응형 %를 이용해서 가로세로 비율을 맞춘 div 박스 생성하는법
반응형 작업을 하는 경우에 div 박스에 width 값은 %로 줄 수 있지만 height 값은 %가 적용 되지않아서 비율을 어떻게 맞춰야하나 고민했던 경우가 있었는데요. 이럴 때 높이대신에 div에 padding-bottom:을 이용해서 % 값을 주면 간단하게 해결할 수 있습니다. div{width:50%; margin:0 auto; padding-bottom:30%; background-color:#eee;} 만약에 박스 안에 컨텐츠를 넣을 경우엔 감싸는 div에 position: relative;를 주고 컨텐츠는 absolute로 주어서 넣어주시면 됩니다! .wrap{width:50%; margin:0 auto; padding-bottom:30%; background-color:#eee; positi..
웹디자인/HTML,CSS
2019. 10. 29. 14:04