오랜만에 포스팅을 많이 하게 되네요. 이런건 좋지 않은데, 주기적으로 꾸준히 하는게 더 나을텐데 그게 잘은 안되네요. 약간은 어려운 감이 있습니다. 이번에 이야기 할 이야기는 iOS 사파리에서 일어나는 이야기 인데요. 원래는 이것을 '발생하는 문제'라는 표현을 썼었는데, 잘 생각해보니 이 것은 평소에 우리에게 도움을 주는 좋은 기능입니다.

아... 서론이 너무 길었죠? 그것은 바로 터치 시에 발생하는 검은 하이라이트 입니다.

이것이 무어냐 하면, iOS 사파리로 웹브라우징 시에 링크를 제대로 클릭했는가 확인할 수 있는 좋은 기능인데요. 아래 그림에서 보실 수 있습니다. 그림에서는 '미니홈피' 버튼을 터치 했을 때 오른쪽의 그림과 같이 검은 하이라이트가 생기게 됩니다. (다들 아시는 것 처럼 사파리 브라우저에서 클릭을 오래 누르고 있으면 하단에 메뉴가 나오게 되는데 이 사이에 신속하게 캡쳐를 하기위해 몇 장을 캡쳐했는지 모르겠습니다.)


하지만 이런 기능도 어떨 때는 좀 안나왔으면 하는 경우가 있을 수 있습니다. 저의 경우에는 앱 내에 들어가는 페이지를 제작하는데, 어플리케이션의 경우 터치를 눌렀을 때 발생하는 이벤트가 따로 있어서 그 디자인을 출력해야 하는데 하이라이트가 발생하면서 그 부분을 검게 가리게 되는 사태가 발생하게 되었습니다. 저와 비슷한 경우가 많이 있으실 것이라 예상됩니다. 그렇게 되면 이렇게 좋은 기능도 문제가 되는데요. 이 문제를 해결하는 방법은 아주 간단합니다. 하이라이트를 제거하고자 하는 링크에 스타일을 적용해주기만 하면 되는데요.


a { -webkit-tap-highlight-color:transparent;}


위의 속성을 원하는 링크에 주시면 해당 링크를 터치 시에 하이라이트가 나타나지 않습니다. 참 쉽네요. 이 하이라이트 속성은 또 다르게 사용할 수 있는데요. transparent 부분을 다른 컬러를 넣어서 사용하시면 하이라이트를 원하시는 컬러로 대체해서 사용하실 수 있습니다.


저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
또 정말 오랜만에 쓰게 되는 포스팅입니다. 오늘 할 이야기는 모바일 브라우져에서 CSS를 불러오는 이야기 인데요. 세로로 볼 때랑 가로로 볼 때에 다른 레이아웃을 사용하려면 어떻게 해야할까 하는 이야기 입니다.

모바일 쪽 작업을 하다보면 가로보기와 세로보기의 레이아웃을 다른게 해야할 일이 있을 때도 있습니다. 세세한 width 값을 맞춘다던가,  가로보기를 할 때 넓어진 width 에 무언가를 넣을 경우도 생길 수 있을 것입니다. 이럴때 여러가지로 고민을 하게 되는데, 여러가지 방법들 중에 CSS를 다르게 불러와 보는 것도 하나의 좋은 방법일 수도 있습니다.


<link rel="stylesheet" type="text/css" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">


위와 같은 방식으로 사용하면 디바이스를 세로로 볼 때는 portrait.css 를 불러오고, 가로로 볼 때는 landscape.css 를 불러오게 됩니다. 그런데 이렇게 사용하게 되면 portrait 와 landscape 의 경우 두가지 CSS를 제작해야하고 만약에 세로와 가로의 레이아웃이 거의 비슷하고 일정 부분만 다른 경우 이렇게 사용하면 동일한 부분의 수정은 두 파일을 항상 동시에 수정해주어야 하는 번거로움이 발생하게 됩니다. 그래서 세로를 기준으로 하고 가로보기 시에 특정한 무언가를 약간만 수정하고 싶다면 아래와 같은 방법을 사용하면 더 좋을 것 같습니다.


