컴터/css (4) 썸네일형 리스트형 css3를 활용한 모바일 daum 육면체 슬라이드 흉내내기 개인적으로 개편된 모바일쪽은 다음이 네이버보다 한수 위인거 같습니다. 뭐라 부르는지 모르겠는데 모바일 다음의 메인에 육면체가 슬라이드 되면서 페이징되는 기법(이하 슬라이드)를 보고 간만에 멋진것을 봤다고 느꼈습니다. 공부할 꺼리를 찾았던거 같습니다. 외국 사이트와 다음 소스를 분석해보니 키워드는 css의 preserve-3d,perspective,translate3d,rotateY(Z) 로 함축되더군요.갈길이 먼 실력인지라 여까지 정리하는데 꽤 시간이 걸렸습니다. 특히 perspective 이놈은 생각과 다르게 값이 적을수록 큰 효과를 줍니다. 모양은 허접하게 만들었지만, 혹시 도움이 될까 정리해 보았습니다. 귀차니즘에 설명을 생략. js보다는 css쪽이 많은 역할을 합니다. 모바일에서 터치로 슬라이드 .. css로 레이아웃 잡을때-float:left를 줘도 컨테이너의 높이를 유동적으로 변하게 하고 싶을때. 참고 : http://www.quirksmode.org/css/clearing.html A. 보통 잡는 레이아웃형태 B C float:left로 잡으면 a class의 height를 고정형으로 잡거나 안잡으면 0px로 잡혀 백그라운드 이미지 적용시 어렵다. B. 컨테이너 div의 height 도 같이 늘어나게 B C overflow 옵션을 주면 해결됨. 원하는 결과에 따라 auto, hidden 아무거나 줘도 된다. 결과적으로 width:200px;overflow:hidden(auto); 는 꼭 필요 css : content, counter 오늘 발견한 css, content, counter 괜찮고 유용할듯.. http://trio.co.kr/webrefer/css2/generate.html log1 log2 log3 quote number number2 number style IE에서는 꼭 선언되어 있어야 함.. 저 선언이 아니고라도 일반적인 것으로도 됨 선언하면 ie8도 css3을 약간을 할수 있음(first-child 라등가..;;) HTML5 Demo log1 log2 log3 quote number number2 number style 스타일중 scroll bar 생기게 (overflow 속성) overflow-y : auto -> 세로스크롤만 넘치면 생기게 overflow-x : auto -> 가로 스크롤만 넘치면 생기게 까먹을까바...ㅋ 이전 1 다음
