World Wide Web/CSS 썸네일형 리스트형 모바일에서 a태그 영역 감추기 12-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent; /* For some Androids */cs 출처: http://august5pm.tistory.com/26 [어느 팔월의 오후 다섯시] 더보기 정찬명님의 반응형 웹 구축기 정찬명님이 2012년도에 발표하신 반응형 웹 구축기입니다.modernizr 찾아보다가 우연히 읽었는데 매우 좋은 내용이라 공유드립니다.이미 읽어보신분들도 계시고 처음 보시는분들도 계시겠지만 오래된 자료이긴하나 분명 좋은 자료임에는 틀림없습니다. http://naradesign.net/rwd/pr/?#s1 더보기 css3 flip효과주기 IE9 이하에서는 동작이 안됩니다. 때문에 사용자를 위한 대책마련이 필요합니다. HTML12 CSS.container { width: 200px; height: 260px; position: relative; perspective: 1000px;}#card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transition: transform 1s;}#card div { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden;}#card .front { background: red;}#c.. 더보기 tbody 스크롤 만들기 테이블내에 스크롤을 만들 경우가 왕왕 있습니다. 구글링을 해보니 방법은 여러가지가 있습니다. 그중에 한가지 방법을 소개해드립니다. 아래 방법이 마음에 들지 않으신다면 구글링을 통해 여러가지 소스를 찾으실 수 있습니다. 123456789.TABLE{border-collapse:collapse; width:100%}.TABLE thead{float:left; width:890px;}.TABLE tbody{overflow-y:auto; overflow-x:hidden; float:left; width:890px; height:100px}.TABLE tbody tr{display:table; width:890px;}.TABLE td{width:100px}Colored by Color Scriptercs 더보기 div에서 세로정렬 시키기 세로정렬인 경우는 그냥 되지 않습니다. DIV의 속성을 BLOCK레벨에서 TABLE레벨로 변경한뒤 vertical align을 middle로 주면 됩니다. 세로 중앙정렬 입니다. 여기서 중요한 부분은 태그의 Display속성이 table-cell이어야 한다는 것입니다. 더보기 "..."을 css로 처리하는 방법 123 안녕하세요 Colored by Color Scriptercs Block레벨 테그에서만 적용이 됩니다. overflow:hidden : 넓이가 70px를 넒어서는 내용에 대해서는 보이지 않게 처리함text-overflow:ellipsis : 글자가 넓이 70px를 넘을 경우 생략부호를 표시함white-space:nowrap : 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리함 (\A로 줄바꿈가능) 더보기 IE에서 PNG에 opacity사용시 검은배경 막기 IE8에서 png 이미지에 opacity 애니메이션을 주면 투명부분이 작업자의 마음처럼 새까맣게 태워져 보인다. 사실 IE하위 버전을 고려해야된다면 png에는 opacity를 안주는게 가장 베스트하다. 아래 방법은 구글링을 통해서 찾았지만, 모든 환경에서 적용되는지는 잘 모르겠다. 1234567891011.mainVisualDiv .visualDiv img{ zoom:1; background:transparent; -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient.. 더보기 float:left 썼을 때 가운데정렬 방법 웹표준에 관심을 가지면서 table보다는 div 사용을 장려하고 사용하는 그런 모습을 보면서 웹표준 웹표준 입에 달고 살길래 초보자를 위한 관련사이트가 많은 줄 알았습니다. (여기서, 초보자라 함은 div보다는 table로 익숙하게 써왔고 앞으로도 그러려고 했던 css 같은것을 잘 모르는 SCAC같은 사람들을 뜻합니다) 그런데 찾아보니 준비중인 사이트도 많고 이런 말 하기는 그렇지만 확실히 "부실"합니다. div로 table 효과를 내는데에 있어서 float:left (혹은 right)를 사용하는 예제가 있어서, 또 달린 댓글들을 보면서 테이블의 셀이 나열되는 효과를 내기 위해서는 꼭 그래야만 하는 줄 알았습니다. (어느 사이트에서)float:left를 쓰는 분들은 아시겠지만 죽을 맛입니다. 여기서 본래.. 더보기 float 해제하는 방법 float을 해제하는 방법 방법 풀이 1 float된 박스들의 바로 다음 박스에 clear:both;한다- 바로 다음에 박스가 없으면 사용할 수 없다 2 float된 박스들을 감싸는 박스를 다시 floatLleft;한다- 그 float까지 연쇄적으로 해제해야하면 width값을 주어야 크로스브라우징된다. 3 float된 박스들을 감싸는 박스에 overflow:auto/overflow:hidden한다- 세로 스크롤바가 생길 경우 사용할 수 없으면 width값을 주어야 크로스브라우징 된다. 4 float된 박스들을 감싸는 박스에 height값을 준다본문내용엔 높이를 주지 않으므로 세로 사이즈가 불변일 경우가 아니면 사용이 불가능 5 float된 박스들을 감싸는 박스에 가상요소 :after를 주어 해제한다.- .. 더보기 이전 1 다음