Mozilla 한국 커뮤니티

viewtopic.php?t=7548에서 넘어 왔습니다.

MS IE는 px로 크기를 지정한 글자를 zooming해 주지 않습니다. Gecko 계열 브라우저는 px로 크기를 지정한 글자는 zooming해 주지만, px로 크기를 지정한 그림은 zooming해 주지 않습니다. 오페라는 그런 그림도 zooming해 줍니다. 모든 GUI 브라우저가 Opera와 같다면(firefox와 같은 gecko 계열 브라우저는 Opera의 기능을 수용할 계획입니다만, 언제 고쳐질지는 모르겠습니다) 이 글은 아마 쓰지 않아도 되었을지 모릅니다. 이런 상황에서 그림이 들어간 레이아웃이 어느 브라우저에서 zooming을 해도 깨지지 않게 할 방법은 무엇일까요?

오픈웹 사이트 베타를 보니까 상단 헤더 부분 내용이 배경 화면에 다 들어가지 않아서 - 제가 기본 글자 크기를 파이어폭스에서 좀 크게 해 놓았습니다. 제 노트북 해상도가 지나치게 높아서요- 왜 그런가 보았더니, 상단 부분 크기가 배경 그림 크기에 맞추어서 px로 지정되어 있지만, 글자 크기는 em으로 지정되어 있더군요. em과 px의 비율은 제가 지정한 기본 글자 크기에 의해 상대적으로 결정되므로 (사용 글꼴에 따라서도 달라집니다), 제가 기본 글자 크기를 크게 지정해 놓으면, 위처럼 px로 크기를 지정한 박스 안에 내용물이 다 안 들어가는 일이 발생합니다.

그 박스(베경 그림 때문에 px로 크기를 지정한) 크기를 em으로 지정하면 되지 않을까? 그럼, 배경 그림 크기는? 이것도 역시 em으로 지정하면 되지 않을까? 이런 생각이 들었습니다. 그렇다면, 많은 웹 사이트에서 보이는 너무나 작은 아이콘 ( 노트북의 고해상도 화면을 한번 써 보십시오. 상당수 웹 사이트의 아이콘은 정말 너무 작습니다. 일반 데스크탑 모니터에서도 작은 경우가 많고요) 문제도 이로서 해결할 수 있지 않을까? 이런 생각이 들었습니다. 그래서, 구글 검색을 해 보니 다음과 같은 사이트가 있더군요.

http://www.bigbaer.com/css_tutorials/cs ... torial.htm
http://www.bigbaer.com/css_tutorials/css_font_size.htm

그림마다 적절한 크기를 계산해야 하고 이를 "대강의 em"으로 바꿔야 하니까 상당한 품이 들어갈 수도 있다는 게 단점이기는 하군요. 이런 기능을 웹 저작 도구가 잘 지원해 주면 좋은데.... 또하나의 단점은 브라우저가 좋은 그림 스케일링 알고리즘을 쓰지 않을 경우 그림이 좀 안 이뻐질 수 있습니다. 좋은 알고리즘을 써도 스케일링을 하는데 시간이 걸릴 테니까 화면 표시가 좀 느려질 수도 있고요. 스케일링 결과와 수행 속도 양면에서 모두 좋은 알고리즘을 쓰면 되겠네요 (현재 모질라 계열 브라우저의 스케일링 알고리즘은 두 가지 면 모두에서 좀 문제가 있는 듯....) 또다른 문제는 'pixel-perfect' 디자인을 원하는 디자이너들이 이 방법을 꺼릴지도 모른다는 점이겠군요. 그래도 zooming의 결과 완전히 엉망진창으로 깨지는 것보다는 이게 훨씬 낫지 않냐고 하면....

빛알갱이 wrote:viewtopic.php?t=7548에서 넘어 왔습니다.

오픈웹 사이트 베타를 보니까 상단 헤더 부분 내용이 배경 화면에 다 들어가지 않아서 - 제가 기본 글자 크기를 파이어폭스에서 좀 크게 해 놓았습니다.

안녕하세요. 오픈웹을 제작 중인 조훈입니다. 오픈웹 링크가 잘못됐네요. http://open.unfix,net

먼저 상단 배경이미지와 본문 컨텐츠 부분의 급격한 단절에 대한 문제는 배경이미지를 제거함으로써 다소 해소했습니다. 서브 페이지에 적당한 이미지를 사용할 계획이었지만, 생각보다 쉽지 않더라구요. 그래서 서브 페이지의 파란색 배경은 없애기로 했답니다. 추후에 필요성이 제기되면 추가하도록 하겠습니다.

