본문 바로가기

Local Oriented/HTML CSS JS

 (99)
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 를 반드시 기술해야 합니다. 클릭 과 같이 해야 한다는 말씀입니다. ^^.
CSS, 외부 포스트 모음 http://css3generator.com/ CSS 각종 옵션을 조정해 볼 수 있는 곳해당 내용이 적용되는 웹브라우저, 모바일 등을 한 눈에 표시 http://html.nhndesign.com/guidelines/css/ in-line, internal, external 중 external 추천 문자셋 @charset "euc-kr"; UTF-8 도 좋겠고요.. 코딩요령과 주석요령
CSS 레이아웃 블럭을 가운데 정렬하는 방법 (margin:0 auto) 금방 떠오르는 생각은 text-align 속성을 사용하는 것인데요. text-align:center 로 하면 하위 요소에 상속을 주기 때문에 하위 블럭 안의 내용이 모두 가운데 정렬이 되어 버려요. 블럭 안의 내용은 가운데 정렬이 아니면서 블럭이 상위 블럭의 가운데로 표시되게 하려면 text-align 은 답이 아닙니다. 검색해 보시면, 가운데 정렬할때 maring:0 auto 를 주라는 것이 많을 거에요. margin 옵션의 값으로 "0 auto" 를 주라는 것인데, "0 auto" 는 "0 auto 0 auto" 와 동일한 의미입니다. 이전에 "10px 20px 30px 40px" 처럼 썼던 것은 기억하시죠..? 맨 처음 값이 블럭의 상단, 다음이 우측, 세번째가 하단, 네번쨰가 좌측, 이런식이죠. ..
CSS border-width 더이상 사용하면 안 되는 듯.. border-width:0 0 0 5px; border:#EEEEEE double 위와 같은 코드가 예전에는 적용되었는데, 요즘은 글쎄요.. IE7.x 까지와 IE8.x 의 호환성보기에서는 적용되지만, IE8.x 기본 보기 모드와 IE9.x 이상 FireFox, Chrome, Safari, Opera 최신 버전에서는 적용되지 않네요. border-top:0 이나 border-top:none, border-right:0 이나 border-right:none, border-bottom:0 이나 border-bottom:none, border-left:5px #EEEEEE double 로 모두 기술해야 합니당.. 크으.
투명 플래시 z-index 가 적용되려면 object 사용시 param 에 name='wmode' value='transparent' 추가 가령, 페이스북의 Like 버튼을 달아야 하는데, 플래시가 z-index 레이어를 먹지 않을때 말이죠.. 일단 생각할 수 있는 것은, 플래시를 div 태그로 감싸서 z-index 를 설정하는 것인데.. 이것도 적용이 되지 않을때가 있어요. 혹시, object 태그로 플래시를 호출할때.. 를 사용했는지 확인해 보세요. 이거 넣으면 생각한 대로 될 겁니다. ^^. 그런데, 이렇게 해도 안 된다는 분.. 혹시 embed 쪽에도 넣으셨는지.. 암튼 최종 결과물은 아래와 같습니다. function setFlash(uri,width,height,bgcolor){ document.writeln(''); document.writeln(''); document.writeln(''); document.writeln('')..
자바스크립트 모바일 툴킷(프레임웍), DojoToolkt VS jQuery Mobile 글쎄요.. 어떤 것이 더 나을까요..? jQuery Mobile http://jquerymobile.com/ http://www.ibm.com/developerworks/kr/xml/tutorials/x-jquerymobilejsontut/section2.html Dojo Toolkit http://dojotoolkit.org/
CSS 초기화 Reset 리셋 - 전체 선택자 * 를 이용한 전역 설정은 성능이 떨어진다는 평가이므로 사용을 자제 HTML5 용 니콜라스http://necolas.github.io/normalize.css/IE8+(IE8 미만은 아래 에릭 마이어 v2.0 사용 요망. 아직 IE6 가 제법 많이 사용되므로 HTML5 로 넘어가기엔 부담이 작용. 에릭 마이어 http://meyerweb.com/eric/tools/css/reset/ 2011/01/26 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h..

티스토리툴바