[WP] 나눔고딕을 사용하기 위한 @font-face 설정법

워드프레스로 소개를 하고 있지만 모든 웹사이트에 공통 적용이 되는 내용입니다.

나눔고딕을 사용하기 위해서는 CSS에서 font-family로 참조가 가능해야 합니다. 그러기 위해서는 우선 FTP 업로드 또는 CDN 을 이용해서 폰트 파일을 연결시켜주어야 합니다. 아래 font-face 설정은 그 역할을 합니다.  font-family에 사용할 이름과 파일을 참조하여 CSS에서 쉽게 사용 할 수 있도록 도와줍니다.

CDN으로 이용할 경우 http://fonts.googleapis.com/earlyaccess/nanumgothic.css 를 참고하시면 됩니다.

워드프레스에 경우에는 주의사항이 있습니다. 바로 워드프레스 업데이트입니다. 워드프레스에서 버전이 릴리즈되었다고 무턱대고 업데이트하시면 기존에 설정했는 CSS 뿐만 아니라 커스터마이징했던 부분이 원점으로 돌아가는 재앙이 발생할 수 있습니다.

기본 중 기본이겠지만 항상 백업을 해두는 습관을 들이시면 재앙을 예방하실 수 있습니다.

[CSS] 앨리먼트 요소 center 정렬 해결방법

CSS 정렬에 있어서 각 요소의 width, height 값은 중요합니다. 이들이 없으면 상호간 정렬 또는 위치를 잡는데 애를 먹게 됩니다.

parent라는 class를 가진 부모 DIV 앨리먼트가 child라는 class를 가진 자식 DIV 앨리먼트를 감싸고 있다고 가정합니다.

이때 흔히 고민하는 부분이 자식 앨리먼트를 어떻게 하면 center 정렬을 시킬 수 있을까 일겁니다.

text-align? margin? padding?

요소를 정렬시키는데 있어 위 모두 사용할 수 있는 녀석들입니다. 하지만 그 이전에 각 요소의 사이즈를 정의해줘야 합니다. 사이즈를 지정하지 않고도 문제가 없다면 다른 브라우저로 테스트 해보십시오. 위치나 사이즈가 일그러지는 모습을 볼 수 있습니다.

parent 클래스를 가진 부모 DIV에는 width:100%을 줍니다. 그리고 child 클래스를 가진 자식 DIV에는 의도하는 가로 사이즈를 정의합니다. (width: 300px)

그리고나서 parent 클래스에 text-align:center와 margin:0 auto; 를 적용해주면 됩니다.

text-align:center;는 IE에서만 동작합니다. 나머지 브라우저에서는 Text에만 대응하죠. 그리고 margin:0 auto는 IE 외 나머지 브라우저에서 동작합니다. 즉, 이 둘은 같이 한 쌍이 됩니다.

정리하면 위와 같이 CSS가 만들어집니다. 여기서 한가지 문제는 parent의 text-align:center가 그대로 child의 속성에 까지 영향을 준다는 것입니다. child에 텍스트를 넣게 되면 center 정렬이 된다는 의미입니다.

그렇다면 child에 한가지 추가를 해줘야 합니다.

child에 text-align:left;를 넣어줍니다. 이렇게 되면 child안에 텍스트들은 부모 CSS의 center 정렬에 영향을 받지 않게 됩니다.

[CSS] 웹폰트 적용하는 방법

기본 시스템 폰트가 아닌 일반 사용자 폰트로 웹을 표시해주는 것을 웹폰트를 적용한다라고 말합니다. 웹폰트는 @font-face를 이용해 클라이언트가 서버의 폰트를 다운받아 표시해줌으로써 클라이언트 PC에 해당 폰트가 없어도 웹사이트에서 제작자가 원하는 폰트로 사용자에게 보여줄 수 있습니다.