그리고, 홈페이지의 px 기반 배경이미지와 em 기반 폰트 크기가 각각 사용하는 단위의 차이에 따라 컨텐츠가 잘리는 문제가 있습니다. 이런 문제를 발생하는 이유는 브라우저 랜더링도 있겠지만, 웹이미지 저작툴이 상대단위를 제대로 지원할 수 없는 이유도 있답니다. 물론, svg가 활성화되면 어느정도 해결될 수 있겠죠. 물론 파일 크기와 랜더링 속도가 변수겠지만요.

저 역시 시력이 좋지 않아서, 밤에는 text zoom 기능을 이용하고 있답니다. FF는 px, em, % 단위에 상관없이 text zoom이 가능한 반면, IE는 px를 zoom하지 못하죠. 반면 오페라는 단위에 상관없이 text뿐만 아니라 layout도 zoom이 가능합니다.

웹디자인의 기본은 텍스트에서 시작하며, 텍스트의 크기는 상대적으로 인지되기 때문에 결국 웹디자인은 상대적이입니다. 예를 들어, 중요한 글(제목글)은 보다 덜 중요한 글(본문글)에 비해 시각적으로 강조되야 하며, 시각적 강조의 기본은 크기다라는 것이죠.

px 단위는 해상도에 상대적이지만, 다른 요소의 값을 참조할 수 없기 때문에 결국 절대 단위입니다. 즉, px 단위의 디자인은 디자이너의 작업 환경(웹을 접속할 수 있는 환경 중에 .0001%인)만 고려한 디자인을 만들 수 밖에 없는 것이죠.

브라우저의 랜더링, 웹 디자인 저작툴, 웹 디자이너의 의식, 이런 것들에 변화가 있지 않는 이상 제대로된 웹 디자인(웹의 장점-특히 접근성-을 살린 디자인)이 구현되기 어렵다고 봅니다.

오픈웹 사이트의 디자인적 접근성을 높이기 위해 더 고민하렵니다. 최선책을 선택할 수 없다면, 차선책이라도 선택해야겠네요. ㅎㅎ

앗. 마지막으로, 브라우저 기본값으로 정해진 em과 px 단위는 1.6:1 인데요. 이 비례 때문에 px를 em으로 변환하는데, 한계가 있습니다. 즉 1em은 16px, 0.75em은 12px인데, 0.9em은 15.xxxx px인 거죠. 이 소수점 px 단위를 브라우저들이 공통적으로 랜더링하지 않는 문제도 있기에, px를 em 단위로 대체해서 사용하려는 디자이너들도 많은 한계에 부딛히곤 합니다.

빛알갱이:
그 박스(베경 그림 때문에 px로 크기를 지정한) 크기를 em으로 지정하면 되지 않을까? 그럼, 배경 그림 크기는? 이것도 역시 em으로 지정하면 되지 않을까? 이런 생각이 들었습니다. 그렇다면, 많은 웹 사이트에서 보이는 너무나 작은 아이콘 ( 노트북의 고해상도 화면을 한번 써 보십시오. 상당수 웹 사이트의 아이콘은 정말 너무 작습니다. 일반 데스크탑 모니터에서도 작은 경우가 많고요) 문제도 이로서 해결할 수 있지 않을까? 이런 생각이 들었습니다. 그래서, 구글 검색을 해 보니 다음과 같은 사이트가 있더군요.

http://www.bigbaer.com/css_tutorials/cs ... torial.htm
http://www.bigbaer.com/css_tutorials/css_font_size.htm

그림마다 적절한 크기를 계산해야 하고 이를 "대강의 em"으로 바꿔야 하니까 상당한 품이 들어갈 수도 있다는 게 단점이기는 하군요. 이런 기능을 웹 저작 도구가 잘 지원해 주면 좋은데.... 또하나의 단점은 브라우저가 좋은 그림 스케일링 알고리즘을 쓰지 않을 경우 그림이 좀 안 이뻐질 수 있습니다. 좋은 알고리즘을 써도 스케일링을 하는데 시간이 걸릴 테니까 화면 표시가 좀 느려질 수도 있고요. 스케일링 결과와 수행 속도 양면에서 모두 좋은 알고리즘을 쓰면 되겠네요 (현재 모질라 계열 브라우저의 스케일링 알고리즘은 두 가지 면 모두에서 좀 문제가 있는 듯....) 또다른 문제는 'pixel-perfect' 디자인을 원하는 디자이너들이 이 방법을 꺼릴지도 모른다는 점이겠군요. 그래도 zooming의 결과 완전히 엉망진창으로 깨지는 것보다는 이게 훨씬 낫지 않냐고 하면....

