position (5) 썸네일형 리스트형 table 상하좌우 스크롤(슬라이딩)시 특정 부분 위치 고정 원문 : https://www.codingfactory.net/13033 예전에는 자바스크립트로 프로그래밍 해 주던 영역인데, position:sticky 속성을 지원하는 CSS 에서는 간단하게 구현이 됩니다. 원문에서는 하나의 테이블에 대해서만 다루었는데, 위 아래로 여러 테이블이 있는 경우에는 id 가 아니라 class 방식으로 바꾸면 정상 작동합니다. 그러면, 이제 응용편을 하나 예로 들어 봅니다. 좌우 스크롤이 되는 table 인데.. (물론, table 을 감싸는 div 에 overflow-y:hidden 적용) 상단 칼럼은 colspan 으로 셀병합(엑셀 용어.. ㅋ)되어 있고, 칼럼이 많아서 좌우 스크롤 해야 하는데.. 상단 칼럼의 내용이 스크롤 할 때 계속 보여져야 한다면...? 간소하게 .. position fixed 를 사용하여 화면이 스크롤 되어도 고정 위치에 표시 ...상기와 같이 하면 오른쪽 상단에 div 가 놓여진다. 스크롤 하더라도 그 위치가 변함이 없다.레이어가 있는 화면의 경우 z-index:100 과 같이 값을 주면 되겠고..그런데, doctype 이 정의되어 있지 않다면 작동하지 않는다. jquery 와 함께 사용하여 일정한 공간을 스크롤 한 다음에야 표시되게 하고,일정한 공간이 남은 다음에 표시되지 않게 할 수도 있겠다..처음엔 나오지 않다가 어느정도 스크롤 하면 나오게 하거나,반대로.. 처음엔 나오다가 일정한 스크롤이 이루어지면 표시되지 않도록 할 수도 있겠다. jquery 를 이용해서 일정한 곳으로 애니메이션 스크롤http://luckypong.tistory.com/73 jQuery, 영역 범위 좌표 width height *. http://uix.kr/archives/649 - .height(), .width() : margin, border, padding 제외한 수치. 순수 element 영역 IE 에서 만약 element 가 꽉채워지지 않았다면 .height() 값은 세팅된 수치와 다를 수 있다. .width() 는 IE 에서도 세팅된 수치와 동일 Chrome 에선 .width() 나 .height() 모두 elelment 과 꽉채워지건 아니건 세팅된 수치와 동일 - .innerHeight(), .innerWidth() : margin, border 제외한 수치. element 와 padding 포함 영역. .height() 에 padding-top + padding-bottom 를 더한 값과 .width() 에 p.. position CSS 는 table 태그류와는 맞지 않고 div 쪽으로는 잘 맞네요 블럭 단위로 CSS 를 사용하여 좌표에 대해서 조정이 필요할때, 이를테면 화면에서 B 블럭이 A 블럭 안에서 일정 거리를 두고 표시되어야 할때.. 최근의 HTML 태그는 div 를 주로 사용하니까 문제는 없고요. table 태그가 들어간 이전 HTML 태그들과 섞여 있는 화면이라면.. table 의 td 안에 div 로 B 블럭을 구현하려고 할 거에요. 이게 IE 에서는 잘 맞아 들어가는데, IE 이외의 웹브라우저에서는 소용없는 짓이죠. ㅠ.ㅠ 그래서 이럴때는.. table 태그 안에 div 로 A 블럭을 만들고 그 안에 B 블럭을 만들면서.. A 블럭에는 position:relative 를, B 블럭에는 position:abolute 를 해 주어야 하는 거죠. .. 상기와 같은 코드로는 IE 에서는 제.. jQuery v1.4.2 에서 웹브라우저 종류 체크, $.browser.msie DOCTYPE 이 정의된 HTML 에서 필요할까 싶긴 한데요.. DOCTYPE 이 없이 HTML4.x 로 작성된 웹페이지라면, 웹브라우저 종류를 알아내는 것이 중요할 수도 있어요.. $.browser.msie 가 true 이면 MS 사의 인터넷 익스플로러, 아니면 다른 웹브라우저 입니다. 각 웹브라우저 간의 호환성이나 표준 HTML 을 고민하다 보면, 가끔씩 TABLE 태그를 사용하던 시절이 그립기도 합니다. $.browser.version 는 웹브라우저 버전. $.browser.safari 사파리 웹브라우저일때 true, 아니면 undefined. $.browser.opera 오페라 웹브라우저일때 true, 아니면 undefined. $.browser.msie MS IE 웹브라우저일때 true, 아니면.. 이전 1 다음
