오늘 뭐했지?

반응형 작업을 하는 경우에 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] ie에서 table-cell 속성사용 시 word-break, word-wrap 자동 줄바꿈 안되는 경우 해결방법 2019/10/18 - [웹디자인/HTML,CSS] - [html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법 [html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법 퍼블리싱을 하다 보면 세로 가운데 정렬을 해야 할 경우가 생기기 마련입니다. 그 div가 만약 고정된 세로 값을 가지고 있다면 비교적 간단하게 할 수 있지만... 만약 가변적인 세로 값을 가지고 있다면... 굉장히.. today-myday.tistory.com 바로 이전에 올렸던 글처럼(위 링크 참조) div에 display : table-c..

[html/css] table-cell 속성을 이용해서 div 세로 가운데 정렬 하는 법 퍼블리싱을 하다 보면 세로 가운데 정렬을 해야 할 경우가 생기기 마련입니다. 그 div가 만약 고정된 세로 값을 가지고 있다면 비교적 간단하게 할 수 있지만... 만약 가변적인 세로 값을 가지고 있다면... 굉장히 귀찮아지죠. 하지만 이런 경우는 흔한 일이기도 해서 제가 가장 자주 쓰는 방법인 table-cell 속성을 이용해서 세로 중앙 정렬하는 방법을 소개해드리겠습니다. 일단 제가 만들고자 하는 화면은 이와 같습니다. 테이블 형식을 이용하면 한번에 되겠지만 반응형으로 작업해야한다던가 뭔가 제약조건이 있어서 div로 작업해야만 할때 사용할 수 있는 방법입니다. 결론적으로 말하자면 세로정렬하고자 하는 div를 div..