<link rel="stylesheet" type="text/css" media="all" href="basic.css">
<link rel="stylesheet" type="text/css" media="all and (orientation:landscape)" href="landscape.css">


위와 같이 사용하게 되면 항상 basic.css 가 불러오게 되고 가로로 볼 경우 landscape.css 를 추가적으로 불러오게 됩니다. 그렇다면 basic.css 를 통해 기본적인 레이아웃을 구현하고 landscape.css 를 통해 가로보기 시에 필요한 몇가지만 추가해 주면 훨씬 더 효율적으로 사용할 수 있을 것 같습니다.


 
저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
얼마전입니다. apple 에서 iPad 2 를 내놓았습니다. 이전 버전에 비해 엄청난 혁신은 없지만 전/후면부 카메라와 2배의 성능향상, 9배의 그래픽성능 향상이 있고, 무엇보다 많이 가벼워진 무게가 구매하고픈 욕구를 매우 많이 충족시켜주고 있습니다. 이제 한국에도 4월중에 발표한다고 하는데요. iPad2 를 통해 국내 타블렛 시장도 좀 더 활성화 될 것을 예상하고 있습니다.

그런 측면에서 오늘은 모바일 브라우져의 대명사인 iOS의 사파리에 대해서 이야기 해보도록 하겠습니다. 그 중에서도 모바일 사파리의 배경 이미지 렌더링에 대해서 이야기를 할 것인데요. CSS 스타일을 할 때 CSS - IR 기법을 많이 사용하게 됩니다. (IR:Images Replacement, 배경 이미지의 위치를 조정해서 이미지를 나타내는 기법) IR 기법을 사용하여 작업을 하게 되면 이미지 렌더링 속도를 향상시킬 수 있습니다. 그래서 많이 사용하는데요. 모바일 사파리에서는 배경 이미지를 사용할 때 이상한 현상이 발생합니다.

IR기법의 핵심은 영역에서 원하는 영역은 보여지게 하고 원하지 않는 영역은 보이지 않게 하는 것입니다. 예를 들면 width, height 가 각각 100px 인 박스가 있다면 그 뒤에 배경으로 더 큰 이미지를 설정하고 그 것의 위치를 조정해가며 다른 화면을 나타내는 것입니다. 그럴려면 이미지가 정확하게 표현되어야 하는데요. 그런데 iOS에서는 약간(?) 이상하게 렌더링 됩니다.

말이 필요 없겠지요? 우선 이미지를 확인해보시면 될 것 같은데, 이미지를 확인하시기 전에 알아두셔야 할 것이 있습니다. 연두색 박스는 확인해야 할 영역을 나타내는 것이고, 유심히 보셔야 할 곳을 파란 박스 입니다. 배경으로는 가로, 세로 200px 의 박스를 넣었는데요 붉은색 배경 가운데 가로세로 100px 의 박스가 있습니다. 다음의 그림을 보시면 이해가 편하실 겁니다. 

 
저렇게 생긴 이미지를 width, height 가 각각 100px 의 배경으로 넣고 background-position 속성을 이용해서 해당 이미지의 위치를 약간 수정해주면, 100px 의 상자안에 파란색 부분만 보여지게 할 수 있겠죠? 이건 뭐 보실 것도 없이 당연히 그렇게 됩니다. 직접확인 해보셔도 좋을 것 같네요.

그런데 iOS에서는 이렇게 당연한 것이 조금은 다르게 나옵니다. 아래의 그림을 확인해보시면 보실 수 있는데요. 무엇을 보시면 되냐면, 이미지의 경계 부분에 가려져야 할 붉은 색 부분이 번져 보입니다. 별거 아니라고 생각하실 지도 모르겠는데, 어떠한 상황에서는 정말 큰 영향이 있을 수도 있습니다.

(아이패드에서는 이렇게 렌더링 됩니다.)


