모바일 웹을 개발하기 위해서는 일반 컴퓨터 환경과는 약간 다르기 때문에 고려해야 할 사항들이 몇가지 있습니다. 오늘은 처음으로 모바일 웹에 대해 이야기 하고자 하는데요. 모바일 웹이 일반 웹과 다른 것 중 가장 중요한 것은 접속하는 환경적인 차이가 너무 확연하게 크다는 것입니다. 이미 웹 표준이 대두되면서 크로스브라우징 문제가 많이 있었는데요. 우리나라의 인터넷 익스플로러 기반으로 개발된 많은 웹페이지가 다른 브라우져(파이어폭스, 사파리, 크롬, 오페라 등)에서 많이 깨지게 되는 현상입니다. 그래도 그나마 그것은 비슷한 컴퓨터 환경인데 모바일 환경은 그 차원이 달라집니다. 우선 OS부터에서 매우 다양하고, 마우스가 없으며 키보드가 제한적입니다. 그리고 무엇보다 디스플레이의 해상도가 천차만별입니다. 그러한 다양한 환경을 극복하기 위해서는 일단 심플하고 어떠한 화면 해상도도 커버할 수 있는 문서를 만들어야 합니다.

1. 입력상자에서 자리수 차면 이동하기

HTML과 CSS를 이용하여 늘어나는 박스를 만들어 보았습니다. 원리를 간단히 설명 드리자면, 최대로 늘어나고자 하는 크기의 큰 이미지를 만들고 div 앨리먼트를 여러겹으로 겹쳐서 늘어나는 부분의 둥근 모서리가 들어나게 하는 방식 입니다. 말로 아무리 설명해봐야 이해가 잘 안되지요. 그렇다면 직접 한번 볼까요?


이렇게 두겹으로 마크업을 해주면 두 방향으로 늘어나는 것을 해결 할 수 있습니다. 예를 들어 "좌우" 나 "상하" 같은 두방향 말입니다. padding 을 이용하여 안에 있는 앨리먼트를 약간 밀어내어 모서리의 둥근 배경이 보이게 하는 방식입니다.


바깥쪽을 싸고 있는 div의 상단에 padding값을 주어 상단의 배경이 노출되게 하고 안쪽의 앨리먼트에 배경 이미지가 아래부터 시작하게 배치하면 위의 모서리와 아래의 모서리가 표현되게 됩니다. 그리 어렵지는 않죠?

좌우로 늘어나는 박스는 약간의 문제점이 있는데 display 속성이 inline 인 것은 컨턴츠에 따라 크기 조절이 가능하지만 height를 지정할 수가 없고, block 속성을 가지고 있는 것들은 기본적으로 100%를 차지하고 있어서 컨텐츠의 크기에 따라 width값을 조절할 수가 없습니다. 그래서 사용한 것이 float, 이 것을 사용하면 두가지 효과를 모두 낼 수 있지만 일반 앨리먼트처럼 사용하려면 조금은 까다롭겠죠?


이제 문제는 사방으로 늘어나는 박스 입니다. 좌우와 상하는 한쪽 고민하면 되지만 사방을 고려하면 머리가 아파집니다. 일단 사방의 모서리를 관리해야하기 때문에 앨리먼트를 4개를 사용하겠습니다. 사용할 수 있는 방법이 두가지가 있습니다.



자, 차이가 보이시나요? 두가이 마크업 방법이 있는데, 배경이미지를 다른곳에서도 함께 사용하여 온전한 큰 프레임 이미지 하나를 사용해야 한다면 첫번째 방법을 사용하면 되고, 그것이 아니고 이미지의 편집이 가능하다면 두번째 방법을 사용하여도 무방합니다. 직관적으로 보았을때 두번째 것이 덜 햇갈릴것으로 보입니다. 4개의 div가 순차적으로 싸고 있으니 조금은 이해가 편할듯 싶네요. 이렇게 마크업을 한다음에 CSS를 이용하여 늘어나는 박스를 만들어보면



코드를 보면 쉽게 이해가 될 것입니다. 두번째 방법에서 -24px를 사용한 이유는


이미지를 이렇게 넣었기 때문입니다. 모서리 한부분을 빼놓아 CSS sprite를 사용하여 배경이미지를 적용하였습니다. 여기 그림에서는 잘 보이지 않지만 상단과 좌측 부분은 투명하게 되어있습니다.




새 새창으로 열어서 창의 크기를 조절해보면 사방으로 늘어나는 박스를 체험해 보실 수 있습니다.

샘플페이 지 새창으로 열기

