input 썸네일형 리스트형 [Mobile] 모바일웹, 아이폰에서 인풋박스 내 마음대로 바꾸기 webkit 기반의 iPhone은 인풋박스를 자기 마음대로 표현하는 경향이 있습니다. 스타일시트로 보더와 색상을 조정해도 마음대로 되지 않는데요, 오늘은 아이폰에서 보여지는 인풋박스를 마음대로 요리하는 방법에 대해 이야기 하겠습니다. 일단 기본적으로 style을 width:200px; height:30px; border:1px solid #00f; 정도만 주었습니다. 일반 PC에서는 스타일을 준대로 잘 나올텐데요. 아이폰의 사파리로 같은 페이지를 보았을 경우에는 이렇게 보이게 됩니다. 흠,,,,, 일단 모서리가 동그랗게 되어있고, 상단에 그림자가 있는데요. 이래가지곤 원하는 디자인을 만들 수 없겠죠? 주면의 디자인과 어울리지 않을 수도 있고요. 그렇다면 이것을 반듯하게 만들어 보겠습니다. 스타일시트에 다.. 더보기 [Mobile] 모바일웹, input type 에 따른 아이폰 키보드의 변화 아이폰으로 인터넷을 하다보면은 여러가지 폼에다가 입력을 해야 할 경우도 많습니다. 아이폰을 사용해보신 분들은 아시겠지만 상황에 따라서 다른 키보드가 뜨는데요. 오늘은 input 박스의 type에 따라 다르게 뜨는 키보드의 모양의 분석해 보겠습니다. 우선 기본적으로 나오는 type=text 일 경우에는 다음과 같은 키보드가 나옵니다. text일 경우에는 기본적인 키보트가 뜹니다. 인풋박스들이 태그에 쌓여있기 때문에 아래에는 "go" 라고 버튼이 뜹니다. 그렇다면 다음에 있는 땡땡땡 부분은 다들 아시다시피 password 부분입니다. 그 곳에 포커스가 가게 되면, 위와 같은 키보드가 돌출하게 되는데, 한가지 다른 점은 처음에 입력하는 값을 대문자로 입력하게 해주는, shift가 안눌려있습니다. 다음은 이메일.. 더보기 인풋박스(input) 기본입력 설정 ime-mode 인터넷에서 서식을 작성하다 보면 인풋박스( )에 글을 쓸때, 한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다. (저만 그런건가?) 아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다. 사용자를 배려하는 웹사이트 ㄱㄱ 출발!! 아주 간단합니다. 인풋박스를 가리키는 스타일에 "ime-mode"라는 속성을 주면 되는데요. 아래의 표를 참고하면 되겠네요. inactive default 로 영문모드 active default 로 한글모드 auto 한/영 중 선택된 모드 disable 영문만을 사용할 수 있는 모드 구체적인 사용방법은 이렇습니다. 이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이.. 더보기 이전 1 다음