(그리고 아이폰에서는 이렇게 렌더링 됩니다.)


이 것을 볼 때, IR 기법을 사용할 때는 반드시 사용하려는 이미지 사이에 공백을 반드시 주어야 합니다. 너무 간단하게 결론이 나는데요. 아주 간단하지만 꼭 지켜야 할 문제 인 것 같습니다.

사실 이 사항을 발견하고 이 문제에 대해서 고민도 많이 하고 어떻게 포스팅 할지 이렇게 저렇게 구성도 많이 해보았는데 다 작성하고 보니 너무 부실하게 완성이 된 것 같네요. 너무 오랜만에 갑자기 포스팅을 하려니 적응이 잘 안되는 것도 같습니다. 어찌 생각하면 이 문제는 포스팅을 할 만큼 중요한 문제도 아닌 것도 같구요. 하지만 이러한 문제들은 한번쯤은 집고 넘어가는게 나중에 작업할 때도 도움이 될 것이라고 생각합니다.
저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
정말 오랜만에 쓰는 포스트이네요. 어제이지요? 어제 파이어폭스의 새로운 버전인 파이어폭스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
일전에 jQuery를 이용한 마우스오버에 대한 포스팅을 한적이 있습니다. 궁금하신 분은 여기(http://htglss.tistory.com/21)를 참조하시면 되구요. 오랜만에 블로그에 들어와서 보니 아무리 보아도 뭔가 마음에 걸리는 부분이 있어서 약간의 업그레이드를 해보았습니다. 뭐 대단한 것은 아니고 코드를 좀 줄여보았고 한가지 기능을 추가해보았습니다. 뭐 대단한 기능은 아니고 아주 간단하지만 있으면 좋을 법한 기능입니다.

일단 마우스오버 이미지를 가장 많이 사용하는 부분은 메뉴 부분이라고 할 수 있을 것 같습니다. 그런데 메뉴에서 해당페이지에 들어가 있을 때는 그 메뉴를 활성화 해놓는 것이 보기에 약간은 더 좋은 것 같으므로 그런 기능을 추가해 보았습니다. 뭐 간단한 한줄이기에 쓰지 않을 때는 없애버려도 무방합니다.

그렇다면 시작해 볼까요?

전에는 구글 코드에 있는 jQuery 라이브러리를 가져왔는데 거기에도 있지만 jQuery 사이트에서도 CDN을 제공합니다. CDN의 자세한 내용은 이곳(http://htglss.tistory.com/42)을 참조해보시면 될 것입니다.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

요렇게 jQuery 라이브러리를 불러와 줍니다. 그런다음에 이미지를 만들어야겠지요? 이미지는 전과 동일하게 이미지 명의 맨 뒤에 '_off' '_on' 을 넣어서 일반 이미지와 마우스오버되었을 때의 이미지를 만들어 줍니다. 그런다음에 이미지를 마크업해주어야겠지요?

<img src="image01_off.jpg" class="rollover" />
<img src="image02_off.jpg" class="rollover active" />
<img src="image03_off.jpg" class="rollover" />
<img src="image04_off.jpg" class="rollover" />

위와 같이 마우스오버 기능을 사용할 이미지에 rollover 라는 클래스 명을 주고, 현재 페이지의 메뉴에 해당하는  이미지인 두번째 이미지에는 active 라는 클래스를 주었습니다. 그리고 스크립트를 이렇게 작성하면 되겠습니다.

<script type="text/javascript">
if ( $('img').hasClass('active') ){
$('img.active').attr('src', $('img.active').attr('src').split('_off.')[0] + '_on.' + $('img.active').attr('src').split('_off.')[1]);
}
$('img.rollover').mouseover(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_off.')[0];
var image_type = $(this).attr('src').split('off.')[1];
$(this).attr('src', image_name + '_on.' + image_type);
}
}).mouseout(function(){
if ( !$(this).hasClass('active') ){
var image_name = $(this).attr('src').split('_on.')[0];
var image_type = $(this).attr('src').split('_on.')[1];
$(this).attr('src', image_name + '_off.' + image_type);
}
});
</script>