저도 같은 것을 고민하다가 이미지를 em으로 지정하는 것을 생각했었는데 몇가지만 빼면 매우 좋은 아이디어입니다.

글자가 안들어가는 문제는 hieght만 빼고 padding을 이용해서 높이를 지정하면 해결이 됩니다만 CSS의 background의 경우 배경이미지의 크기를 지정할 수는 없기 때문에 글자를 크게 하여도 오페라 같이 완벽한 zooming을 할 수는 없습니다. 그래서 디자인적으로 들어간 background를 사용한 아이콘의 경우 글자크기와 비례하게 하기는 힘듭니다. 그래도 깨진 것 처럼 보이지 않게 작성을 하는 것이 덴 써더홈의 방탄웹(bullet proof web design)이 되겠지요.

그리고 이미지가 좌우로 길다든가 할 때 크기를 em으로 지정을 하면 글자를 확대 하였을때 우측으로 너무 길어져서 화면을 벗어날 수 있는 것도 문제가 됩니다. 가로 스크롤이 생기겠죠. max-width를 지정하면 기본적으로 큰 이미지는 더 늘어나지 않게 됩어서 디자인 적으로 깨질 수도 있습니다.

가장 좋은 것은 이미지 텍스트를 사용하지 않는 것! 그리고 사용자가 적당한 정도의 수준으로만 글자를 확대 한다면 위의 방법도 충분히 좋은 방법이라고 생각 됩니다.

hyeonseok wrote: 글자가 안들어가는 문제는 hieght만 빼고 padding을 이용해서 높이를 지정하면 해결이 됩니다만 CSS의 background의 경우 배경이미지의 크기를 지정할 수는 없기 때문에 글자를 크게 하여도 오페라 같이 완벽한 zooming을 할 수는 없습니다. 그래서 디자인적으로 들어간 background를 사용한 아이콘의 경우 글자크기와 비례하게 하기는 힘듭니다. 그래도 깨진 것 처럼 보이지 않게 작성을 하는 것이 덴 써더홈의 방탄웹(bullet proof web design)이 되겠지요.

height를 지정하지 않을 땐, 컨텐츠들이 float되어 있을 경우나, 절대위치로 포지셔닝할 경우에 배경이 안먹힙니다.

아이콘의 배경 위치를 세로 50%으로 놓고, 인라인 텍스트의 상하패딩을 조정하면 원하는 결과를 얻을 수 있습니다. 보통 한글의 경우 font-size와 line-height값의 차이를 브라우저가 1/2로 나눠서 텍스트 위아래로 인라인 패딩을 넣지 않고, 아래에만 넣더라구요. 영문은 괜찮은 거 같더군요.

예를 들어, a.tag {padding:.25em 0 0 1em; background-position: 0 50%;} 요.

viewtopic.php?t=7548에서 넘어 왔습니다.

MS IE는 px로 크기를 지정한 글자를 zooming해 주지 않습니다. Gecko 계열 브라우저는 px로 크기를 지정한 글자는 zooming해 주지만, px로 크기를 지정한 그림은 zooming해 주지 않습니다. 오페라는 그런 그림도 zooming해 줍니다. 모든 GUI 브라우저가 Opera와 같다면(firefox와 같은 gecko 계열 브라우저는 Opera의 기능을 수용할 계획입니다만, 언제 고쳐질지는 모르겠습니다)

오페라에 이어서 MS IE 7도 그림까지 같이 확대/축소를 해 준다고 하니까 파이어폭스가 '속히 따라 잡아야 할' 기능이 하나 더 생겼군요. '생겼다'는 말은 어폐가 있군요. 오페라만 지원했을 때에도 그 기능은 꼭 지원해야 할 (언제 누가 구현하느냐는 문제가 있었지만) 기능이었으니까요.

현재 http://www.potatoweb.net/index2.html
이곳에 적용해봤습니다만, 브라우저마다 Zooming 하는정도가 다르더군요
FF에서는 볼만한데 IE에서도 훨씬 크게 해버립니다. 물론 상속받은 em값 때문에 그럴수도 있습니다만 어떻게 해도 똑같이 되지 않더군요.

