Publishing 썸네일형 리스트형 <div> 테두리(border) 겹침 제거(collapse) 테두리(border) 겹침 제거(collapse)태그에 border를 사용해 틀을 잡으려다 선이 겹쳐서 두 배의 두께로 나온 적이 있을 것이다. display: table 을 설정하면 해결할 수 있지만, display: float와 같이 다른 값이나 속성을 사용하고 있을 땐 난감해진다. 반응형 웹페이지에서 테이블셀을 사용하면 대응이 힘들 때가 있기도 하고. 아래처럼 1px의 solid black 테두리선이 특정 영역에서 2개씩 겹쳐서 2px로 보이는 경우의 해결법이다.html1234567 1 1 1 1 1 cscss123.sucks div{ border:1px solid black;}csoutput 원래 위와 같은 현상을 극복하기 위해서는, 첫번째 에 border가 모두 설정되어 있다면 그 아래 는 첫번.. 페이지 스크롤시 Fade In 효과주기 페이지 스크롤시 Fade In 효과주기1. 단순 Fade In스크롤되면 스르륵 하고 나타나는 형태의 가장 단순하고 기본적인 Fade In 방식입니다.HTML123456789 Fade In Fade In Fade In Fade In Fade In Colored by Color Scriptercs class명이 "hideme"인 가 있습니다.CSS12345.hideme{ opacity:0;} cs .hideme 선택자로 불투명도를 0으로 만들어 화면에서 사라지게 합니다. jQuery1234567891011121314$(document).ready(function() { /* 1 */ $(window).scroll( function(){ /* 2 */ $('.hideme').each( function(i){ .. [CSS] 페이지로드시 fade in 효과주기 [CSS] 페이지로드시 fade in 효과주기여러 홈페이지들을 다니다 보면 보이는, 페이지 로드시 컨텐츠가 fade in 되면서 나타나는 효과를 적용해보자.CSS1234567891011121314151617181920212223242526272829303132333435363738#test { animation: fadein 2s; -moz-animation: fadein 2s; /* Firefox */ -webkit-animation: fadein 2s; /* Safari and Chrome */ -o-animation: fadein 2s; /* Opera */}@keyframes fadein { from { opacity:0; } to { opacity:1; }}@-moz-keyframes fadei.. 이전 1 2 3 다음
