본문 바로가기

Local Oriented/HTML CSS JS

 (105)
동영상을 object 로 기술할 경우 embed 도 같이 기술해 주세요. 가비아 동영상의 경우 4가지로 동영상을 열 수 있는데요.. 아래에 제시된 4가지가 바로 그것입니다. 그런데, object 와 embed 한 가지만을 적용하는 경우, 웹브라우저 종류에 따라 동영상이 보이지 않을 수 있습니다. object 만 사용하는 경우, MS 사의 인터넷 익스플로러에서는 정상적으로 동영상이 보이지만, 크롬에서는 보이지 않는 식이지요. 그래서 object 안에 embed 코드를 추가해 주어야 합니다. 구체적인 방법은 말미에 기술하였습니다. 1. 동영상링크주소 http://web.flv.gabia.com/flash_skin/player.swf?file_key=...&allowmaximize=YES&width=640&height=480 2. 동영상페이지주소 http://flv.gabia.co..
이미지 위에 레이어를 올렸는데, 브라우저 폭이 변할때 같이 변하지 않거나 레이아웃에 가로줄이 생길때.. o 박스 안에 이미지와 절대좌표 박스가 들어간 형태에서 호환성 보기를 하면 레이아웃에 금이 가는 현상 다른 웹브라우저나, IE 일반 모드에서는 정상인데.. 유독 IE 호환성 보기에서 레이아웃이 깨짐. ... 이때는.. img 와 absolute 인 div 사이에 공간이 없게 해야 하는군요. ... 그런데, 브라우저 폭이 변할때 absolute 로 잡은 영역이 같이 변하지 않아서 레이아웃이 깨진다면.. 아래와 같이 relative 영역에 이미지를 가져다 사용하는 것이 필요. ...
a 태그에 name 속성 사용시 주의사항 아래와 같이 XHTML 1.0 Transitional 로 정의된 HTML 에서 a 태그는, 와 같이 사용하지 않고, 와 같이 사용한다면 대략 난감합니다. ^^. 아래와 같은 코드가 있다고 생각해 봅시다. '텍스트A' 에는 밑줄이 그어집니다. 참 놀랍죠..? 텍스트A 밑줄이 그어지지 않은 정상적인 상태로 하려면.. 아래와 같이 되어야 합니다. 텍스트A .Fine.
CSS 스타일, 팝업시 배경 투명도, opacity alpha 투명도는 30% 대가 적정..? 투명하게 하려면 완전히 검은색(#000) 에서 35% 투명도가 괜찮은듯.. background:#000; opacity:.35; filter:Alpha(Opacity=35);
모바일 기기에 특화된 메타 태그 maximum-scale 을 1.0 이상으로 설정해도 user-scalable=no 이면 화면 확대/축소가 불가. 애플에서는.. user-scalable 이 no 라도,minimum-scale 을 1.0 이상으로 설정하면 initial-scale 값에 상관없이 최초 화면이 해당 크기로 확대.안드로이드에서는.. user-scalable 이 no 라면,minimum-scale 이나 initail-scale 값에 상관 없이 크기 불변.. ㅎㅎuser-scalable 이 yes 이면 사용자가 확대해 볼때 화면 사이즈가 변경.아직 통일이 안 되어 있음. 애플이나 안드로이드나 동일하게 작동하는 것은..아예 사이즈가 고정되는 것은 상기와 같고,사이즈를 일정하게 확대/축소 시키는 것은 아래와 같음.. target-de..
스핀 spin 자바스크립트 (jQuery 나 prototype 가능) 순수 자바스크립트와 jQuery, prototype 에서도 가능하고.. IE6.x 와 xFlatform 이 되는 스핀 플러그인. http://fgnass.github.com/spin.js/ 제작자는, stop() 한 다음에 다시 spin() 하면 된다 했는데.. spin(option) 으로 하지 않으면 기본 옵션이 적용되므로 유의. 순수 자바스크립트에서는 아래와 같이 사용. 스핀 생성시에 자바스크립트 전역 변수에 담아 두었다가 정지시키는 방식. Hi, there1!! Hi, there2!! Hi, there3!! 그러면, jQuery 에서는..? jQuery 의 data() 를 사용하네요. Hi, there1!! Hi, there2!! Hi, there3!!
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 에서는 제..
모바일 기기를 고려한다면, onclick 에서도 javascript 반드시 기술 아래와 같이 a 태그나 이미지 맵에서는 href 속성에 javascript 라고 기술하고, 클릭 onclick 이벤트가 들어갈 때는 javascript 를 기술하지 않았었죠..? 클릭 그런데, 모바일에서는 onclick 이벤트에 javascript 를 반드시 기술해야 합니다. 클릭 과 같이 해야 한다는 말씀입니다. ^^.

티스토리툴바