정말 오랜만에 쓰는 포스트이네요. 어제이지요? 어제 파이어폭스의 새로운 버전인 파이어폭스4가 세상에 나왔습니다. 출시 한지 얼마 되지 않아 엄청난 다운로드를 기록해서 이슈가 되었는데요. 더 빨라지고 더 좋아졌다고는 하는데 그것은 얼마만큼 써 봐야 알 수 있는 이야기 같습니다. 오늘 할 이야기는 최근에 있었던 파이어폭스의 줄바꿈에 대한 이슈에 대해서 입니다. 일전에 포스트 했던 [CSS] 텍스트 줄바꿈 처리 word-break, white-space 의 내용에서 이야기를 했던 내용이긴 한데요. 궁금하시면 먼저 대강 살펴보시고 오시는 것도 좋을 것 같습니다.

일을 하다보면 여러가지 상황을 고려해야 하는데, 정말 상식적으로 이해가 안가는 상황까지 고려해야 하는 경우가 있습니다. 저의 이번 경우는 설문 만드는 폼을 작업하는데, 알파벳이나 숫자를 띄어쓰지 않고 죽~ 쓰는 경우에 줄바꿈이 안되는 현상에 대처하였습니다. 뭐 설문을 만드는 영역이 작으면 이것은 당연한 일이긴 한데 엄청 큰 영역인데도 불구하고 엄청난 길이의 한단어 (숫자를 띄지 않고 계속 쓰는 것) 가 말썽을 피웠습니다.


파이어폭스에서는 word-break 속성이 적용되지 않습니다. 오직 Internet Explorer용 인데요. Firefox 에서 줄바꿈을 하기 위해서는 다음의 코드를 사용하면 됩니다.


{
white-space: pre-wrap; /* CSS3*/
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-all; /* Internet Explorer 5.5+ */ 
}


이런 방법을 사용하면 거의 모든 브라우져에서 줄바꿈을 할 수 있습니다. 내용이 좀 많아요. 줄바꿈 하나 하는데 이렇게 많은 코드를 추가하기는 좀 안타깝긴 한데요. 그렇지만 몇몇가지 브라우저를 고려해서 몇가지를 축약해서 사용한다면 좀 더 깔끔하게 사용할 수 있겠죠? 참고들 하시길.
저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
요즘에 국내에도 아이폰이 개통되고 또 이번에 아이폰4 또한 나오게 되면서 국내에서도 애플의 인지도가 많이 높아지고 있습니다. 또한 맥을 쓰시는 분들도 많고 그로인해 Webkit 기반의 브라우저인 사파리를 사용하시는 분들 또한 많아졌습니다. 빠르다고 소문이 나있는 사파리와 크롬을 다들 써보셨을 텐데요. iframe을 사용할 때 이상하게 크롬과 사파리에서는 스크롤바가 나오는 현상을 보실 수 있었을 것입니다. 분명히 iframe에 overflow:hidden; 이라는 속성을 주었는데도 스크롤바는 사라지지 않는 것을 볼 수 있습니다. 그래서 검색을 해보았습니다. 그랬더니 이런 결과가 나왔는데요.

I have an iframe on www.mydomain.com that points to support.mydomain.com (which is a CNAME to a foreign domain). I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage. On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out). How do I hide the scrollbar for webkit browsers?

 

overflow:hidden; ???

 

it seems like styling the HTML element to be overflow:hidden inside of a style tag doesn't work -- you need to put it in as a style attribute for the HTML tag (even though that's not valid). So... This: <html style="overflow: hidden;"> <head></head> <body>stuff</body> </html> Not this: <html> <head><style type="text/css"> html { overflow:hidden; } </style></head> <body>stuff</body> </html>


iframe에서 불러오는 파일의 html에 overflow:hidden; 속성을 주어야 한답니다. 그렇게 적용했더니 훌륭하게 작동하는 군요. 혹시나 이 문제 때문에 고생하신 분들은 이 방법을 사용해 보심이 좋을 것 같습니다..


저작자 표시 동일 조건 변경 허락
신고
Posted by htglss

HTML5

Internet World/HTML/CSS 2010.07.20 17:49
요즘 이슈를 일으키며 큰 주목을 받고 있는 HTML5, 웹의 새로운 전환점이 될지도 모르는 HTML5는 도대체 무엇일까요? 여기에 플래시와 HTML5를 비교하는 데이터가 나와있습니다. HTML5 와 플래시의 행보가 기대되는데요. 둘중에 어떤 것이 살아남게 될지... 개인적인 생각으로는 모션이 정말 강조된 부분에는 플래시를, 꼭 그렇지 않은 곳에는 HTML5가 주류를 이루지 않을까 싶네요. 아무튼 가장 중요한 것은 브라우저 지원현황. 으윽....... 하지만 현재의 대세는 HTML5. 계속 관심이 가는 군요.


