'프로그래밍/04.HTML&amp;Script' 카테고리의 글 목록 (4 Page)

'프로그래밍/04.HTML&Script'에 해당되는 글 17건

2011.02.17 [Mobile 모바일웹] input type에 따른 아이폰 키보드의 변화
2010.05.22 [Jquery] 선택자를 활용 - 스타일 변경2
2010.05.04 [HTML] HTML5 3D 데모

[Mobile 모바일웹] input type에 따른 아이폰 키보드의 변화

프로그래밍/04.HTML&Script / 2011. 2. 17. 15:42

아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다.

우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다.

text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 <form> 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다.

그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면,

위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다.

다음은 이메일인데, type을 email로 했을 경우에는 아주 친절하게도 @ 와 . 이 나오게 됩니다. 입력하기 참 쉽겠죠?

type=number 에 포커스 되었을 때는 특수문자를 눌렀을 경우와 같은 키보드가 나옵니다.

오늘의 하일라이트, type=tel 일경우에는 전화번호를 쉽게 입력할 수 있도록 전화번호 키패드가 뜨게 됩니다. 이거 정말 마음에 드네요. 주민등록번호나 전화번호를 입력할 때 사용하면 좋을 듯 합니다.

url의 경우도 email과 비슷합니다. url을 쉽게 입력할 수 있도록 /(슬래시)와 .com(닷컴)이 나오게 됩니다. 입력할 때 편하겠네요.

type=search 일 경우는 "Go" 부분이 "Search"로 변하고 나머지는 동일합니다. 다른 것들은 text와 동일하게 뜨므로 이미지는 생략하였습니다.

이런 것들을 잘 사용하면, 사용자들이 좀 더 편하게 사용할 수 있겠지요? 참, 그리고 한가지 팁은 url을 입력할 때, url을 입력하는 키보드가 나오지 않았을 경우에 닷컴을 입력하려면 특수문자 부분을 한번 갔다와야 하는데, 그렇지 않고 스페이스바를 두번 누르게 되면 점이 찍힙니다. 그런다음에 백스페이스를 한번 눌러주시고 입력해주시면 특수문자 키보드로 바꾸지 않고도 손쉽게 입력하실 수 있습니다.

출처 : http://htglss.tistory.com/74

저작자표시 비영리 변경금지

Posted by happydong

, |

[Jquery] 선택자를 활용 - 스타일 변경2

프로그래밍/04.HTML&Script / 2010. 5. 22. 18:22

제이쿼리를 활용하여 해당객체에 접근하는 방법에 대해 알아 보겠다. 아래 예제는 간단하게 원하는 객체를 찾아서 스타일을 변경하는 예제이다.

Html

<li>컴퓨터

<ul>

</ul>

</li>

<li>의류

<ul>

</ul>

</li>

<li>전자제품

<ul>

<li>주방용품

<ul>

</ul>

</li>

</ul>

</li>

</ul>

위 HTML문서는 간단한 예제를 위한 내용이며, 위 문서를 눈으로 봐도 알수있듯이 중첩된 리스트에 수직으로 정렬이 되어 있음을 알 수 있을 것이다. 이를 수평정렬로 변경하려고 한다. 미리 작성한 마크업은 건드리지 않고 CSS와 제이쿼리를 이용해서 말이다.

Style(CSS)

.horizontal

{

float:left;

list-style:none;

margin:10px;

}

위 코드는 CSS코드이며, HTML문서 내용을 수평으로 만들어줄 코드이다.

Script

$(document).ready(function () {

$('#selected_plays > li').addClass('horizontal');

});

</script>

위는 코드는 제이쿼리를 이용해서 스타일을 입히는 코드이다. 위 코드를 간단히 설명하면 $()함수 안에 있는 선택자가 의미하는 것은 selected_plays를 ID값으로 가지는 요소의 자식(> - 자식 콤비네이터) 중에서 리스트 항목(li) 찾아서, “horizontal”스타일을 입히라는 것이다.

(아래 실행 모습참고)