본문 바로가기

Internet World

[Mobile] 아이폰 사파리에서의 전화번호 링크 요즘 아이폰을 시발점으로 맥라이프를 꿈꾸고 있다. 아이폰 사파리에서 웹 서핑을 하다보면 자기도 나름 폰이라고 전화번호와 비슷하게 생긴것에는 자동으로 링크가 걸려 그것을 누르면 전화가 걸린다. 어찌보면 똑똑하고 좋으나 웹사이트 개발하는 입장에서 보면 좀 반갑지 않은 기능인지도 모르겠다. 이런 상황을 극복하기 위한 방법!! 위와 같은 매타값을 주게 된면, 아이폰의 사파리가 자기 마음대로 링크를 만들지 않는다. 헌데, 혹시나 전화 바로거는 링크를 만들일이 있지 않을까? 물론 그럴 때를 대비해서 요런 방법이 존재한다. 전화를 거는 링크 위와 같이 태그를 걸어주면 아이폰 사파리에서 바로 전화를 거는 링크를 만들 수 있다. ^^ 쓰면 쓸수록 아이폰, 이건 참 물건인 것 같다. 허허허 더보기
[CSS] 쓰고 싶지 않지만,,,,, IE 버전별 핵 1. Star 핵 : IE6, IE7 일반적으로 *뒤에 스타일을 적어주면 IE6 과 7에서만 적용이 된다. .selector {margin:100px; *margin:90px;} 2. _(언더바) 핵 : IE6 정말 사용할 일이 많은 언더바 핵, 크로스브라우징 작업을 하다보면 정말로 쓸일이 많은 아주아주 유용한 핵이다. 크로스브라우징 하려면 절대적으로 꼭 알아야 할 핵 .selector {margin:100px; _margin:90px;} 3. 응용편 위의 두가지를 이용하면 가각의 브라우져의 구미에 맞게 알맞은 핵을 적용할 수 있다. 우선 호환모드로 작동하지 않게 위의 meta값을 적용해주고 .selector {margin:100px; *margin:90px; _margin:110px;} 위와 같이 스타.. 더보기
[javascript] 마우스 클릭한 위치 window.event.clientX window.event.clientY 더보기
[jQuery] 영역의 크기 구하기 동적인 UI 구성하기 위하여, 엘리먼트 영역의 크기를 구하는 과정이 반드시 필요하다. Javascript 에서는 clientHeight, offsetHeight 등을 사용하였지만 jQuery에서는 또 다르다. $("element").outerHeight(); 위와 같이 작성하면 엘리먼트 영역의 높이를 구할 수 있다. 넓이 또한 마찬가지로 outerWidth()를 이용하면 된다. 혹시나 margin을 포함한 영역의 크기를 구하고 싶다면, 간단한 작업으로 가능하다. $("element").outerHeight(true); outerHeight()의 괄호 안에 true라는 값을 주면 margin을 포함한 영역의 크기를 구할 수 있게 된다. 참고적으로 outerHeight()를 쓰지 않고 그냥 height()를.. 더보기
CSS 기본기 선택자 CSS에서의 선택자의 종류는 다양하다. 하지만 주로 사용하게 되는 선택자는 3가지로 압축할 수 있다. 우선 간략하게 이야기하자면, 태그명, 클래스명 그리고 아이디를 들 수 있다. 우선 태그명은 해당 태그명을 가진 모든 앨리먼트를 선택할 때 유용하게 사용된다. 예를 들면, p {margin:0; font-size:13px;}위와 같이 사용하게되면 p라는 태그명을 가진 모든 앨리먼트에 margin과 font-size가 적용된다. 이 방법은 CSS를 초기화 할 때 사용하기 좋다. 두번째로는 클래스명인데 이 것이 가장 많이 사용하는 방법인 것 같다. 우선 다음과 같이 태그에 클래스명을 주고 또 다음과 같이 선택자를 사용해 접근할 수 있다. .selector {border:1px solid #FAA;}위와.. 더보기
[CSS] white-space 속성 white-space 정의 값 normal / pre / nowrap / inherit 초기값 normal 적용 Block level 요소들 상속 가능 백분율 사용 불가능 미디어 vicible 값설명 norma 연속 공백과 줄바꿈을 통합(정상) pre 연속 공백 통합하는 것을 방지 (원문대로) nowrap 연속 공백은 통합되지만, 줄 바꿈은 통합되지 않음 (줄바꿈 없음) inherit 부모 요소의 값을 상속하도록 지정 더보기
[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.. 더보기
Cross Browsing 의 시대 Cross Browsing 의 시대가 왔다. 이전에도 웹표준, 접근성, 크로스브라우징의 이야기는 많이 있었지만, 일반 사용자에겐 윈도우에 기본적으로 제공되는 인터넷 익스플로러가 있기에 MS의 압도적인 독과점이었다. 하지만 오랜 브라우저전쟁 끝에 이제는 윈도우 설치시 웹 브라우저를 개인이 선택하는 세상이 되었다. 사진출저 http://microsoftontheissues.com 앞으로는 윈도우 설치시 위와 같은 화면으로 웹브라우저를 선택하게 된다. 이렇게 선택하게 한다면, 소비자들은 과연 어떤 브라우저를 선택하게 될지 의문이 된다. 하지만 아마도 익스플로러의 점유율이 조금은 낮아지지 않을까 하는 생각이 든다. 하지만 이것은 유럽에 한정되어 있다는 사실,,,, http://microsoftontheissue.. 더보기
Flickr 계정에 있는 사진 연동 Tistory는 Flickr에 있는 계정을 사용할 수 있답니다. 그래서 또 해보는 테스트! 오오! 내 계정에 있는 플리커 이미지가 첨부가 되는군요, 신기합니다 ^^ 더보기
PC에서 포스팅 테스트 PC에서 포스팅을 할 경우는 어떻게 될까? 일단 아이폰에서 폰트가 적용이 안되는 부분은 스타일 시트를 잘 수정하여 해결하였다. 하지만 이미지를 올렸을 경우 모바일페이지에서 자동으로 이미지의 크기가 변하는 것으 작동하지 않았다. (내가 무언가를 잘못한건건가?) 아무튼 그래서 해보는 PC에서의 테스트!몽글몽글한 솜사탕과 같은 구름, 보고 있으면 여기에 한번 뛰어들어보고 싶은 생각이 들기도(?)한다,, 라고 말하면 사람들이 나를 이상한 사람으로 생각하려나? ㅋㅋ 아무튼 구름은 이정도 가까이서 보면 참 예쁘다. 더 가까이서 본다면 보이지도 않겠지,,,사진 이외에 다르걸 첨부해 볼까나???동영상이 모바일에서도 보일지는 의문이다.그렇다면 다음은 정보 첨부??책을 넣어볼까나?? .. 더보기

반응형