이 블로그에 업데이트되는 모든 레퍼런스는 개인적인 스터디의 결과물이며,
더 나은 마크업및 스크립트의 작성방식이 존재할 수 있습니다.
해당내용 참고시 주의 부탁드립니다.

자세한 내용은 예제화면을 확인하시면 됩니다.

해당 예제는 IE 8이하 버전, 크롬 9.0 버전, 사파리 5.0 버전, 파이어폭스 6 버전, Opera 11버전에서 테스트 완료되었으며
w3c^{The World Wide Web Consortium}의 표준안을 준수하여 마크업 하였습니다. Check the markup

예제보기: http://songee.ly.lv/Reference/PagingGallery/

이 블로그에 업데이트되는 모든 레퍼런스는 개인적인 스터디의 결과물이며,
더 나은 마크업및 스크립트의 작성방식이 존재할 수 있습니다.
해당내용 참고시 주의 부탁드립니다.

자세한 내용은 예제화면을 확인하시면 됩니다.

해당 예제는 IE 8이하 버전, 크롬 9.0 버전, 사파리 5.0 버전, 파이어폭스 4 버전, Opera 11버전에서 테스트 완료되었으며
w3c^{The World Wide Web Consortium}의 표준안을 준수하여 마크업 하였습니다. Check the markup

예제보기: http://songee.ly.lv/Reference/RollingGallery/

그런데 최근, jQuery가 1.5.x 버전으로 업데이트 되면서(현재는 1.6.2버전) 해당 플러그인이 오류가 나서 사용불가능한 상태가 되었습니다.
해당 오류는 *.png를 서치하는 라인에 싱글 혹은 더블 쿼터가 없어서 생긴 것입니다.

관련 스레드: http://forum.jquery.com/topic/error-after-upgrade-to-jquery-1-5-in-img-src-new-png

이에, 해당 부분을 수정하여 사용 중입니다.
jquery.pngFix.js 사용시 해당 부분 참고하세요.
- jquery.pngFix.js 파일 다운로드

참고: 호이♡님의 포스팅

이 글에서 이야기 할 것은 네이버나 다음처럼 모바일 디바이스로 웹페이지에 접속시 해당 내용을 체크하여 원하는 url로 페이지를 리다이렉트 시켜주는 소스입니다.

