본문 바로가기

width

(7)
[carouFredSel] 가변폭 요소들이 슬라이드 될 때 가운데 정렬하는 방법 * jquery.carouFredSel-6.2.1-packed.js www.jqueryscript.net/demo/Circular-Responsive-Slideshow-Plugin-carouFredSel/ ul - li 구조로 오른쪽에서 왼쪽으로 움직이는 슬라이드 쇼를 구현할 때, carouFredSel 을 사용해 보세요. $('#ul_태그에_대한_아이디').carouFredSel({ auto:{ pauseOnHover:'resume'}//최초 슬라이딩, 마우스 커서가 올려지면 일시 멈춤, 커서가 벗어나면 슬라이딩 재개 //마우스 커서 움직임과 상관없이 슬라이딩 하려면 auto:true 하면 됨 ,scroll:1//li 가 scroll 갯수만큼 움직임, 2 라고 세팅하면 한 번에 2개의 li 가 움직임...
크롬에서 colgroup 의 col 속성 중 colspan 과 상기와 같이 했을 때 IE 에선 정상적으로 보여지지만,크롬에선 오른쪽에 공백이 생긴다. col 태그에 사용된 colspan 을 없애고 태그를 8번 사용했더니,더 심각한 오류가 발생함.물론, IE 에선 정상적으로 보임. 그래서 width 속성에 사용된 % 를 없애고,pixel 단위로 계산하여 다시 세팅하자 정상화 됨.크롬에 있는 버그도 상당히 많음.. 크롬에서도 정상적으로 보이는 결과는 아래와 같음.
고정 width 를 가진 웹페이지, meta viewport 로 모바일 기기별 해상도에 자동 맞추기 요즘 반응형웹이다 적응형웹이다 이슈가 장난 아니네요. 그러나, 둘다 모바일에 최적화 되어 있다고 할 수는 없어요. 요즘 나오는 모바일 기기는 PC 해상도를 상회하지만, 화면폭은 클 수가 없다는 겁니다.. ㅠ. 이럴 바에는 차라리 viewport 를 이용하는 것이 나아 보입니다. 물론, www 용과 mobile 용 웹페이지 2개를 운영해야 하겠지만서도요.. 암튼, 어떤 방법이든 장단점이 있으니까요. 여기에서는 모바일 홈페이지가 고정폭으로 적용된 웹사이트에서.. 어떻게 하면, 해상도가 서로 다른 모바일 디바이스에서 모두 한 방에 정상적으로 보이게 하느냐에 대해 다뤄봅니다. 초창기 스마트폰 해상도가, 320 인 시절이 있었지요. 이때 개발된 홈페이지들은 화면폭이 640 pixel 로 세팅되어 있어요. 320 ..
인터넷 익스플로러(IE) 에서 이미지를 둘러싼 태그의 여백에 영향을 주는 요소 예를들어 아래와 같은 HTML 코드가 있다고 할 때, DOCTYPE 이 세팅된 경우라면 생각하는 대로 표시되는데 DOCTYPE 이 없다면..?Box 모델을 생각해 볼때, padding 과 margin 을 고려해 볼 수 있는데..padding 은 IE 와 Chrome 등에서 유효하지만, margin 의 경우 상하는 값을 주어도 적용이 되지 않고 좌우만 수치 조정이 가능.다음으로 생각해 볼 것은 line-height.. 그런데도 이미지 상하에 여백이 발생한다면 font-size 를 조정해 보세요.물론, 이미지에는 적용할 필요 없고, 이미지를 감싸는 태그에 적용하면 됩니다. .........
CSS 와 jQuery, table 태그 등을 사용하여 목록 만들기 레이아웃이 아니라, 그리드 형태로 목록을 만들어야 하는 경우 table 태그를 사용하면 편합니다.아래 소개하는 목록은.. 목록의 맨 왼쪽과 맨 오른쪽 세로선이 없어요.가독성을 위해 짝수행에 배경색을 주고, 마우스 커서가 올려진 행에 배경색이 다르게 했어요.각 셀은 중앙정렬을 기본으로 하고 (아직 까지 모든 웹브라우저는 td 의 vertical-align 이 middle), 좌정렬과 우정렬은 클래스를 활용.셀에 입력된 글자가 많아질때 말줄임 표시를 할 수 있도록 세팅 .css 파일@charset "UTF-8" /* 혹시 문자셋 관계로 External CSS 를 사용하지 못한다면 사용 */table.tableList { table-layout:fixed; border-top:2px #EA0000 solid;..
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..
이미지 위에 레이어를 올렸는데, 브라우저 폭이 변할때 같이 변하지 않거나 레이아웃에 가로줄이 생길때.. o 박스 안에 이미지와 절대좌표 박스가 들어간 형태에서 호환성 보기를 하면 레이아웃에 금이 가는 현상 다른 웹브라우저나, IE 일반 모드에서는 정상인데.. 유독 IE 호환성 보기에서 레이아웃이 깨짐. ... 이때는.. img 와 absolute 인 div 사이에 공간이 없게 해야 하는군요. ... 그런데, 브라우저 폭이 변할때 absolute 로 잡은 영역이 같이 변하지 않아서 레이아웃이 깨진다면.. 아래와 같이 relative 영역에 이미지를 가져다 사용하는 것이 필요. ...