본문 바로가기

Local Oriented

 (251)
CSS 와 jQuery, table 태그 등을 사용하여 목록 만들기 레이아웃이 아니라, 그리드 형태로 목록을 만들어야 하는 경우 table 태그를 사용하면 편합니다.아래 소개하는 목록은.. 목록의 맨 왼쪽과 맨 오른쪽 세로선이 없어요.가독성을 위해 짝수행에 배경색을 주고, 마우스 커서가 올려진 행에 배경색이 다르게 했어요.각 셀은 중앙정렬을 기본으로 하고 (아직 까지 모든 웹브라우저는 td 의 vertical-align 이 middle), 좌정렬과 우정렬은 클래스를 활용.셀에 입력된 글자가 많아질때 말줄임 표시를 할 수 있도록 세팅 .css 파일@charset "UTF-8" /* 혹시 문자셋 관계로 External CSS 를 사용하지 못한다면 사용 */table.tableList { table-layout:fixed; border-top:2px #EA0000 solid;..
console.log 와 alert 차이..? alert() 는 말 그대로 사용자에게 무언가 메시지를 알려주어 주의를 환기하는 것이고,console.log() 사용자에게 메시징 하는 것이 아니라, 개발자에게 메시징 하는 것.IE 8.x 이상에서 지원되고, IE 이외의 웹브라우저는 최신버전에서 지원된다.log() 뿐만 아니라 info(), warn(), error() 등의 함수도 가능.Object 안에 들어 있는 항목들도 세세하게 알려주는 웹브라우저와 가르쳐주지 않는 웹브라우저가 따로 있어요. http://deadfire.hihome.com/jscript/projscript003.html
태그 닫을때 유의할 점 1. 중첩 유의...... 이런식은 곤란, ...... 이렇게 사용..... 이런 것도 문제. .... 와 같이 사용. b 태그도 css 로 흡수 요망. 2. 나 로 닫으면 안 되고 반드시 로 닫아야 하는 것...... innerText 는 audio 태그를 지원하지 않는 브라우저에서 표시될 내용.. innerText 는 video 태그를 지원하지 않는 브라우저에서 표시될 내용 3. 나 로만 사용해야 하는 것 .. 이라고 하면 iOS 에선 일반적인 방식으로 작동하지만, Android 에선 뒤에 쓰인 이 무시됨. 4. , , .. 모두 가능한 것
웹브라우저 주소표시줄(창) 없애는 HTML/jQuery 코드 주소 표시줄 또는 주소 표시창을 없애는 방식이 애플 모바일 사파리에서 HTML meta 코드로 제공되는데,jQuery 를 사용하면 안드로이드 웹브라우저에서도 구현 가능합니다. 차이는 있습니다.. ^^.아래 1과 2 두가지 코드를 모두 사용하면 문제 해결입니다. ^^. 1. 애플 모바일 사파리안드로이드 기기에서는 아직까지 적용되지 않구요.. 앞으로도 아마 적용되지 않을 코드입니다. meta name 에 apple 이 들어가거든요..애플 OS 라도 모바일 기기의 iOS 에서는 구현되지만, 맥북이나 맥북 에어 등의 PC 에서는 적용되지 않구요. 2. jQuery$(window).load(function(){ setTimeout(scrollTo, 0,0,1);});이 코드도 body 에 구현되는 내용의 heig..
DOCTYPE 에 따른 html 언어 설정 KWCAG 에 보니까, 언어 설정이란 것이 있어서 이게 뭔가 고민했었네요..그냥, 한국어냐 일본어냐 뭐 이런거. DOCTYPE 에 EN 이라고 사용하니까 한글의 정체성 때문에 사용하는 것인지..?UTF-8 말고도, EUC-KR 도 나름 많이 사용. 요즘은 UTF-8 이 대세인데.. 한글 문자셋은 항상 문제. - HTML 4.01 인 경우... - XHTML 1.0 Transitional (Strict 보다는 Transitional 이 더 많겠네요..)... - XHTML 1.0 Strict... - HTML 5 인 경우는 아마도..... - DOCTYPE 이 없는 형태..? CSS 가 생각만큼 쉽게 적용되지 않아요.. ㅠㅜ... DOCTYPE 은 아래 URL 참조http://blog.naver.com/n..
jQuery 플러그인, Vanity. 슬라이더, 탭, 팁, 페이지, 스팟라잇 등등 2013년도 jQuery 프러그인 60선http://designbeep.com/2013/12/13/jquery-plugins-2013/ http://vanity.enavu.com/http://www.cmsfactory.net/node/10224, placeholder 호환성 세팅(IE8, IE7)
[모음글] Type http://findfun.tistory.com/422 아래와 같이 type 을 체크할 수도 있다. $('input[name="name1"], select[name="name1"], textarea[name="name1"]').each(function(){ var t1 = this.type; if(t1=='text'){ alert(t1); }else if(t1=='hidden'){ alert(t1); }else if(t1=='radio'){ alert(t1); }else if(t1=='checkbox'){ alert(t1); }else if(t1=='image'){ alert(t1); }else if(t1=='select-one'){ alert(t1); }else if(t1=='textarea'){ al..
document ready 와 window load 의 차이 http://creator1022.tistory.com/156#comment7719602 document 는 DOM 구조를 이야기 하는 것으로,$(document).ready(function(){ // 이곳에 기술되는 내용은 DOM 구조가 메모리에 올려진 다음 바로 실행되므로, // CSS 나 JS, 이미지, iframe, 외부 URL 인용 등이 작동하기 이전에 실행될 수 있네요..}); 이에 반해서, window 는 브라우저의 모든 개체를 아우르기 때문에,$(window).load(function(){ // 이곳에 기술되는 내용은 화면에 필요한 모든 요소들이 웹브라우저 메모리에 모두 올려진 다음에 실행되므로, // CSS 나 JS, 이미지, iframe, 외부 URL 인용 등이 작동된 다음에 실행될다 ..

티스토리툴바