마크업개발 메모장

전에 transform으로 이미지 위아래로 움직이는 법을 포스팅 한적이 있다.하지만 그 후에 잘 쓰지 않게되서 금방 까먹어버렸;;;기에ㅠㅠ다시 복습하는 차원에서 공부해보았다. 오늘은 이미지를 확대/축소 시킬수 있는 zoomin효과를 만들어봤다.이미지에 마우스 오버가 되거나 스크롤할때 zoomin 효과를 주면 별거 아니지만 좀 있어보이는 것 같다. ㅋㅋ아.. 하지만 이미지는 잘못 사용하면 위험하므로 예제는 텍스트로 만들었다ㅠㅠ이미지로 해야한다면 background로 넣어주면 된다는 것~!! 생각보다 어렵지 않다! 연습예제 > http://jsfiddle.net/dmyjbbk9/3/ 여기서 중요한 것은!1. zoomin이 되는 엘리먼트를 감싸는 부모 엘리먼트에 overflow : hidden ; 을 꼭 넣어..

줄바꿈 하는데 br 아니면 span을 주로 사용했었는데 css로 훨씬 간단하게 줄바꿈을 할 수 있다!! 바로 요 div { white-space : pre-line; } 방법을 사용하면 가능하다!white-space 이건 공백 문자를 어떻게 처리할지 결정하는 속성이다. 속성 값으로는normal : 기본 값으로 연속하는 공백을 하나로 처리한다.nowrap : 연속하는 공백을 하나로 처리하고 줄바꿈을 하지 않는다.per : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 한다. 원본 그대로 표시한다. 영역에서 벗어날 수 있다.pre-line : 연속하는 공백은 하나로 취급하고 줄바꿈을 한다. width에 맞춰진다. pre-wrap : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 한다. width에 맞춰진다...

ie7을 맞춰보자~ block속성을 inline-block으로 작업한 후 ie7에서 확인해보면 깨진다. 그래서 찾아봤다. 방법이 있긴 있었다!! 바로 요것~! div {display:inline-block; zoom:1; *display:inline;} ie7에서는 inline속성을 inline-block으로 바꿀순 있지만 block속성을 바꿀순 없다.그래서 block속성을 inline-block으로 바꾸기 위해 핵을 써야한다.ie7 핵 *display:inline;으로 block을 inline 속성으로 바꾸고 block 성질도 가져야하니 zoom:1로 hasLayout이라는 고유한 성질(레이아웃)을 부여해준다.고로 inline이지만 레이아웃을 가지다 보니 inline-block성질이 되는 것이다. zo..

footer를 하단에 고정하는 방법을 검색하면 여러가지 방법이 나오는데테스트 해본 결과로 이 방법이 제일 좋은것 같다. footer를 absolute로 주는 방법!! 예제소스보러가기!! 0311 내용 추가) 직접 작업해보니 생각해봐야 할 부분이 있다. 1. 이 코드에서는 #content가 position:absolute 면 안된다. position은 header와 footer에만 사용하고 content는 default로 가는게 좋다. 어쩔수 없이 content에 position을 사용해야 한다면 absolute와 relative 2개의 클래스를 만들고 작업하는게 좋을듯 하다. 그리고 content가 absolute일때는 이 방법이 아닌 다른 방법으로 footer를 붙여야 한다. 2. #content와 #..