저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
TAG flash, HTML5
요즘 많은 분들이 트위터를 사용하고 있습니다. SNS의 대표적인 서비스인데요. 일반 개인도, 유명인도, 기업도 트위터를 통해 다른 사람들과 소통하려고 하고 있습니다. 트위터는 기존의 방식과는 조금다른 완전 개방적인 구조를 가지고 있고, (보호 설정을 하지 않는다면) 팔로잉이라는 조금은 색다른 방식으로 여러 사람들이 네트워크로 연결이 되는데요. 그리고 이름을 통해 해당하는 사람을 부를 수도 있습니다. 아무튼 조금만 적응하게 되면 사용하기 쉬운 방법과 스파트폰을 통한 어플리케이션의 확대로 더 많은 사람들이 이용하고 있는데요. 그래서 그런지 트위터에 접속할 때 많이 느리거나 접속에 실패하는 경우가 종종 있습니다. 트위터를 좀 검색해야 할 때 그러면 조금은 난감한데요. 트위터에 접속이 되지 않을 때는 이런 화면이 뜨게 됩니다. 트위터 "실패고래" 라고들 하는데요.


그림과 같이 역시 고래가 나오네요. 고래를 트위터 새(종류는 잘...ㅋ)가 들고가는 형태입니다.

HTML5 와 CSS3 를 열심히 하는 사람들이 이것을 보고 이미지를 사용하지 않는 CSS3를 통해 구현하였는데요. 뭐 거의 다르지가 않습니다.


어때요? 그렇듯 하죠? 거의 다른게 없습니다. 뭐 약간의 색상차이? ㅋ 아무튼 이것이 전부가 아니라 HTML5 와 CSS3 를 잘 지원하는 브라우저를 통해 이것을 열어보면 화면이 움직이는 것을 보실 수 있습니다.



한가지 안타까운 점은 많은 사람들이 사용하는 인터넷 익스플로러에서는 이 예쁜 고래가 이렇게 뜨게 되는데요.


웁스....

여러분의 브라우저에서는 어떻게 뜨시나요??


저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
열심히 썼다가 죄댜 날려먹었습니다. ㅜㅜ

새로운 기술은 우리의 삶을 더 편안하게 해줍니다. 특히 기술 부분에서의 새로운 것은 만드는 사람들로 하여금 더 쉽고 편하고, 사용하는 사람에게는 더 많고 더 멋진 경험을 할 수 있게 해줍니다. 그래서 저는 항상 새로운 것을 좋아합니다. 새로운 것 그것 뭐 적응하는데도 힘들고, 모두 지원하지도 않는데 왜 사용하느냐는 사람들도 있지만, 저는 그 단점들 보다는 새로운 것이 주는 효율성 기능성 등의 많은 혜택이 더 많다고 생각하기에 저는 새로운 것을 좋아합니다. HTML5 CSS3 도 마찬가지 입니다. 지금은 모든 브라우저에서 지원하지는 않지만, 사용함으로 인해서 정말 많은 효율성을 얻을 수 있었습니다. 예를 들어 <div> 한개를 가지고 크그에 따라 움직이는 박스를 만들 수 있었습니다. (보통 이것을 만들려면 4개 정도의 <div>가 필요합니다.)

어디 그렇다면 CSS3 가 얼마나 잘 표현이 되는지 테스트 한번 해볼까요?


이것은 현재 진행중인 해피렌트카 모바일사이트에 들어가는 프레임입니다. 제가 사용하고 있는 브라우저들에 CSS3 테스트를 해보았는데요. 현재 깔려있는데 세가지, 사파리, 파이어폭스, 크롬에서 모두 잘 표현되고 있습니다. 역시 선진브라우져(?)답게 멋지게 푠현해주었는데요. 그림에서 알 수 있듯이 8개의 이미지를 사용하여 복잡한 배경을 만들어보았는데요. (뭐 이미지의 개수를 더 작게 만들 수는 있지만 이것은 테스트이므로 개수를 최대한 늘렸습니다.)

내일 사파리5가 발표하고, 하루빨리 모든 브라우저에서 HTML5와 CSS3를 지원하였으면 좋겠습니다.
저작자 표시 동일 조건 변경 허락
신고

'Internet World > HTML/CSS' 카테고리의 다른 글

HTML5  (2) 2010.07.20
[HTML5/CSS3] 트위터 실패 고래  (0) 2010.07.01
CSS3 지원하는 브라우져  (0) 2010.06.07
[HTML5] HTML5 로 만든 사파리 Welcom 동영상  (0) 2010.05.28
[HTML] DTD DOCTYPE 과 HTML5  (1) 2010.05.28
[HTML/CSS] 늘어나는 박스 만들기  (0) 2010.05.25
Posted by htglss
사파리4를 인스톨하고 처음 실해했을 때 나오는 Welcome 영상입니다. HTML5로 만들어 졌다고 하는데요.



사파리4를 설치해야 보실 수 있습니다.
저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
HTML 문서의 표준을 지정하기 위해 선언해주어야 하는 DTD DOCTYPE 그것이 무엇일까요? DTD 는 Document Type Definition 문서의 타입을 정의하는 것 입니다. 보통 독타입에는 몇가지가 있는데요.

