WIT – NTS UIT Blog

다국어 웹사이트 지원을 위한 HTML과 CSS

Posted by in Research, Tech

전세계에는 많은 국가가 존재하며, 개중에는 독자적인 언어를 가지고 있는 국가들이 있다. 브리태니커 비주얼 사전에서 전달하는 내용에 따르면 세계의 6,000여 가지 언어 중에서 100만 명 이상의 인구가 사용하는 언어는 250가지에 불과하다. 역으로 생각해보면 우리가 앞으로 대응해야할 가능성이 있는 언어가 250가지라는 것이다. 그렇다면 다양한 국가의 언어를 어떻게 대응할 수 있을까? Font-Family CSS에서 Font를 지정하는 건 누구나 해봤을 것이다. 교재에서도 제일 처음 가르쳐주고 있기 때문에 모르는 사람이 없으리라. 아래 코드를 예로 들어보자.

위의 코드로 선언할 경우, APPLE SD Gothic Neo를 가지고 있는 OS에서는 해당 폰트로 보여질 것이고, 그렇지 않다면 OS의 기본 고딕…read more

6

크롬37이상에서 영문 일부에 공백이 생김

Posted by in BugReport

서비스명: 지식백과 / 제보자 : 정사라 현상 재현환경 윈도우 크롬 37 이상   돋움/굴림으로 선언한 페이지에서 영문자를 표현할 경우, 일부 글자에서 자간이 넓어져 띄어쓰기된것 처럼 보입니다. test url : http://jsbin.com/mebabecave/1   오류 화면 정상 화면     원인 크롬 윈도우 37정식판부터 글꼴 처리방식을 위한 ‘다이렉트라이트(DirectWrite)’의 기본 옵션이 ‘사용’ 으로 됨. 다이렉트라이트(DirectWrite)가 활성화 됐을 경우 ‘굴림’이나 ‘돋움’같은 비트맵 폰트들을 표현 할때 자간을 불규칙하게 만드는 현상이 나타남.  빌드번호 37.0.2062.94 버전으로 정식 배포된 크롬 브라우저가 글꼴 자간을 불규칙하게 만드는 현상은 윈도7 환경에서 한글 글꼴 중 ‘굴림’이나 ‘돋움’같은 비트맵 폰트를 표시할 때 나타나는 것으로 파악됐다. http://www.zdnet.co.kr/news/news_view.asp?artice_id=20140915152518…read more

0

[iOS] 특수문자인식오류 해결

Posted by in BugReport, Research

서비스명: 지식백과 / 제보자 : 정사라 현상 재현환경 ios 버전 6.1.3, 7.1.1, 7.0.4 safari 브라우저   ios에서 기본 entity는 정상노출됩니다. 하지만, ㈜의 경우 entity코드가 없어 unicode로 넣어 대체하였으나, Helvetica font에서 해당 unicode 인식하지 못해 x표시(일명 엑박)로 노출되는 문제가 있어 공유드립니다.   오류화면 정상 화면   정상화면URL: http://m.terms.naver.com/entry.nhn?docId=1395962&cid=685&categoryId=1426   원인 Helvetica만 선언했을경우 영문은 Helvetica로 보여주고 한글은 AppleSDGothicNeo 로 보여줌 unicode는 한글이 아니므로 Helvetica로 렌더링 시도 Helvetica는 ㈜에 해당하는 unicode를 지원하지 않아 X로 노출   해결방법 기본폰트인 Helvetica뒤에 sans-serif도 추가로 넣어 해결됨. sans-serif는 영문,숫자를 포함한 모든 문자를 html의 lang값에 맞는 기본 폰트로 노출해줌….read more

0

CSS Interaction

Posted by in Research

CSS로 만들 수 있는 다양한 인터렉션을 소개합니다. 대부분의 내용은 CSS3 내용이지만 모바일에서라면 충분히 도움이 될 거라 믿습니다. 혹은 회사의 클라이언트분들이 ‘우리는 IE10 이상부터 공식적으로 지원하겠습니다.’ 혹은 ‘신규 브라우저에서 사용자의 사용성을 더 좋게 만들면 되지’라는 멋진 생각을 가지고 계신다면, 이 아티클의 내용을 잘 활용하실 수 있을 거라 생각합니다. 마우스를 올리는 행위 Element:hover를 사용하여 요소에 마우스를 올렸을 때 특정한 행위를 하도록 할 수 있습니다. 아래와 같은 상황을 쉽게 연출할 수 있습니다. 마우스를 올려보세요 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는 메뉴 마우스를 올리면 나오는…read more

0

레이어 중앙정렬

Posted by in Research

조은입니다. CSS만 사용하여 레이어를 중앙정렬 하는 몇가지 테크닉을 소개한다. Margin을 이용하는 방법

결과 : {codepen 링크} 장점 예로부터 자주 쓰인 방법으로 모든 브라우저에서 원활히 지원한다 단점 레이어의 사이즈가 유동인 경우 활용하기가 어렵다. Transform을 이용하는 방법

결과 : {codepen 링크} 장점 레이어의 사이즈가 유동인 경우에도 쉽게 활용할 수 있다. 단점 IE8 이하에서는 제대로 동작하지 않는다 구버전 안드로이드에서 성능 저하를 야기할 수 있다. (이 경우 Translate3d도 활용할 수 있다) Position을 이용하는 방법 클리어보스 @이재호님 제보

결과 : {codepen 링크} 장점 레이어의 사이즈가 유동이어도 잘 돌아감. 다른…read more

2