Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "웹폰트"에 대해 공유드리려고 합니다.

배경

웹 사이트는 대부분 텍스트로 이루어져있습니다.
font-family 속성은 사이트 방문자의 컴퓨터에 같은서체가 설치되어있는 경우에만 올바르제 동작하는 속성이었습니다.
그렇지 않으면 부라우저가 지정한 기본 서체로 표시됩니다. 하지만 웹 사이트에 폰트를 심어주고 그 폰트를 사이트에 불러오는 것을 웹폰트라고 하며, 최근들어서는 브라우저들이 웹 서체(Web Font)라는 것을 대부분 지원하기 시작하였습니다.

웹 폰트는 온라인에서 다운로드 됩니다. 크기, 굵기 등 font-family 글꼴 정보를 브라우저가 정보를 불러와 지정한 CSS방식대로 웹 브라우저에 불러와 주는 것 입니다. 다만 이 웹 폰트의 경우, 특히 한국어/중국어 부분에서 많은 글꼴이 있기에 로딩이 느려지는 경우가 있어 웹폰트는 가벼워야합니다. 사용 빈도 수가 낮은 문자들을 지워 경량화시킬 수 있습니다.

웹폰트 장단점

장점
  • 웹폰트를 적용하게 되면 시스템에 폰트가 없어도 된다.
  • 이미지 폰트에 비해 웹접근성이 향상되며, 수정(유지보수)이 쉽다.
  • 번역기를 통해 번역을 할수있다.
단점
  • 다수의 웹폰트를 적용하게 되면 적용한 모든 폰트 파일을 다운 받기 때문에 웹페이지의 성능을 저하 시킬 수 있다.
  • 한문사용시 웹폰트를 최적화 시키기 위해 한문을 빼고 코드를 만드는 경우가 많아 웹폰트 안에 한문이 있는지 확인필요

폰트 종류

EOT(Embedded Open Type)
  • MS에서 제작 IE8이하 버전에서는 EOT 파일만 지원함
OTF(OpenType Font) / TTF(TrueType Font)
  • OTF/TTF 형식은 쉽게 복제될 수 있어(불법으로) 대신 WOFF 형식이 만들어짐
WOFF(Web Open Font Format)
  • moz 등 웹에서 사용할 목적으로 개발
  • OTF/TTF 를 이용한 구조의 압축된 버전으로, 다른 글꼴 형식보다 빠르게 로드됨.
  • 파일안에 meta date & license 정보도 포함이 가능함.
  • 개선된 WOFF2 버전이 있으나, 일부 브라우저 미지원