var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');
for (var word in mobileKeyWords){
	if(navigator.userAgent.match(mobileKeyWords[word] !=null) {
		location.href = "http://";
		break;
	}
}

해당 소스는 이 글에서 그대로 가져온 것입니다.

아래 나열된 소스를 <script></script> 사이에 넣어줍니다.

//center popup position
function popWin(url,wname,w,h,ptype,t,l) {
	var pWin, tVal, lVal;
	if (t == "c") {
		lVal = (screen.availWidth - w) / 2;
		tVal = (screen.availHeight - h) / 2;
	}
	else {
		tVal = (t!=null)?t:0;
		lVal = (l!=null)?l:0;
	}

	var popOpt = "width="+w+"px,height="+h+"px, top="+tVal+", left="+lVal;
	if(ptype == 0)
		popOpt += ",scrollbars=no";

	if(ptype == 1)
		popOpt += ",scrollbars=yes";

	if(ptype == 2)
		popOpt += ",scrollbars=yes,resizable=yes";

	pWin = window.open(url,wname,popOpt);
//	pWin.focus();

	return pWin;
}

그리고, 사용하고 싶은 팝업 버튼에 아래의 예를 참고하셔서 해당 스크립트를 넣어주면 됩니다.

popWin('url', 'name', width, height, 0, 'c');

유용하게 사용하세요.

활성화된 날짜는 탭키로 접근이 가능하도록 <button type="button">으로 퍼블리싱 하였습니다.

자세한 내용은 예제화면을 확인하시면 됩니다.

해당 예제는 IE 9이하 버전, 크롬 9.0 버전, 파이어폭스 4 버전, Opera 11버전에서 테스트 완료되었습니다.

예제보기: http://songee.ly.lv/Reference/GetMouseOffset/

웹 페이지에서 텍스트 인풋박스 <input type="text"> 를 출력할 때 보통 인풋박스의 옆에 Guide Text를 명시하여 퍼블리싱을 하곤 합니다.

하지만, 모바일 기기의 스크린은 일반적인 모니터보단 훨씬 작기때문에, 공간 절약이 필요할 것 같아요.
예전엔 아래의 예와 비슷하게 출력(현재 이 블로그의 댓글 입력폼이나 검색폼에서도 jQuery를 활용하여 퍼블리싱되어 있음)하여 Hint Text를 보여주고 싶을 경우 JS를 활용해야 하였습니다만, html5에서 정식으로 지원하는 placeholder 태그로 간단하게 같은 효과를 낼 수 있습니다.

<input type="text" placeholder="아이디" />

* 해당 태그는 html5를 지원하지 않는 브라우저(ie9 이하버전 등)에선 표현되지 않습니다.

출처: http://slides.html5rocks.com/#new-form-types

*현재 완벽하게 구현된 상태는 아니며 마우스오버후 드러나는 왼쪽 메뉴타이틀의 퍼포먼스를 마저 구현할 예정입니다.

현재 CJ사이트의 경우, 해당 영역이 테이블로 퍼블리싱 되어있고 제가 퍼블리싱하는 방향과는 많은 차이가 있어
퍼포먼스만 비슷하게 만들어 보았구요. 마크업 구조는 상이합니다.
cj 기업사이트의 경우 GNB 내부 소메뉴가 <table>로 마크업 되어있으나,
아래의 예제는 HTML5 서식에서 새롭게 추가된 태그(nav, menu, section 사용)를 사용하여 마크업 되어 있습니다.
구조를 상이하게 마크업한 이유는, <table> 태그는 메뉴를 표현하기에 어울리지 않는다고 판단하였기 때문입니다.

해당 예제는 IE 8 이하 버전, 크롬 9.0 버전, 파이어폭스 3.6 버전, Opera 11버전에서 테스트 완료되었습니다.

예제보기:http://songee.ly.lv/Reference/HoverNavigation/

text-overflow: ellipsis for firefox-rikkertkoppes.com Posting을 소개합니다.

.ellipsis {
  overflow:hidden;
  white-space:nowrap;
  text-overflow: ellipsis;
  -moz-binding: url('ellipsis.xml#ellipsis');
}

그리고, xml파일을 하나 생성하여 아래의 코드를 입력하고 저장합니다.(위의 css코드엔 ellipsis.xml 라고 지정되어있습니다.)

< ?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children /></xul:description>
    </content>
  </binding>
</bindings>

해당 내용은 firefox 2.x 버전 이상에서 지원됩니다.

참고글: 긴 문자열 css로 자르기 by SBSi Designer

http://mediaqueri.es/

디바이스별 미디어 쿼리 정리

속성으로 구분

• 스마트폰 (가로/세로):
  @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
  }
• 스마트폰 (가로):
  @media only screen and (min-width : 321px) {
  /* Styles */
  }
• 스마트폰 (세로):
  @media only screen and (max-width : 320px) {
  /* Styles */
  }
• iPad (가로/세로):
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
  }
• iPad (가로):
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
  }
• iPad (세로):
  @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
  }
• 데스크탑 브라우저 (가로):
  @media only screen and (min-width : 1224px) {
  /* Styles */
  }
• 큰 모니터:
  @media only screen and (min-width : 1824px) {
  /* Styles */
  }
• iPhone4와 같은 높은 해상도:
  @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  }

파일로 구분

• 스마트폰 (가로/세로):
  <link rel="stylesheet" href="smartphone.css"
  media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">
• 스마트폰 (가로):
  <link rel="stylesheet" href="smartphone-landscape.css"
  media="only screen and (min-width : 321px)">
• 스마트폰 (세로):
  <link rel="stylesheet" href="smartphone-portrait.css"
  media="only screen and (max-width : 320px)">
• iPad (가로/세로):
  <link rel="stylesheet" href="ipad.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">
• iPad (가로):
  <link rel="stylesheet" href="ipad-landscape.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)">
• iPad (세로):
  <link rel="stylesheet" href="ipad-portrait.css"
  media="only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)">
• 데스크탑 브라우저 (가로):
  <link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1224px)">
• 큰 모니터:
  <link rel="stylesheet" href="widescreen.css"
  media="only screen and (min-width : 1824px)">
• iPhone4와 같은 높은 해상도:
  <link rel="stylesheet" href="iphone4.css"
  media="only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)">

출처: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/