Strict - W3C가 의도했던 문서 타입 (엄격한 규격)
Strict 타입은 W3C가 스타일시트 사용을 장려하기 위해 단계적으로 사라질 표현(presentation)에 관한 태그와 속성을 배제한 문서 타입입니다. 제작자는 가능하다면 strict 타입을 사용해야 한다는데요.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Transitional - 기존에 만들어진 문서들과의 호환성을 위해서 만들어짐 (과도적인 규격)
과거의 모든 문서들을 Strict DTD에 맞게 바꾸려면 엄청난 변화가 필요하므로 그 중간 단계로 Transitional DTD를 설정하였습니다. strict 타입이 불가피하게 표현을 담당하는 속성이 필요할 경우에는 Transitional 타입을 사용하면 됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Frameset - Transitional DTD 기반 위에 프레임 지원 (프레임 사용 가능)
Transitional DTD 기반 위에 프레임 지원을 위한 태그와 속성을 추가한 문서 타입입니다. 그러므로 문서의 구조화에 있어서는 Transitional 과 동일하게 취급됩니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


자세한 내용은 자세한 내용은 역시 W3C에 가보면 잘 나와있겠죠? 그리고 naradesign 에 가보셔도 잘 나와있습니다.


그렇다면 이제 HTML5의 DTD에 대해서 알아볼까요? HTML5의 DTD는 바로 이렇습니다. 모바일 웹의 인기가 증가하게 되면서 리소스를 많이 차지하는 플래시보다는 어떤 환경에서도 잘 나올 수 있는 HTML5에 관심이 집중되고 있는데요. HTML5의 DOCTYPE은 아주 간단합니다.

<!DOCTYPE html>

와우~ 정말 간단네요. 단적으로 애플사이트에 공개된 HTML5를 통해 아이패드를 완벽하게 지원하는 미국 사이트들은 매우 많으며 지금도 계속해서 그 수가 증가하고 있습니다. 아직은 확실히 된것은 아니지만 Flash와 HTML5 도대체 어떤것이 인터넷세상을 주도할지 관심이 집중 되네요.


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

<div class="box_v"><div class="box_v">여기에 내용이 들어갑니다.</div></div>

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

div.box_v {width:400px; background:url(box_v.gif) no-repeat left top; padding:20px 0 0 0;}
div.box_v div.box_v {width:360px; background:url(box_v.gif) no-repeat left bottom; padding:0 20px 20px;}

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

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


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

<div class="box_f"><div class="frame1"></div><div class="frame2"><div class="frame3">이곳에 컨텐츠를 입력하면 됩니다.</div></div></div>

<div class="box_f2"><div class="frame1"><div class="frame2"><div class="frame3">이곳에 컨텐츠를 입력하면 됩니다.</div></div></div></div>

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

div.box_f {float:left; background:url(box_f.gif) no-repeat right top;}
div.box_f div.frame1 {background:url(box_f.gif) no-repeat left top; padding:24px 0 0 0; margin:0 24px 0 0;}
div.box_f div.frame2 {background:url(box_f.gif) no-repeat right bottom; padding:0 24px 0 0;}
div.box_f div.frame3 {background:url(box_f.gif) no-repeat left bottom; padding:0 0 24px 24px;}

div.box_f2 {float:left; background:url(box_f2.gif) no-repeat right -24px;}
div.box_f2 div.frame1 {background:url(box_f2.gif) no-repeat left top; padding:24px 0 0 0;}
div.box_f2 div.frame2 {background:url(box_f2.gif) no-repeat right bottom; padding:0 24px 0 0;}
div.box_f2 div.frame3 {background:url(box_f2.gif) no-repeat -24px bottom; padding:0 0 24px 24px;}

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


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




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

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

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

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

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

<input type="text" style="ime-mode:inactive;" />

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

<style type="text/css">
input.han {ime-mode:active;}
</style>

<input type="text" class="han" />

이렇게 사용하면 됩니다. "참~ 쉽죠잉~?"

이미지출처 : naradesign.net/ouif

참고적으로 위의 그림에서 보면 아이디와 이메일 부분은 영문이 기본이고 영문만 사용할 수 있게 하면 되고, 이름과 닉네임 부분에는 한글을 기본입력으로 해놓으면 사용자가 더 편할 것 같습니다.

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

작은 배려로 사용하기 더 편하게!
저작자 표시 비영리 동일 조건 변경 허락
신고
Posted by htglss

애플의 CEO 스티브잡스가 강조하던 HTML5 를 이용하여 제작된 페이지 이다.

http://9elements.com/io/projects/html5/canvas/

인터넷 익스플로러를 제외한 파이어폭스, 사파리, 오페라, 크롬 등의 최신버전에서 모두 지원한다. 이런 것 들을 보면 정말 플래시의 설자리는 좁아지는 것 같다.
저작자 표시
신고
Posted by htglss