본문 바로가기

JavaScript

[Mobile] userAgent 에이전트를 이용한 모바일 페이지로 자동 이동 일전에 에이전트를 알아볼 수 있는 스크립트를 포스팅한적이 있는데요. "navigator.userAgent" 말이죠. 그렇다면 오늘은 이것을 이용하여 모바일 기기가 접속을 했을 때, 모바일 사이트로 바로 이동하게 하는 것을 해보도록 하겠습니다. 모든 일들이 마찬가지겠지만 이 일을 잘 해결하기 위해서는 일단 필요한 것들과 일의 과정을 정리해보면 되겠는데요. 우선 작업의 과정을 살펴보면, 1. 사이트에 접속한다. 2. 브라우저를 체크한다. 3. 에이전트에 따라서 페이지를 연결한다. 대략 이렇게 세가지 단계에 의해서 일을 처리하면 될텐데요. 그렇다면 2번째의 브라우저를 체크 하는 방법은 에이전트를 검사하는 방법을 사용하면 됩니다. navigator.userAgent 그 다음에 확인된 브라우저에 따라서 페이지를 .. 더보기
[javascript] 내가 사용하는 브라우저의 UserAgent 는 무엇일까요? 우리가 사용하는 브라우저들에는 여러가지가 있습니다. 가장 많이 사용하는 인터넷익스플로러를 비롯해서 모질라의 파이어폭스, 애플의 사파리, 구글의 크롬, 오페라 등등 또 모바일 브라우저 또한 다양하게 존재하는데요. 이 브라우저를 나타내는 것을 UserAgent 라고 합니다. 인터넷을 사용하시다가 보셨겠지만, 어떤 사이트들은 유저에이전트를 통해서 사용자에 따라 다른 페이지를 보여주기도 합니다. 단적인 예로, 모바일 브라우저로 포털 사이트를 접속했을 경우에는 똑같은 도메인을 입력하여도 모바일 브라우저에서는 모바일 사이트로 바로 접속이 됩니다. 그렇다면 내가 사용하고 있는 브라우저의 UserAgent 를 볼 수있는 방법을 알아보겠습니다. 아주 간단한 코드 한줄로 모든 것이 해결 가능한데요. navigator.us.. 더보기
[jQuery] jQuery를 이용한 동적이 사이드메뉴 (동적메뉴) jQuery를 사용하여 동적 메뉴를 만들어보았습니다. 나라디자인의 포스트를 참고하여 약간의 수정을 통해 제작하였습니다. 상위메뉴를 클릭하면 하위메뉴가 미끄러져 나옵니다. 이런 간단한 애니메이션이 제공되니 이제는 꼭 플래시를 사용하지 않아도 될 것 같다는 생각이 드네요. 아직은 완벽하지 않지만 사용하면서 약간 수정을 해준다면 정말 유용하게 쓰일 수 있을것 같네요. 더보기
[jQuery] jQuery를 이용한 레이어 팝업 jQuery를 이용하여 레이어 팝업을 작업해 보았습니다. 접근성에는 약간 안맞는 것 같지만 여러모로 쓸모는 많은 것 같습니다. 뜨는 창을 position:absolute; 와 left:50%; top:50%; 를 이용하여 가운데 배치하였고 jQuery를 이용하여 앨리먼트의 높이와 넓이를 가져와서 컨텐츠의 크기가 어떻게 되어도 항상 가운데에 위치하게 작업하였습니다. 다만 안쪽에 들어오는 컨텐츠에 width 값을 고정을 준다면 더 안정적으로 돌아갈 것 같습니다. jQuery의 fadeIn() 과 fadeOut() 을 이용하여 좀더 예쁘게 꾸며보았습니다. 더보기
[Javascript] location 객체에 대한 생각 location 객체는 현재 문서의 URL과 관련된 정보를 가지고 있습니다. location 객체는 window 객체의 하위 객체지만 window 객첵를 생략하고 사용할 수 있습니다. 혹시 프레임을 사용된 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 Frames 객체를 이용합니다. 기본형태는 이렇습니다. location.속성 혹은 메소드 location.속성 = 지정값; location 객체의 속성 속성 설명 href 페이지의 URL 전체 정보를 반환합니다. URL을 지정하여 페이지를 이동할 수도 있습니다. protocol : (콜론)을 포함하는 http 나 ftp 등의 프로토콜 정보를 반환합니다. hostname 호스트의 이름과 포트번호를 반환합니다. pathname.. 더보기
[jQuery] CDN : Contents Delivery Network for jQuery (제이쿼리 코드 서버) - 라이브러리를 불러와 사용하는 법 jQuery는 정말 좋은 라이브러리 같습니다. 위의 그림에서 볼 수 있듯이 작은 용랼으로 CSS3를 준수하고 크로스브라우징을 거의 완벽하게 구현해줍니다. CSS 스타일링을 비롯해 약간의 애니메이션까지 구현할 수 있으니 정말 금상첨화 입니다. 일단 이러한 jQuery를 사용하기 위에서는 문서상단에 이 라이브러리를 불러와야 하는데요. 물론 파일을 받아서 자신이 사용하고자 하는 서버에 올려 사용할 수도 있지만. CDN(Contents Delivery Network)이란게 있더라구요. 그래서 오늘은 jQuery CDN Host 에 대해 알아볼까 합니다. 1. jQuery CDN http://code.jquery.com/jquery-1.4.2.min.js (Minified version) http://code.j.. 더보기
[jQuery] jQuery를 이용한 이미지의 마우스 오버 작업을 하다보면 이미지에 마우스오버 효과를 줘야 할 때가 많은데, 일일히 onmouseover 와 onmouseout 을 써서 따로 지정해주는 것도 참 일이다. 일단 코드가 길어져서 가독성에 떨어지게 되고 파일의 갯수가 많다면,,, 음,,, 용량도 커지지 않을까? 그리고 따로 파일마다 id 를 준다거나 각각 함수를 만들어서 사용하는 것도 정말 번거로운 일이다. 이 모든 것을 jQuery가 해결해주는 듯 싶다. 사용법을 이야기 해볼까? 우선 jQuery 를 로드해야 한다. 그 다음에는 아래의 코드를 모든 페이지에서 동작하게 한다. 이미지의 네이밍을 잘 해야 하는데,, 파일명 맨 뒤에 _(언더바)를 붙이고 오버되었을때 "on" 아웃되었을 때 "off" 라고 해서 이름을 설정해야 한다. 예를 들자면, imag.. 더보기
[Javascript] offsetHeight, cilentHeight, scrollHeight 의 비교 1. element.offsetHeight, element.offsetWidth - W3C 권고안이 아님 (MSIE's DHTML Object Moldel) - element 의 border. 수직/수평 padding. css width 를 포함한 너비 or 높이 (즉, 화면을 봤을 때 보여지는 엘리먼트의 크기) 2. element.clientHeight, element.clientWidth - W3C 표준 아님 (MSIE's DHTML Object Moldel) - element 의 border 를 뺀 안쪽의 너비 or 높이 (즉, 화면에서 테두리를 뺀 엘리먼트의 안쪽의 크기) 3. element.scrollHeight, element.scrollWidth - W3C 권고안 아님 (MSIE's DHTM.. 더보기
반응형

티스토리툴바