인터넷에서 서식을 작성하다 보면 인풋박스( <input type="text" /> )에 글을 쓸때, 한글을 쓰려고 하면 영문이 나오고, 영문을 쓰려고 하면 한글이 나오고 해서 좀 답답할 때가 있을것이라 생각합니다. (저만 그런건가?) 아무튼, 그럴때 사용자를 조금만 더 생각한다면 답답하지 않고 사용하게 편할 수 있을 것 같습니다. 사용자를 배려하는 웹사이트 ㄱㄱ 출발!!

아주 간단합니다. 인풋박스를 가리키는 스타일에 "ime-mode"라는 속성을 주면 되는데요. 아래의 표를 참고하면 되겠네요.

inactive	default 로 영문모드
active	default 로 한글모드
auto	한/영 중 선택된 모드
disable	영문만을 사용할 수 있는 모드

구체적인 사용방법은 이렇습니다.


이런식으로 주면 되는데요. 뭐 어차피 스타일이기 때문에 이왕이면 스타일 시트에 주는게 낫겠지요?


이렇게 사용하면 됩니다. "참~ 쉽죠잉~?" 그런데 매우 안타까운 점은 인터넷익스플로러에서만 되는 사실! 으악... 매우 서글프네요. 그래도 익스플로러를 대부분 사용하니 나름 다수의 사용자를 배려할 수 있겠지요? 아무튼 더 좋은 방법이 있다면 댓글이나 알려주시면 감사하겠습니다. ^^

작은 배려로 사용하기 더 편하게!

작업을 하다보면 텍스트가 정해진 width를 넘어가는 경우 어떻게 처리해야 하나 고민이 될 때가 있습니다. 그럴 때는 상황에 따라서 이 것들을 사용해서 해결해주면 좋을 듯 합니다.

word-break

word-break 는 말 그대로 단어를 자르는 겁니다. 기복적으로 줄이 넘어갈 때는 단어단위로 잘려서 넘어가게 되어 있습니다. 그래서 띄어 쓰기를 하지 않고 글을 쓴다면 한 단어로 인식하여서 width 를 넘어가도 줄바꿈이 되지 않습니다. 그럴 때 word-break 를 사용해주면 줄바꿈이 가능하게 됩니다.



위와 같은 속성을 주게되면 위의 그림의 아래 부분과 같이 단어 중간에서도 줄바꿈이 가능하게 됩니다. 위의 그림이 잘 이해가 가지 않는다면 이 그림을 보시면 단번에 이해가 가실 것 입니다.


단어의 중간에서 줄바꿈이 되는 효과입니다. 이 것의 반대 속성은 nowrap, keep-all 등을 주면 된다는데 제가 실험해본 결과 잘 안되는 것 같습니다. 그래서 이번에 같이 소개할 white-space 를 사용하시면 됩니다.

white-space

white-space는 여러가지 값이 있는데, 정리를 해보자면 이렇습니다.

inherit	말그대로 상속 받는 것
normal	일반적인 것, default
nowrap	줄바꿈을 하지 않는다
pre	<pre>태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line	마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap	pre-line 과 비슷

말로 길게 설명해 무엇합니까? 그렇다면 눈으로 확인해 봅시다.

HTML 마크업은 다음과 같이 했습니다. 줄바꿈은 왼쪽에 보이는 라인넘버에서 알 수 있듯이 2번 하였습니다. 다시말해 단락이 3개라는 뜻 입니다. 스타일은  넓이를 400px 을 주고 사방으로 padding 을 10px 씩 주었습니다.


일반적으로 랜더링하면 단어 단위로 줄바꿈이 된 형태로 나오게 되는데 여기에서 속서을 하나씩 주면 기능을 한 눈에 알 수 있습니다.

우선 inherit 은 상속되는 것이므로 넘어가고 (IE8에는 인식을 못한다고 합니다.) normal 은 기본인데 Original 과 동일하다고 보시면 됩니다. nowrap 속성을 주게되면 줄바꿈이 되지 않습니다.


그리고 pre 속성은 <pre> 태그와 동일한 역할을 합니다. 마크업에서 줄바꿈 (앤터) 해준 것을 적용해주는 것인데요, 여기서는 두번 줄바꿈을 하였기 때문에 3 단락으로 나뉘어져 있습니다. 그리고 width 를 넘어가는 텍스틑는 줄바꿈이 되지 않습니다.


다음으로 pre-line 속성을 주게되면 pre를 준 것과 같이 마크업에서 줄바꿈 한 부분에서도 줄바꿈이 되고, width 값을 넘어가는 부분에 대하여 줄바꿈이 됩니다.


per-wrap 속성을 주면 pre-line 을 적용해준 것과 동일한 결과가 나오는데 구체적인 차이는 잘 모르겠습니다. 자세한 내용은 w3cschool 을 참조해 보시는 것이 더 좋을 듯 합니다.