이렇게 작성해주면 마우스오버 기능이 간단하게 동작하게 됩니다. 제일 첫줄에서 네째줄에 걸쳐있는 내용이 active라는 클래스명을 가진 이미지에 마우스오버 효과를 주는 내용입니다. 현재 메뉴에 해당하는 이미지는 항상 마우스오버 된 이미지로 되어있고 마우스의 동작에도 변화하지 않습니다.



이미지 파일명을 분리하는 부분을 "_off." 로 하여 코드를 단순화 시킬 수 있었습니다. 혹시 이미지 파일명 중간에 "_off." 이 들어가게 네이밍하시는 분은 없겠지요? 점까지 들어있는데... 그렇다면 이것을 사용하시지 않으시면 됩니다. ㅋㅋ 그런분들은 이것보다 더 완성도 있는 코드틀 만드실 수 있는 능력이 있으신 분들일 것 같습니다. 

마지막으로 한가지 단점이 있다면 active 라는 클래스명을 가진 이미지가 여러개가 중복되어 있으면 제일 첫번째에 나오는 하나의 이미지로 나오게 된다는 점입니다. 각각의 이미지명을 따로 관리하면 해결 가능 할 것 같은데 그것은 시간상 다음에 해결하도록 하겠습니다.

이상으로 jQuery를 이용한 이미지의 마우스오버 2탄을 마무리하도록 하겠습니다.
저작자 표시 동일 조건 변경 허락
신고
Posted by htglss
jQuery는 쓰면 쓸 수록 매력적인 라이브러리인 것 같습니다. 사용하면 할 수록 사용자가 사용하기가 아주 쉽고 편하게 되어있습니다. 이번에는 기회가 되어 클릭에 따라 영역의 크기가 변하는 UI를 제작해 보았습니다. jQuery의 쉬운 애니메이션 기능을 이용하여 간단하게 만들어보았습니다. 이걸 참조해서 다른 여러가지들도 잘 만들 수 있겠는데요?

우선 기본적인 내용을 보면, 클릭함에 따라 모든 영역들의 크기를 변화시키는 것인데요. jQuery의 특성상 아주 간단하게 만들 수 있었습니다. 하지만 요 안에 다른 영역이 잔쯕 들어간다면 상황은 좀 달라지긴 하겠죠? 하지만 특별한 컨텐츠가 없을 경우에는 아주 간단하게 구현할 수 있습니다.

아래와 같은 코드로 애니메이션을 표현할 수 있는 데요, 영영이 클릭이 되면 이벤트가 동작되게 하였습니다.

$('#item2').animate({width: '150', height: '300'}, 500, function() {});



영역을 클릭해보시면 움직임을 보실 수 있습니다. 선택한 영역이 커지면서 내용을 자세히 볼 수 있게 됩니다. "reset"을 누르시면 다시 원래의 상태로!

저작자 표시 동일 조건 변경 허락
신고
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
jQuery 의 애니메이션 효과는 정말 훌륭한 것 같습니다. 아주 간단한 코드로 쉽게 애니메이션을 구현할 수 있는데요. 이 코드는 99% 회사 대리님께서 만드셨고, 제가 아주 간단한 IE6에서 안되는 문제를 해결했습니다. 여기에 올려도 이해해주시겠죠? ㅋㅋ 아무튼 사용하면 할 수록 jQuery 는 훌륭한 물건인 것 같습니다. 앞으로도 자주 사용해야겠습니다.

.animate() 를 이용해서 만들었는데요. .animate({"top":100px},1000) 이런식으로 사용하면 되는데요. 한 줄의 코드로 손쉽게 애니메이션 효과를 낼 수 있습니다..


중앙정렬 된 컨텐츠의 우측에 붙어 창 크기가 변해도 같은 위치에 오게 하였습니다.


저작자 표시 동일 조건 변경 허락
신고
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