궁금하신분은 FF와 IE두개를 띄워두고 Ctrl+휠마우스스크롤 해보시면 알 수 있을겁니다. 제 생각에 em은 line-height와 같은 속성에서 사용하는것이 가장 유용하더군요. 글자크기를 임의로 정하더라도 그에 맞춰 띄어쓰기 할수있으니까요

mman wrote:현재 http://www.potatoweb.net/index2.html
이곳에 적용해봤습니다만, 브라우저마다 Zooming 하는정도가 다르더군요
FF에서는 볼만한데 IE에서도 훨씬 크게 해버립니다. 물론 상속받은 em값 때문에 그럴수도 있습니다만 어떻게 해도 똑같이 되지 않더군요.

궁금하신분은 FF와 IE두개를 띄워두고 Ctrl+휠마우스스크롤 해보시면 알 수 있을겁니다. 제 생각에 em은 line-height와 같은 속성에서 사용하는것이 가장 유용하더군요. 글자크기를 임의로 정하더라도 그에 맞춰 띄어쓰기 할수있으니까요

line-height은 단위 없이 비율만 지정하는 것이 좋다고 본 기억이 납니다. 값이 상속될 때 em으로 내려가는 것이 아니라 계산된 값이 내려가기 때문에 그렇다고 생각이 납니다.

그나저나 'pixel-perfect'를 추구하는 경향 좀 빨리 사라졌으면 좋겠습니다. 웹은 웹이지 psd 파일이 아닌데 말이죠.

브라우저에서 폰트 크기 한두단계만 조절하면 와르르 무너져 내리는 건 정말 ... 그만 좀 했으면

빛알갱이 wrote:

viewtopic.php?t=7548에서 넘어 왔습니다.

MS IE는 px로 크기를 지정한 글자를 zooming해 주지 않습니다. Gecko 계열 브라우저는 px로 크기를 지정한 글자는 zooming해 주지만, px로 크기를 지정한 그림은 zooming해 주지 않습니다. 오페라는 그런 그림도 zooming해 줍니다. 모든 GUI 브라우저가 Opera와 같다면(firefox와 같은 gecko 계열 브라우저는 Opera의 기능을 수용할 계획입니다만, 언제 고쳐질지는 모르겠습니다)

오페라에 이어서 MS IE 7도 그림까지 같이 확대/축소를 해 준다고 하니까 파이어폭스가 '속히 따라 잡아야 할' 기능이 하나 더 생겼군요. '생겼다'는 말은 어폐가 있군요. 오페라만 지원했을 때에도 그 기능은 꼭 지원해야 할 (언제 누가 구현하느냐는 문제가 있었지만) 기능이었으니까요.

Kenji Inoue씨가 PageZoom이라는 확장기능으로 만들어서 구현되기는 했는데
확장기능으로 고 퀄리티는 무리고, Gecko 1.9에 내장되니 그것을 기대하라더군요.

http://pagezoom.sourceforge.net/
http://update.mozilla.or.kr/addons/?p=1 ... =extension
https://addons.mozilla.org/firefox/1499/

xx1 wrote:
Kenji Inoue씨가 PageZoom이라는 확장기능으로 만들어서 구현되기는 했는데
확장기능으로 고 퀄리티는 무리고, Gecko 1.9에 내장되니 그것을 기대하라더군요.

http://pagezoom.sourceforge.net/

정보 주셔서 감사합니다. 하지만, FF 3.0 (Gecko 1.9)가 발표될 때까지 그 기능이 과연 Opera나 IE7처럼 제대로 구현될지 확신이 서지 않는군요. pagezoom 확장을 FF 3.0에 넣는 거야 어렵지 않지만, 진짜 제대로 이미지 확대 축소 (일단, 현재 그림 파일 축소/확대 알고리즘에 문제가 있어서 품질이 나쁩니다.)를 하면서 내용물 배치도 유지하는 패치를 만드는 것은 쉽지 않아 보입니다. bug 4821이 처음 나온 게 7년 전이거든요. 물론, 어느날 갑자기 해결될지도 모르지요.

em은 상속받을 경우 크기가 달라지고 이것이 브라우저마다 제각각이기에 사용하려는 요소를 먼저 핵 해줘야 합니다


html,body,div,span,a,p,i,img,h1,h2,h3,h6,header,section,article,aside,nav,footer{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;box-sizing:border-box}

이런 식으로요.

이렇게 하면 em과 % 만으로도 대부분의 브라우저에서 똑같이 보이는 깔끔한 디자인을 할 수 있습니다.