웹폰트 적용이 가능해진 이후로 디자이너들은 텍스트를 꾸미기 위해 이미지로 텍스트를 만드는 일이 크게 줄었습니다. 하지만 한글은 웹폰트를 적용하고도 알파벳처럼 깔끔하게 나오지 않아 아직까지 텍스트를 이미지로 만드는 경우가 꽤 있습니다. 원하는 폰트로 원하는대로 웹사이트에 표시를 할 수 있다고해서 단점이 없는것은 아닙니다.  클라이언트는 웹사이트의 텍스트를 읽어들이기위해 폰트파일을 다운로드 해야하고 그 사이동안은 텍스트가 보이지 않습니다. 이는 폰트파일의 용량이 크고 서버간의 통신 상태가 좋지 않다면 웹사이트를 사용자가 보는데 있어 많은 지연시간이 걸릴 수 있다는 얘기입니다.

하지만 이미지로 텍스트를 만드는 상황보다는 웹폰트를 사용하는 것이 결과물로 보나 개발과 유지보수 입장에서 보나 더 진보된 방법이라고 할 수 있습니다.

웹폰트를 적용하는 방법은 여러가지가 있습니다. 몇 가지를 소개해보겠습니다. 폰트는 나눔고딕(Nanum Gothic)을 예로 들겠습니다.

1. google font service를 이용한 CDN 링크방식

이 방식은 자신의 웹서버내에 폰트가 없는 경우 구글이 제공하는 font 서비스를 이용해 적용하는 방법입니다. 이 방법의 치명적인 단점은 로딩이 느리다는 것입니다. 웹사이트를 사용자가 보기 위해서 웹서버 요청 후 구글 font 서비스 서버에서 폰트파일을 읽어와야하기 때문에 이중으로 부담이 생기게 되고 곧 웹페이지를 여는데 시간이 걸리게 됩니다. 이 방법은 실제 운영하는 서비스에서는 그다지 권장하지 않습니다.

 

2. 자신의 서버에서 폰트를 불러오기

보시다시피 폰트 경로가 지정돼 있습니다. 이 방법은 1번의 방법과의 차이점이라면 구글 폰트에서 받아오던 폰트파일을 자신의 서버에서 직접 받아온다는 점입니다. 속도는 좀더 향상되지만 이 방법에도 문제가 있습니다. 브라우저마다 웹폰트를 사용하는 폰트파일 형식이 다릅니다. 따라서 woff와 eot 파일 2개를 동시에 불러오게 됩니다. 2개의 파일 중 하나는 사용하지 않는 불필요한 데이터입니다.

 

3. 2번의 방법을 개선한 방식

이 코드는 브라우저 환경에 따라 필요한 폰트만을 다운로드 받게 해줍니다. 브라우저 환경에 따라서 eot, woff, ttf 중 하나의 폰트파일을 받게되고 웹사이트에 적용하게 됩니다. 불필요한 파일을 받지 않음으로써 데이터의 부담은 줄고 모든 브라우저에 적용될 수 있는 최적의 코드입니다.

[CSS] 엘리먼트, 텍스트 center 정렬

엘리먼트 Center 정렬

 

텍스트 세로 정렬 (Vertical-align)

 

[CSS] float 사용시 height 인식못하는 버그 해결방법 : clearfix

자주 쓰이는 방법이지만 외울 수도 없고 매번 검색하기도 귀찮아 포스팅합니다.

 

아웃룩 2007이후 버전에서 HTML, CSS 제약사항

아웃룩 2007 이후 버전에서는 일부 HTML과 CSS가 적용되지 않는 이슈가 있습니다.
웹메일은 정상적으로 표시되는데 아웃룩에서만 유독 표시가 잘 되지 않는다면 아래 사항을 체크해보세요.

  • no support for background images (HTML or CSS)
  • no support for forms
  • no support for Flash, or other plugins
  • no support for CSS floats
  • no support for replacing bullets with images in unordered lists
  • no support for CSS positioning
  • no support for animated GIFs