SVG/SVGZ (Scalable Vector Graphics (Font)
  • *SVGZ는 SVG의 압축된 버전
  • 파일 크기를 훨씬 가볍게 해서 모바일 사용에 이상적으로 만들었습니다.

지원 범위

1. 웹폰트 종류별 브라우져 지원 범위
  • EOT : IE 6/7/8/9/10/11 (하위 대응 하지 않을 경우, EOT를 제거) [ 참고 ]
  • WOFF : IE 9/10/11, Firefox, Chrome, Safari, Opera, iOS Safari, Android Browser, Chrome for Android [ 참고 ]
  • WOFF2 : Chrome, Opera, Chrome for Android (Firefox, Safari 도 최신버전은 지원함) [ 참고 ]
  • TTF : IE 9/10/11, Firefox, Chrome, Safari, Opera, iOS Safari, Android Browser, Chrome for Android (폰트마다 용량이 다름) [ 참고 ]
2. 크로스브라우징을 위해서는 EOT 와 WOFF 만으로도 가능 (WOFF2가 용량은 더 작으나 하위 호환성을 위해 WOFF 사용)
파일사이즈 : WOFF2(696kb) < EOT(755kb) < WOFF(975kb) < TTF(2.4mb) : 나눔고딕 Regular 기준

사용 방법

웹폰트의 경우 라이센스 문제가 있기 때문에, 유료 폰트는 라이센스 획득 후 사용 가능합니다.
보편적인 무료 폰트는 구글에서 서비스 하고 있습니다. (http://www.google.com/fonts/)
1. 웹폰트 적용 방식 (예시)
CDN 링크방식
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
@import url 방식
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
</style>
2. @font-face 적용 (예시)
@font-face {  font-family: 'kakaoFont';
  font-style: normal;/* 폰트 명 */
  font-weight: 100; /* 폰트 스타일 설정 */
  src: url(font/Kakao-aLt.eot);/* IE9 호환성 보기 */
  src: local("☺"),/* 웹 브라우저가 지원하지 않는 불필요한 웹 폰트 호출을 막는데 사용 */
       url(font/Kakao-aLt.eot?#iefix) format('embedded-opentype'),/* IE6-IE8 */
       url(font/Kakao-aLt.woff2) format('woff2'),/* WOFF의 차기 포맷 */
       url(font/Kakao-aLt.woff) format('woff'),/* 표준 브라우저 */
       url(font/Kakao-aLt.ttf) format('truetype'),/* Safari, Android, iOS */
       url(font/Kakao-aLt.svg#KakaoaLt) format('svg');/* TTF에서도 커버가 안되는 기기들에 대한 대응 */
}
body {font-family:'kakaoFont'}
/* 참고사항 : font-family 명이 같더라도 font-weight를 통하여 두께별로 설정이 가능합니다. (Light,bold,ExtraBold 등) 반대로 같은 폰트라도 font-family 명을 다르게 사용 하여 두께별로 사용 가능합니다 */

디자인 적용 이슈

PSD 상의 수치대로 넣고 테스트 - 나눔고딕적용, 흐린배경이 원본, letter-spacing: -1px 공통적용
1. ie8 - 디자인과 자간, 행간 달라짐, 로컬폰트와 웹폰트도 동일하지 않음
로컬 폰트
ie8 로컬 폰트 테스트
웹 폰트
ie8 웹 폰트 테스트
2. ie9, 10 - 디자인과 행간이 약간 틀림, bold 체의 굵기만 제외하면 웹폰트와 로컬 폰트 일치
로컬 폰트
ie9,10 로컬 폰트 테스트
웹 폰트
ie9,10 웹 폰트 테스트
3. ie11, Firefox - 디자인과 자간이 달라짐, bold 체의 굵기만 제외하면 웹폰트와 로컬 폰트 일치
로컬 폰트
ie11, Firefox 로컬 폰트 테스트
웹 폰트
ie11, Firefox 웹 폰트 테스트
4. Chrome, Opera - 디자인과 자간이 달라짐
로컬폰트와 웹폰트 동일
 Chrome, Opera 폰트 테스트
5. Safari - Chrome, Opera와 비슷하나 bold체에 대한 행간이 약간 틀림
로컬폰트와 웹폰트 동일
 Safari 폰트 테스트

지금까지 웹폰트 (Web Font)에 대해 살펴보았습니다.
다음 시간에 새로운 주제로 찾아뵙겠습니다.
감사합니다.

저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

웹폰트 (Web Font)  (0) 2016.10.31
flexbox  (0) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

지식공유/웹표준기술

flexbox

지식공유/웹표준기술|입력 2016.09.30 11:38
안녕하세요 다룸 입니다. 오늘은 "flexbox"에 대해 공유드리려고 합니다.

배경
  • 플렉스 레이아웃(Flexible Box) 모듈은 컨테이너 크기가 정적이든 동적이든 상관없이, 컨테이너 항목들 사이의 공간을 보다 효율적으로 유연하게 배치, 정렬 및 분배하도록 하는 것을 목적으로 합니다.
  • 플렉스 레이아웃(Flexible Box)의 바탕이 되는 주제는 대부분의 디스플레이 장치와 모든 종류의 화면 크기를 대응하고, 너비, 높이, 순서를 변경하며, 플렉스 컨테이너(flex container)는 사용 가능한 공간 내에서 항목을 최대한 채우기 위해 확장하거나, 넘치는 것을 방지하기 위해 축소합니다.
  • 가장 중요한 것은, 플렉스 박스(flex box)는 일반적인 레이아웃과는 대조적으로 방향에 얽매이지 않지만 크고 복잡한 응용 프로그램을 지원하기 위한 유연성이 부족합니다.
  • 플렉스박스 레이아웃은 대규모 응용 프로그램의 레이아웃을 위한 소규모의 레이아웃, 그리드 레이아웃의 구성 요소에 가장 적합합니다.
기본 사항 및 용어

Properties for the Parent (flex container) - 부모에 대한 속성

display
.container{display:flex} /* 블록 레벨 */
.container{display:inline-flex} /* 인라인 레벨 */
flex-direction
  • 어떤 방향으로든 정렬할 수 있습니다.
  • 순서를 뒤집거나 원하는 순서로 배치할 수 있습니다.
  • 브라우저(스크린)화면크기에 반응하여 유동적으로 크기를 변경할 수 있습니다.
  • 형제요소나 부모요소에 영향을 주지 않고 정렬이 가능합니다.
.container{flex-direction:column-reverse} /* 아래서 위로 */
.container{flex-direction:column} /* 위에서 아래로 */
.container{flex-direction:row} /* 기본값 : 왼쪽에서 오른쪽으로 */
.container{flex-direction:row-reverse} /* 오른쪽에서 왼쪽으로 */
flex-wrap
  • 기본적으로 flexible item을 모두 한 줄로 정렬됩니다. 속성에 따라 변경 할 수 있습니다.
.container{flex-wrap:nowrap} /* 기본값 : 단일라인 왼쪽에서 오른쪽으로 */
.container{flex-wrap:wrap} /* 멀티라인 왼쪽에서 오른쪽으로 */
.container{flex-wrap:wrap-reverse} /* 멀티라인 오른쪽에서 왼쪽으로 *
justify-content
.container{justify-content:flex-start} /* 기본값 : 왼쪽정렬 */
.container{justify-content:flex-end} /* 오른쪽 정렬 */
.container{justify-content:center} /* 가운데 정렬 */
.container{justify-content:space-between} /* flex item들간의 공간을 동일하게 주며 정렬 */
.container{justify-content:space-around} /* flex item의 좌우 여백을 동일하게 주며 정렬(여백은 겹치지 않습니다.) */
align-items
.container{align-items:flex-start} /* 위로 정렬 */
.container{align-items:flex-end} /* 아래로 정렬 */
.container{align-items:center} /* 가운데로 정렬 */
.container{align-items:baseline} /* flex item들의 인라인요소(텍스트)들이 같은 라인으로 정렬 */
.container{align-items:stretch} /* 기본값 : 꽉차게 노출 */
align-content
  • 라인이 두줄 이상일 경우 라인들의 세로정렬 속성
.container{align-content:flex-start} /* 위로 정렬 */
.container{align-content:flex-end} /* 아래로 정렬 */
.container{align-content:center} /* 가운데로 정렬 */
.container{align-content:space-stretch} /* 기본값 : 꽉차게 노출 */
.container{align-content:space-between} /* 라인들간의 공간을 동일하게 주며 정렬 */
.container{align-content:space-around} /* 라인들간의 상하여백을 동일하게 주며 정렬(여백은 겹치지 않습니다.) */

Properties for the Children (flex items) - 자식에 대한 속성

order
컨테이너 안에 있는 플렉스 요소들의 순서를 설정합니다.
플렉스 항목에 지정해야하며, order 값이 동일할 경우마크업 순서대로 나열됩니다.
  • number : 플렉스 항목의 순서를 지정합니다. (기본값 0 / 정수 단위)
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{order:2}
.item2{order:4}
.item3{order:1}
.item4{order:5}
.item5{order:3}
flex-grow
이것은 필요에 따라 플렉스 아이템이 사용가능 공간 내에서 얼마나 확장할지 결정합니다.
지정된 플렉스 항목에 남는 공간 중 어느정도를 분배하지 비율을 결정하는 역할을 합니다.
예를들어 모든 항목이 1일 경우 컨테이너의 공간은 동등하게 분배되지만, 그중 하나의 아이템이 2일 경우 해당 아이템은 2배의 공간을 차지하게 됩니다.
  • number : 플렉스 항목의 순서를 지정합니다. (기본값 0 / 정수 단위)
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{flex-grow:1}
.item2{flex-grow:2}
flex-shrink
필요한 경우 플렉스 아이템이 컨테이너 공간 내에서 얼마나 축소할지 결정합니다.
  • number : 축소시킬 값을 지정합니다. (기본값 1 / 정수 단위)
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{flex-shrink:1}
.item2{flex-shrink:3}
flex-basis
플렉스 항목의 초기 크기를 설정합니다.
길이(e.g. 20px, 20%, 5em 등) 또는 키워드를 지정합니다.
  • number : 기본값을 px,pt,%, em 등으로 지정할 수 있습니다.
  • auto : 기본값. 길이는 플렉스 항목(flexible item) 길이와 같습니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item1{flex-basis:40px}
.item2{flex-basis:80px}
flex
flex은 축약 속성으로 flex-grow, flex-shrink, flex-basis를 함께 선언할 수 있습니다.
전체 표기 시 .item {flex : <glow> <shrink> <basis>} 에 두번째(shrink)와 세번째(basis) 변수는 선택 사항이며, 기본값은 0 1 auto 입니다.
  • flex-glow : 확장할 값을 지정합니다.
  • flex-shrink : 축소할 값을 지정합니다.
  • flex-basis : item의 길이를 지정합니다.
  • auto : 1 1 auto
  • initial : 0 1 auto
  • none : 0 0 auto
/* Two values: flex-grow | flex-basis */
.item{flex:1 30px}
 
/* Two values: flex-grow | flex-shrink */
.item2{flex:2 2}
 
/* Three values: flex-grow | flex-shrink | flex-basis */
.item3{flex:2 2 10%}
 
/* Global values */
.item{flex:auto}
.item{flex:none}}
align-self
align-self는 플렉스 항목이 어떤 방식으로 정렬될 것인지 지정하는 속성이며, 각 플렉스 항목에 개별적으로 적용할 수 있습니다.
  • stretch : 컨테이너에 맞춰 모든 플렉스 항목들의 높이값이 동일하도록 조정합니다. (기본값)
  • flex-start : 플렉스 컨테이너의 시작 부분(왼쪽)에 위치합니다. 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정됩니다.
  • flex-end : 플렉스 항목들을 컨테이너의 아래쪽으로 위치합니다.
  • center : 각 항목의 위 아래 잔여 공간을 동일하게 분배하기 때문에 각 항목이 수직을 기준으로 중앙에 정렬합니다.
  • baseline : 모든 플렉스 항목을 콘텐츠에 지정된 기준선을 중심으로 정렬합니다. 기준선은 각 항목마다 다를 수 있습니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.
.item{align-self:center}
.item:nth-child(1){align-self:flex-start} /* 컨테이너의 시작 부분(왼쪽)에 위치 */
.item:nth-child(3){align-self:flex-end} /* 컨테이너의 아래쪽으로 위치 */

브라우저 지원현황

브라우저 지원현황
Property Chrome
-webkit-
IE Firefox
-moz-
Safari
-webkit-
Opera
-o-
prefix를 이용한 지원

display

flex-direction

flex-wrap

flex-flow

justify-content

order

flex-grow

flex-shrink

flex-basis

flex

29.0 11.0 28.0 9.0 17.0

Chrome 21.0

safari 6.1

FF 18.0

align-items

align-self

21.0 20.0 12.1

safari 7.0

align-content

28.0

지금까지 flexbox에 대해 살펴보았습니다.
다음 시간에 새로운 주제로 찾아뵙겠습니다.
감사합니다.

저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

웹폰트 (Web Font)  (0) 2016.10.31
flexbox  (0) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해 공유드리려고 합니다.

CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용

1안 : Mobile → Tablet → PC
PC의 모든 브라우저가 미디어쿼리를 지원하지 않음에 따라, 미디어쿼리를 지원하지 않는 IE 6~8 에서는 모바일 화면이 기본으로 노출되버림.
해결책은 다음과 같음.
  • 모바일용 CSS 코드를 먼저 작성하고 미디어쿼리로 감싸지 않음.
  • IE 6~8 을 위한 JS 라이브러리
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. 모바일 (뷰포트너비 640px 미만) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640ox 이상) */
    @media all and (min-width:640px) {
        .sample {background-color:red}
    }
     
    /* 4. PC (해상도 1024px 이상) */
    @media all and (min-width:1024px) {
        .sample {background-color:green}
    }
    • 디자인에 따라 미디어쿼리 분기점은 조정 가능.
  • IE 6~8 을 위한 JS 라이브러리
    < head>
    <!--[if lt IE 9]>
    	<script type="text/javascript" src="respond.min.js"></script>
    <![endif]-->
    < /head>
     
    <!-- respond.min.js 라이브러리를 사용하면 IE 6~8 브라우저도 미디어쿼리를 해석할 수 있다. (라이센스: MIT.) -->>
    • ie 6~8 Media Queries 대응을 위한 스크립트 - https://github.com/scottjehl/Respond/
    • respond.min.js 유의사항
      • 로컬 환경에서 동작하지 않음.
      • 미디어쿼리 작성시 all and 키워드를 생략하면 동작하지 않음.
        @media all and (조건문){실행문}
    • 페이지가 무거운 경우 미디어쿼리 구문 안쪽 코드가 늦게 표시되어 IE 6~8 브라우저에서 모바일 화면이 잠깐 노출될 수 있음.
2안 : Mobile 세로(Portrait) → Mobile 가로(Landscape) → Tablet 세로(Portrait) → Tablet 가로(Landscape) → PC
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
    .sample {background-color:black}
     
    /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
    @media all and (min-width:640px) and (orientation:landscape){
        .sample {background-color:green}
    }
     
    /* 4. Tablet 세로(Portrait) (해상도 768x 이상) */
    @media all and (min-width:768px) and (orientation:portrait){
        .sample {background-color:red}
    }
     
    /* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
    @media all and (min-width:1024px) and (orientation:landscape){
        .sample {background-color:blue}
    }
     
    /* 6. PC (해상도 1025px 이상) */
    @media all and (min-width:1025px){
        .sample {background-color:yellow}
    }
주의사항
해상도 1024px 이하인 PC화면에서는 Tablet화면이 노출된다.
이를 방지하고자 UA(userAgent)값으로 PC화면에서 Tablet화면이 노출이 안되게 작업합니다.
/* 4. Tablet 세로(Landscape) (해상도 768x 이상) */
@media all and (min-width:768px) and (orientation:portrait){
    html:not(.pc) .sample {background-color:red}
}
 
/* 5. Tablet 가로(Landscape) (해상도 1024px 이하) */
@media all and (min-width:1024px) and (orientation:landscape){
    html:not(.pc) .sample {background-color:blue}
}
						
3안 : PC → Tablet → Mobile
미디어쿼리를 지원하지 않는 IE 6~8 에서도 PC 화면이 기본으로 보이므로 문제되지 않습니다.
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. PC (해상도 1024px 이상) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 1024px 이하) */
    @media all and (max-width:1024px) {
        .sample {background-color:red}
    }
     
    /* 4. 모바일 (해상도 640px 이하) */
    @media all and (max-width:640px) {
        .sample {background-color:green}
    }
4안 : Mobile 세로(Portrait) → Mobile 가로(Landscape)
  • CSS 코딩순서 및 미디어 쿼리 분기점 (레이아웃 변경 포인트)
    /* 1. 공통 (Reset, Common) */
     
    /* 2. Mobile 세로(Portrait) (해상도 640px 이하) */
    .sample {background-color:black}
     
    /* 3. Mobile 가로(Landscape) (해상도 640px 이상) */
    @media only screen and (min-width :640px) {
        .sample {background-color:green}
    }

지금까지 반응형웹 대해 살펴봤습니다.
이후 새로운 주제로 찾아뵙도록 하겠습니다.
감사합니다.


by. UI개발팀 smoothie




저작자 표시 비영리 변경 금지
신고

'지식공유 > 웹표준기술' 카테고리의 다른 글

웹폰트 (Web Font)  (0) 2016.10.31
flexbox  (0) 2016.09.30
반응형 웹 4/4  (0) 2016.09.09
반응형 웹 3/4  (0) 2016.08.26
반응형 웹 2/4  (0) 2016.08.12
반응형 웹 1/4  (0) 2016.07.29
Posted by darum

받은 트랙백이 없고 댓글이 없습니다.

전체 댓글