'지식공유/웹표준기술'에 해당되는 글 6건

  1. 2016.10.31 웹폰트 (Web Font) (9)
  2. 2016.09.30 flexbox (3)
  3. 2016.09.09 반응형 웹 4/4
  4. 2016.08.26 반응형 웹 3/4
  5. 2016.08.12 반응형 웹 2/4
  6. 2016.07.29 반응형 웹 1/4

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)  (9) 2016.10.31
flexbox  (3) 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

트랙백 0개, 댓글 9개가 달렸습니다.

전체 댓글
MaryJRib | (2020.10.27 23:59)

Press alt + / to open this menu. THIS IS SOME GAY SHIT from Instagram tagged as Meme. This is where i upload shit that was from games I play. The song was released on March 4, , through Darkroom and Interscope Records. https://vipboy.info Sep 26, В В· Find gay cock licking sex videos for free, here on Our porn search engine delivers the hottest full-length scenes every time. 7 min Boyxxxfun - k Views -. Look through the newest members below and you may just find your ideal partner.

contactlpmurk | (2021.01.09 16:13)

Good whatever time of day it is where you are!

We offer sending newsletters via follow-up forms to the sites of business organizations via any domain zones of the world in any languages.

Your commercial offer is sent to E-mail of business organization 100 percent will get to inside of the inbox folder!

2000 bases:
https://xn----7sbb1bbndheurc1a.xn--p1ai/prajs-list/

Test:
twenty thousand messages on foreign zones to your E-mail - 20 dollars.
We need from You only E-mail, title and text of the letter.

In our price list there are more 800 databases for all countries of the world.
Common databases:
All Europe 44 countries 60726150 of domain names - 1100$
All European Union 28 countries 56752547 of sites- 1000$
All Asia 48 countries 14662004 of domains - 300$
All Africa 50 countries 1594390 of domains - 200$
All North and Central America in 35 countries 7441637 of domains - 300$
All South America 14 countries 5826884 of domains - 200$
New domain names from around the world registered 24-48 hours ago. (A cycle of 15 mailings during the month) - 500$
Companies and Enterprises of the Russian Federation 4025015 - 300$
Ukraine 1114526 of sites - 100$
All Russian-speaking countries minus Russia are 14 countries and there are 1979217 of domain names - 200$
New sites of the Russia, registered 24-48 hours ago (A cycle of 15 mailings during the month) - 250$

Our databases:
WHOIS databases of sites for all countries of the world.
You can purchase our databases separately from newsletter's service at the request.

P.S.
Please, do not respond to this offer from your email account, as it has been generated in automatic mode and will not reach us!
Contact Feedback form =» https://xn----7sbb1bbndheurc1a.xn--p1ai/to-order/

PRICE LIST:

Test mailing: $20 – 20000 contact forms websites

All Europe 44 countries there are 60726150 websites – $1100

All EU 28 countries there are 56752547 websites – $1000

All Asia 48 countries there are 14662004 websites – $500

All Africa 50 countries there are 1594390 websites – $200

All North and Central America is 35 countries there are 7441637 websites – $300

All South America 14 countries there are 5826884 websites – $200

Top 1 Million World’s Best websites – $100

Top 16821856 the most visited websites in the world – $300

New websites from around the world registered 24-48 hours ago. (A cycle of 15 mailings during the month) – 500$

Businesses and organizations of the Russian Federation – there are 4025015 websites – $300

All Russian-speaking countries minus Russia – there are 14 countries and 2440822 websites – $200

New websites of the Russian Federation, registered 24-48 hours ago. (A cycle of 15 mailings during the month) – 250$

1499203 of hosting websites around the world (there are selections for all countries, are excluded from databases for mailings) – $150

295285 websites of public authorities of all countries of the world (selections for all countries, are excluded from databases for mailings) – $100

3516251 websites online stores Worldwide – $250

CMS mailings:

3dCart 14689 websites - $50
Adobe CQ5 133567 websites - $80
Advance 17589 websites - $50
AdVantShop.NET 2453 websites - $30
ALMA 7095 websites - $30
Ametys 2389 websites - $30
Amiro 29587 websites - $30
Angora 20357 websites - $50
AVS 1369 websites - $30
BbPress 1487 websites - $30
BESTWEB 2699 websites - $30
BigCommerce 78257 websites - $50
Bitrix 319687 websites - $80
Blogger 658267 websites - $80
Blogspot 279865 websites - $80
BuddyPress 51477 websites - $50
Burning Board 4659 websites - $30
Catalyst Web 11689 websites - $50
ClassiPress 11796 websites - $50
CMSimple 11052 websites - $30
Concrete5 72100 websites - $50
Contao 110897 websites - $80
CONTENIDO 5069 websites - $30
Convio 2268 websites - $30
Coppermine Photo 1296 websites - $30
CS Cart 11400 websites - $30
Datalife Engine 42587 websites - $50
Dede 230589 websites - $100
DedeEIMS 96068 websites - $50
DIAFAN 4058 websites - $30
Discuz 47962 websites - $50
Django 71167 websites - $50
DokuWiki 9588 websites - $30
Dotnetnuke 82964 websites - $50
Drupal 978298 websites - $100
EasyBlog 1165978 websites - $100
EPiServer 29876 websites - $50
ExpressionEngine 1769823 websites - $150
eZ Publish 5367 websites - $30
F- 9356 websites - $30
FireBoard 1567 websites - $30
General Blogs 2067 websites - $30
GetSimple 23094 websites - $50
Host 6871 websites - $30
HostCMS 5042 websites - $30
HubSpot 31762 websites - $50
i- 9438 websites - $30
Image 1368 websites - $30
InSales 14149 websites - $50
InSales 11081 websites - $30
InstantCMS 4136 websites - $30
InteractiveBBS 32367 websites - $50
Invision Power Board 2430 websites - $30
IPBoard 2266 websites - $30
IT 15189 websites - $50
jforum 1056 websites - $30
jobberBase 3387 websites - $30
Joomla K2 154367 websites - $80
Joomla 1906994 websites - $200
Koobi 3722 websites - $30
Liferay 5137 websites - $30
Made Simple 20567 websites - $50
Magento 369447 websites - $80
MediaMaxScript 103896 websites - $80
MediaWiki 41468 websites - $50
Microsoft SharePoint 13198
MODx 64023 websites - $50
Moodle 8195 websites - $30
Movable Type 13096 websites - $50
MyBB 4367 websites - $30
myUPB 3397 websites - $30
NetCat 7294 websites - $30
NG 18356 websites - $50
NING 3687 websites - $30
NopCommerce 18600 websites - $30
Open 5916 websites - $30
OpenCart 667000 websites - $80
Osclass 4652 websites - $30
osCommerce 68468 websites - $50
OUR- 3096 websites - $30
OXID eShop 12200 websites - $50
Oxwall 6800 websites - $30
Parallels Plesk Sitebuilder 174216 websites - $80
php 14367 websites - $50
php Link 2298 websites - $30
phpBB 24400 websites - $30
PHP-Fusion 2596 websites - $30
PHPMelody 2365 websites - $30
PHP-Nuke 2489 websites - $30
PHPShop 2667 websites - $30
PHPWeb 29789 websites - $50
PHPWind 4032 websites - $30
Plone 84962 websites - $50
PowerEasy 1697 websites - $30
Prestashop 434100 websites - $80
Question2Answer 5598 websites - $30
R 296498 websites - $80
ReadyScript 6487682 websites - $80
S.Builder 394367 websites - $80
Shopify 6093709 sites websites - $400
Shoutbox 145564 websites - $80
SilverStripe 31721 websites - $50
Simpla 17429 websites - $50
Sitecore 74861 websites - $50
Sitefinity 4183 websites - $30
SMF 8111 websites - $30
SocialGO 54267 websites - $50
SPIP 28269 websites - $50
Squarespace 1098231 websites - $100
StoreLand 8257 websites - $30
SupeSite 12367 websites - $50
Textpattern 10900 websites - $30
TikiWiki 1446 websites - $30
Tilda 47396 websites - $50
Tumblr 302357 websites - $80
TYPO3 845009 websites - $80
Umbraco 146064 websites - $80
UMI.CMS 13191 websites - $50
VamShop 1737 websites - $30
vBulletin 14460 websites - $30
Volusion 16006 websites - $50
WallpaperSiteScript 2811 websites - $30
Weebly 191753 websites - $80
Wix 3379081 sites websites - $250
WooCommerce 4459525 websites - $310
Wordpress 35354537 websites - $650
XenForo 21105 websites - $30
XOOPS 20467 websites - $50
XpressEngine 8565 websites - $30
Zen Cart 26524 websites - $30

Country:

.ae 200462 websites UAE - $50
.ae 1820 websites International zone UAE:.com .net .biz .info .name .tel
.ag 11931 websites Antigua and Barbuda - $50
.ai 33130 websites Anguilla - $50
.am 21995 websites Armenia - $50
.am 1684 websites International zone Armenia:.com .net .biz .info .name .tel
.ar 782608 websites Argentina - $80
.ar 75496 websites International zone Argentina:.com .net .biz .info .name .tel .mobi .asia-$50
.ar.com 135 websites - $30
.at 1356722 websites Austria - $100
.at 181907 websites International zone Austria :.com .net .biz .info .name
.au 2432174 websites Australia - $150
.au 461279 websites International zone Australia:.com .net .biz .info .name
.az 17855 websites Azerbaijan - $50
.az 2036 websites International zone Azerbaijan:.com .net .biz .info .name .tel .mobi .asia-$30
.ba 15725 websites Bosnia and Herzegovina - $30
.ba 2291 websites international zone Bosnia and Herzegovina:.com.net.biz.info.org.name.tel.mobi.asia-$30
.be 1349658 websites Belgium - $100
.be 1056248 websites International zone Belgium:.com .net .biz .info .name
.bg 54418 websites Bulgaria - $50
.bg 50685 websites International zone Bulgaria:.com .net .biz .info .name
.bo 2602 websites Bolivia - $30
.bo 29415 websites International zone Bolivia:.com .net .biz .info .name .tel .mobi .asia-$50
.br 3205100 websites Brazil - $200
.br 1230078 websites International zone Brazil:.com .net .biz .info .name .
.by 99148 websites Belarus - $50
.by 1574 websites International zone Belarus:.com .net .biz .info .name .tel
.ca 2587463 websites Canada - $150
.ca 288395 websites International zone Canada:.com .net .biz .info .name
.cc 436396 websites - $80
.cc 1920589 websites Cocos Keeling Islands- $150
.cf 2461460 websites Central African Republic - $150
.cg 526 websites Congo - $30
.ch 1629450 websites Switzerland - $100
.ch 205292 websites International zone Switzerland:.com .net .biz .info .name .tel .mobi .asia-$50
.ci 5794 websites Cote d'Ivoire - $30
.ci 112 websites International zone Cote d'Ivoire:.com .net .biz .info .name
.cl 590401 websites Chile - $80
.cl 65996 websites International zone Chile:.com .net .biz .info .name .tel .mobi .asia-$50
.cm 29221 websites Cameroon- $50
.cn 23160610 websites China - $600
.cn 1372416 websites International zone China:.com .net .biz .info .name .tel .mobi .asia-$100
.co 1878923 websites Colombia - $100
.co 10854 websites International zone Colombia:.com .net .biz .info .name .tel .mobi .asia-$30
.cx 15753 websites Christmas Island - $50
.cy 11092 websites Cyprus - $50
.cy 744 websites International zone Cyprus:.com .net .biz .info .name .tel .mobi .asia-$30
.cz 1001208 websites Czech Republic - $100
.cz 193400 websites International zone Czech Republic:.com .net .biz .info .name .tel .mobi .asia-$50
.de 15078512 websites Germany - $350
.de 3894156 websites International zone Germany:.com .net .biz .info .name .tel .mobi .asia-$150
.dk 1319155 websites Denmark - $100
.dk 148164 websites International zone Denmark:.com .net .biz .info .name .tel .mobi .asia-$50
.dm 23318 websites Dominica - $50
.dn.ua 1835 websites - $30
.do 5255 websites Dominican Republic- $30
.dy.fi 1112 websites - $30
.dz 5382 websites Algeria - $30
.ec 11731 websites Ecuador - $50
.ec 2897 websites International zone Ecuador:.com .net .biz .info .name .tel .mobi .asia-$30
.ee 131791 websites Estonia- $50
.ee 10490 websites International zone Estonia:.com .net .biz .info .name .tel .mobi .asia-$30
.es 1509048 websites Spain - $100
.es 683845 websites International zone Spain:.com .net .biz .info .name .tel .eu 3046076 websites Europe - $150
.eu 633384 websites International zone Europe:.com .net .biz .info .name .fi 361111 websites Finland - $80
.fi 69631 websites International zone Finland:.com .net .biz .info .name .fr 2810983 websites France - $150
.fr 639546 websites International zone France:.com .net .biz .info .name .ge 24598 websites Georgia - $50
.ge 1676 websites International zone Georgia:.com .net .biz .info .name .tel .gf 996 websites French Guiana - $30
.gg 10528 websites Guernsey islands - $50
.gh 703 websites Ghana - $30
.gi 981 websites Gibraltar - $30
.gp 2044 websites Guadeloupe - $30
.gq 2027422 websites Equatorial Guinea - $100
.gr 327215 websites Greece - $80
.gr 57984 websites International zone Greece:.com .net .biz .info .name .tel .mobi .asia-$150
.gt 15351 websites Guatemala - $50
.hk 116093 websites Hong Kong - $50
.hm 335 websites Heard & McDonald islands - $30
.hn 4732 websites Honduras - $30
.hr 75736 websites Croatia - $50
.hr 16592 websites International zone Croatia:.com .net .biz .info .name .tel .mobi .asia
.ht 1299 websites Haiti - $30
.hu 53940 websites International zone Hungary:.com .net .biz .info .name .tel .mobi .asia-$50
.ie 209620 websites Ireland - $50
.ie 49861 websites International zone Ireland:.com .net .biz .info .name .il 196266 websites Israel - $80
.il 38537 websites International zone Israel:.com .net .biz .info .name .tel .in 1157482 websites India - $100
.in 266179 websites International zone India:.com .net .biz .info .name .tel .io 496216 websites British Indian Ocean - $80
.iq 2401 websites Iraq - $30
.ir 574258 websites Iran - $80
.ir 15487 websites International zone Iran:.com .net .biz .info .name .tel .mobi .asia
.it 2410105 websites Italy – $150
.it 954040 websites International zone Italy:.com.net.biz.info.org.name.tel.mobi.asia-$100
.je 3016 websites Ireland - $30
.jp 1825219 websites Japan - $150
.jp 4683252 websites International zone Japan:.com.net.biz.info.org.name.tel.mobi.asia-$200
.jp.net 5170 websites - $30
.ke 14677 websites Kenya - $50
.kg 10350 websites Kyrgyzstan - $30
.kg 664 websites International zone Kyrgyzstan:.com .net .biz .info .name .tel .mobi .asia-$30
.ki 79 websites Kiribati - $30
.kn 3211 websites Saint Kitts and Nevis - $30
.kr 272463 websites Korea- $80
.kw 484 websites Kuwait - $30
.ky 5783 websites Cayman Islands - $30
.kz 113180 websites Kazakhstan - $80
.kz 5876 websites International zone Kazakhstan:.com .net .biz .info .name .tel .mobi .asia-$30
.lc 1121 websites Saint Lucia - $30
.lk 32654 websites Sri Lanka - $30
.lt 137666 websites Lithuania- $50
.lt 27710 websites International zone Lithuania:.com .net .biz .info .name .tel .mobi .asia- $50
.lu 74322 websites Luxembourg - $50
.lu 4125 websites International zone Luxembourg:.com .net .biz .info .name .tel .mobi .asia-$30
.lv 86593 websites Latvia - $50
.lv 8887 websites International zone Latvia:.com .net .biz .info .name .tel .mobi .asia-$30
.ma 59103 websites Morocco - $50
.mc 3046 websites Monaco - $30
.md 16730 websites Moldova - $50
.md 1293 websites International zone Moldova:.com .net .biz .info .name .tel .mobi .asia-$30
.me 761596 websites Montenegro - $80
.me 86897 websites International zone Montenegro:.com .net .biz .info .name .tel .mobi .asia-$50
.mg 3715 websites Madagascar- $30
.mk 13266 websites Macedonia - $50
.ml 2158835 websites Mali - $100
.mn 17044 websites Mongolia - $50
.mq 1112 websites Martinique (French) - $30
.mr 776 websites Mauritania - $30
.ms 7265 websites Montserrat - $30
.mt 1402 websites Malta - $30
.mu 6475 websites Maurifius - $30
.mv 1996 websites Maldives - $30
.mw 8579 websites Malawi - $30
.mx 670901 websites Mexico- $80
.mx 174571 websites International zone Mexico:.com .net .biz .info .name .tel .mobi .asia-$50
.my 143039 websites Malaysia- $50
.na 1094 websites - $30
.nc 3497 websites New Coledonia (French) - $30
.nl 3925784 websites Netherlands - $200
.nl 1019697 websites International zone Netherlands:.com .net .biz .info .name .tel .mobi .asia-$100
.no 620882 websites Norway - $80
.no 74318 websites International zone Norway:.com .net .biz .info .name .tel .mobi .asia-$50
.nu 255161 websites Niue- $50
.nz 593127 websites New Zealand - $80
.om 1701 websites Oman - $30
.pe 83224 websites Peru - $50
.pe 59157 websites International zone Peru:.com .net .biz .info .name .tel .mobi .asia-$50
.pk 44464 websites Pakistan - $50
.pl 1795299 websites Poland - $100
.pl 327587 websites International zone Poland:.com .net .biz .info .name .tel .mobi .asia-$50
.pr 1358 websites Puerto Rico - $30
.pt 263136 websites Portugal - $80
.pt 17691 websites International zone Portugal:.com .net .biz .info .name .tel .mobi .asia-$50
.py 5593 websites Paraguay - $30
.py 653 websites International zone Paraguay:.com .net .biz .info .name .tel .mobi .asia-$30
.re 15089 websites Reunion (French) - $50
.ro 424401 websites Romania - $80
.ro 42046 websites International zone Romania:.com .net .biz .info .name .tel .mobi .asia-$50
.rs 85503 websites Serbia - $50
.ru 5025331 websites Russian - $250
.ru 514668 websites International zone Russian:.com .net .biz .info .name .tel .mobi .asia-$80
.rw 3806 websites Rwanda - $30
.sa 20421 websites Saudi Arabia- $50
.sa 5064 websites International zone Saudi Arabia:.com .net .biz .info .name .tel .mobi .asia - $30
.sc 4442 websites Seychelles- $30
.se 1491677 websites Sweden - $100
.se 293316 websites International zone Sweden:.com .net .biz .info .name .tel .mobi .asia-$50
.sg 150351 websites Republic Of Singapore - $50
.sh 7560 websites Saint Helena - $30
.si 103778 websites Slovenia- $50
.si 12879 websites International zone Slovenia:.com .net .biz .info .name .tel .mobi .asia-$50
.sk 414198 websites Slovakia- $80
.sk 31572 websites International zone Slovakia:.com .net .biz .info .name .tel .mobi .asia-$50
.sm 8897 websites San Marino - $30
.sn 344 websites International zone Senegal:.com .net .biz .info .name .tel .mobi .asia-$30
.sn 4465 websites Senegal - $30
.sr 580 websites Suriname - $30
.sv 8432 websites Salvador- $30
.sx 2901 websites Sint Maarten - $30
.sy 2972 websites Syria - $30
.sz 321 websites Swaziland - $30
.tc 16384 websites Turks and Caicos Islands- $50
.tf 19841 websites French Sauthern Territory - $50
.tg 1230 websites Togo - $30
.th 22368 websites Kingdom Of Thailand- $50
.tj 6874 websites Tajikistan- $30
.tj 34 websites International zone Tajikistan:.com .net .biz .info .name .tel .mobi .asia
.tk 20085806 websites Tokelau - $500
.tl 2748 websites East Timor - $30
.tm 6395 websites Turkmenistan- $30
.tm 44 websites International zone Turkmenistan:.com .net .biz .info .name .tel .mobi .asia
.tr 243347 websites Turkey - $80
.tr 138818 International zone Turkey:.com .net .biz .info .name .tel .mobi .asia -$50
.tt 1017 websites Trinidad & Tobago - $30
.ua 553216 websites Ukraina - $80
.ua 147202 websites International zone Ukraine:.com .net .biz .info .name .tel .mobi .asia-$50
.ug 3806 websites Uganda - $30
.ug 720 websites International zone Uganda:.com .net .biz .info .name .tel .mobi.asia-$30
.uk 5975887 websites United Kingdom - $250
.uk 3304606 websites International zone United Kingdom:.com .net .biz .info .name .tel .mobi .asia-$150
.us 3139563 websites USA - $200
.us 578927 websites International zone USA:.com .net .biz .info .name .tel .mobi .asia-$80
.uy 15571 websites Uruguay - $50
.uy 31812 websites International zone Uruguay:.com .net .biz .info .name .tel .mobi .asia-$30
.uz 38357 websites Uzbekistan - $50
.uz 365 websites International zone Uzbekistan:.com .net .biz .info .name .tel .mobi .asia
.vc 18641 websites Saint Vincent & Grenadines - $50
.ve 14015 websites Venezuela - $50
.ve 2898 websites International zone Venezuela:.com .net .biz .info .name .tel .mobi .asia - $30
.vg 8389 websites Virgin Islands (British) - $50
.vi 109 websites Virgin Islands (US) - $30
.vn 436005 websites Vietnam - $80
.vn 161855 websites International zone Vietnam:.com .net .biz .info .name .tel .mobi .asia - $50
.vu 1051 websites Vanuatu - $30
.wf 1133 websites Wallis & Futuna Islands - $30
.ws 99308 websites Samoa - $80
.ye 18 websites Yemen - $30
.yt 2004 websites Mayotte - $30
.za 1008308 websites South Africa - $100

Metroidtic | (2021.03.14 06:11)

Грузы для балансировки https://tiretools.by/cat/gruziki-balansirovochnye-1442

Монтажная паста является неотъемлемым этапом обслуживания вашего авто каждые 10-15 тысяч километров пробега (либо не реже 1 раза в год). Это позволяет своевременно обнаружить и устранить любой дисбаланс колес. А значит, защитить автомобиль от дефектов рулевого управления, дефектов амортизаторов, подшипников и других неотъемлемых элементов подвески.

Также, специалисты рекомендуют купить грузики для шиномонтажа, и в том случае, - если диск был деформирован после попадания в люк, и если вы поставили новые шины и уже проехали на них 500 км.

Несоблюдение процедуры проведения балансировки опасно не столько потому, что впоследствии придется заплатить намного больше за починку, сколько потому, что дисбаланс колеса – возможная причина возникновения опасных ситуаций на дороге.

С большим удовольствием ответим на все интересующие вопросы по теме: https://tiretools.by/cat/gruziki-balansirovochnye-1442

Наш адрес:
Беларусь, Минский район, аг. Щомыслица, ул. Брестская 1-В

Контактные телефоны:
+375-29-602-61-67
+375-44-722-59-15

Вентили для колес https://tiretools.by/cat/ventili-dlya-koles-i-kamer-1444

ValeraDruzhininWaypE | (2021.03.27 07:32)

памятники с аркой на могилу - https://xn--90ahp.xn----7sbncac3aodlamf.xn--p1ai/pamyatnik-s-arkoi

Потеря близких для нас – всегда потрясение. Испытывая нравственные страдания и боль утраты близких нам людей, нам не просто заниматься коммерческими вопросами по организации захоронения, и очень часто, мы наблюдаем такую картину, когда нам предлагают свои услуги, которые мы не в состоянии оценить объективно! Кто-то заказывает крест или обычный памятник, кто-то - памятник с сердцем, укладывает тротуарную плитку, облагораживая могилу, заказывают различные ритуальные товары; такие как цветы, свечи, ленточки…
Всё это, без сомнения, невыносимые моральные страдания, которые, мы дополнительно испытываем в тот момент, когда мы скорбим по усопшим. И это очень горько! Я говорю о том, что было бы неплохо, если бы на этапе, когда мы ещё молоды и можем зарабатывать, мы могли бы точно так же, как и при оформлении страховки на жизнь или здоровье, формировать некий фонд для того, чтобы в случае нашей смерти, наши похороны проходили без нашего участия, и в тоже время, все эти душевные страдания не соприкасались с маркетингом. И этим мог бы заняться фонд, в котором мы откладывали средства на такой непредвиденный случай!
Здесь сразу несколько вопросов, которые могли бы встать после нашей смерти: это большое количество разных услуг, которые связаны с этим бизнесом: это либо памятники с аркой на могиле, либо какой-то определенный мрамор, это могут быть памятники с сердцами (семейные памятники). Мы также вынуждены облагораживать могилу, используя тротуарную плитку, в частности нам приходится докупать очень множество товаров, которые так или иначе, связаны с ритуальными товарами и или услугами: и это может быть просто крест на могилу, это могут и какие-то фигурные памятники из гранита, резные памятники, двойные памятники, если речь о несчастном случае и гибели нескольких близких нам людей! Одновременно памятники также бывает разных видов они бывают как вертикальные, так и горизонтальные, и в целом — это множество вопросов, которые в данный момент, когда это происходит, нам не хочется решать!
Решение на мой взгляд в ритуальных ФОНДАХ! И эту проблему можно было бы решить.

С большим удовольствием ответим на все интересующие вопросы по теме:
https://xn--90ahp.xn----7sbncac3aodlamf.xn--p1ai/pamyatniki-iz-granita-v-cheliabinske

ValeraDruzhininClicE | (2021.03.31 16:26)

купить вазу на могилу - https://xn--90ahp.xn----7sbncac3aodlamf.xn--p1ai/ritualnyie-tovary/kamiennyie-vazy-na-moghilu

Потеря близких для нас – всегда потрясение. Испытывая душевные страдания и боль потери близких нам людей, нам не просто заниматься коммерческими вопросами по организации захоронения, и почти всегда, мы наблюдаем такую картину, когда нам навязывают услуги, которые мы не в состоянии оценить объективно! Кто-то заказывает крест или обычный памятник, кто-то - памятник с сердцем, укладывает тротуарную плитку, облагораживая могилу, заказывают различные ритуальные товары; такие как цветы, свечи, ленточки…
Всё это, конечно же, невыносимые моральные страдания, которые, мы дополнительно испытываем в тот момент, когда мы скорбим по усопшим. И это очень горько! Я говорю о том, что было бы неплохо, если бы на этапе, когда мы ещё молоды и можем зарабатывать, мы могли бы точно так же, как и при оформлении страховки на жизнь или здоровье, формировать некий фонд для того, чтобы в случае нашей смерти, наши похороны проходили без нашего участия, и в тоже время, все эти душевные страдания не соприкасались с маркетингом. И этим мог бы заняться фонд, в котором мы откладывали средства на такой непредвиденный случай!
Здесь сразу несколько вопросов, которые могли бы встать после нашей смерти: это большое количество разных услуг, которые связаны с этим бизнесом: это либо памятники с аркой на могиле, либо какой-то определенный мрамор, это могут быть памятники с сердцами (семейные памятники). Мы также вынуждены облагораживать могилу, используя тротуарную плитку, в частности нам приходится докупать очень множество товаров, которые так или иначе, связаны с ритуальными товарами и или услугами: и это может быть просто крест на могилу, это могут и какие-то фигурные памятники из гранита, резные памятники, двойные памятники, если речь о несчастном случае и гибели нескольких близких нам людей! Одновременно памятники также бывает разных видов они бывают как вертикальные, так и горизонтальные, и в целом — это множество вопросов, которые в данный момент, когда это происходит, нам не хочется решать!
Решение на мой взгляд в ритуальных ФОНДАХ! И эту проблему можно было бы решить.

С большим удовольствием ответим на все интересующие вопросы по теме:
https://xn--90ahp.xn----7sbncac3aodlamf.xn--p1ai/elitnyie-pamiatniki

Подробнее о памятниках на сайте:
екб.каменное-дело.рф

ValeraDruzhininClicE | (2021.04.01 15:00)

заказать памятник из гранита - https://xn--90ahp.xn----7sbncac3aodlamf.xn--p1ai/pamyatniki-iz-granita-v-cheliabinske

Смерть близких для нас – всегда огромная потеря. Испытывая моральные страдания и горечь утраты близких нам людей, нам не просто заниматься коммерческими вопросами по организации захоронения, и очень часто, мы наблюдаем такую картину, когда нам предлагают свои услуги, которые мы не в состоянии оценить объективно! Кто-то заказывает крест или обычный памятник, кто-то - памятник с сердцем, укладывает тротуарную плитку, облагораживая могилу, заказывают различные ритуальные товары; такие как цветы, свечи, ленточки…
Всё это, само собой разумеется, невыносимые душевные страдания, которые, мы дополнительно испытываем в тот момент, когда мы скорбим по усопшим. И это очень горько! Я говорю о том, что было бы неплохо, если бы на этапе, когда мы ещё молоды и можем зарабатывать, мы могли бы точно так же, как и при оформлении страховки на жизнь или здоровье, формировать некий фонд для того, чтобы в случае нашей смерти, наши похороны проходили без нашего участия, и в тоже время, все эти душевные страдания не соприкасались с маркетингом. И этим мог бы заняться фонд, в котором мы откладывали средства на такой непредвиденный случай!
Здесь сразу несколько вопросов, которые могли бы встать после нашей смерти: это большое количество разных услуг, которые связаны с этим бизнесом: это либо памятники с аркой на могиле, либо какой-то определенный мрамор, это могут быть памятники с сердцами (семейные памятники). Мы также вынуждены облагораживать могилу, используя тротуарную плитку, в частности нам приходится докупать очень множество товаров, которые так или иначе, связаны с ритуальными товарами и или услугами: и это может быть просто крест на могилу, это могут и какие-то фигурные памятники из гранита, резные памятники, двойные памятники, если речь о несчастном случае и гибели нескольких близких нам людей! Одновременно памятники также бывает разных видов они бывают как вертикальные, так и горизонтальные, и в целом — это множество вопросов, которые в данный момент, когда это происходит, нам не хочется решать!
Решение на мой взгляд в ритуальных ФОНДАХ! И эту проблему можно было бы решить.

С большим удовольствием ответим на все интересующие вопросы по теме:
https://xn--90ahp.xn----7sbncac3aodlamf.xn--p1ai/fighurnyie-pamiatniki-iz-ghranita

Подробнее о памятниках на сайте:
екб.каменное-дело.рф

Olegtic | (2021.04.03 05:48)

Заплаты для камер https://tiretools.by/cat/latki-dlya-kamer-tech-1462

Грузики балансировочные является неотъемлемым этапом обслуживания автомобиля каждые 10-15 тысяч километров пробега (либо не реже 1 раза в год). Это позволяет вовремя выявить и устранить любой дисбаланс колес. А значит, защитить ваш автомобиль/транспортное средство от поломок рулевого управления, дефектов амортизаторов, подшипников и других важных элементов подвески.

Также, специалисты рекомендуют купить грузики для шиномонтажа, и в том случае, - если диск был деформирован после попадания в люк, и если вы поставили новые шины и уже проехали на них 500 км.

Несоблюдение процедуры проведения балансировки чревато не столько потому, что впоследствии придется переплатить существенно больше за починку, сколько потому, что вибрация колеса – возможная причина возникновения опасных ситуаций на дороге.

С большим удовольствием ответим на все интересующие вопросы по теме: https://tiretools.by/cat/pasta-dlya-shinomontazha-1532

Наш адрес:
Беларусь, Минский район, аг. Щомыслица, ул. Брестская 1-В

Контактные телефоны:
+375-29-602-61-67
+375-44-722-59-15

Латки для камер https://tiretools.by/cat/latki-dlya-kamer-tech-1462


Подробнее на нашем сайте
tiretools.by

MaryJsteag | (2021.04.20 04:30)

Le site est % gratuit et vous permet de faire des rencontres avec des hommes à Saint-Raphaël sans avoir à payer quoi que ce soit. onaoh.info est le leader dans les rencontres sérieuses francophones. Votre guide gay complet de Saint-Raphaël 🌈 Découvrez les lieux gays à ne pas rater Bons plans exclusifs│quartier gay│lieux de drague│hôtels gay-friendly│agenda gay. N’attendez plus et venez vous inscrire dès. Contactez et rencontrez des gays de Saint-Raphaël sur Mongars, le site de rencontres gay-only sur Saint-Raphaël.Rencontre homme sur Saint-Raphaël sur onaoh.info, célibataires sérieux qui rechechent l'amour. https://https://myptcindia.info Ville située dans le Var, Saint-Raphaël regorge de nombreux célibataires gays inscrits sur cette plateforme et qui n'attendent que vous. Rencontre Gay PAR RÉGION Alsace Aquitaine Auvergne Bourgogne Bretagne Centre Corse Franche-Comté Haute . Je m'inscris gratuitement.

Rencontre Г  Saint-RaphaГ«l % gratuit - Hommes cГ©libataires. Petites annonces gratuites classГ©es catГ©gorie rencontres - rencontre en ligne. onaoh.info est un site de petites annonces gratuites classГ©es par catГ©gories destinГ© aux annonceurs particuliers ou professionnels qui veulent vendre ou proposer des services catГ©gorie rencontres - rencontre en ligne. Petites annonces gratuites classГ©es catГ©gorie rencontres - rencontre en ligne. onaoh.info est un site de petites annonces gratuites classГ©es par catГ©gories destinГ© aux annonceurs particuliers ou professionnels qui veulent vendre ou proposer des services catГ©gorie rencontres - rencontre en ligne. rencontres et annonces gratuites Г  Saint-RaphaГ«l avec onaoh.info homme hГ©tГ©ro de 30 ans sГ©parГ©, recherche rencontre sГ©rieuse. recherche a faire des rencontre reel avec des femme dans ma region.Annonces gays pour rencontres locales rapides. Oulfa - Saint-RaphaГ«l.Contactez et rencontrez des gays de Saint-RaphaГ«l sur Mongars, le site de rencontres gay-only sur Saint-RaphaГ«l. https://faull.vintagedresses.info Oulfa - Saint-RaphaГ«l. rencontres et annonces gratuites Г  Saint-RaphaГ«l avec onaoh.info homme hГ©tГ©ro de 30 ans sГ©parГ©, recherche rencontre sГ©rieuse. recherche a faire des rencontre reel avec des femme dans ma region.Petites annonces gratuites classГ©es catГ©gorie rencontres - rencontre en ligne. onaoh.info est un site de petites annonces gratuites classГ©es par catГ©gories destinГ© aux annonceurs particuliers ou professionnels qui veulent vendre ou proposer des services catГ©gorie rencontres - rencontre en ligne. DestinГ© Г  mettre en contact les hommes entre eux, le site de rencontre gay Hugavenue vous offre la possibilitГ© de trouver l'Г©lu(e) de votre coeur parmi les cГ©libataires de Saint-RaphaГ«l. Rencontrer des milliers de cГ©libataires Г  Saint-RaphaГ«l.

Je m'inscris gratuitement. Le site est % gratuit et vous permet de faire des rencontres avec des hommes Г  Saint-RaphaГ«l sans avoir Г  payer quoi que ce soit. onaoh.info est le leader dans les rencontres sГ©rieuses francophones. https://zurg.jakvydelat.info Rencontre gay Г  Saint-RaphaГ«l. Rencontre gay Г  Saint-RaphaГ«l.

Rencontre à Saint-Raphaël % gratuit - Hommes célibataires. Ville située dans le Var, Saint-Raphaël regorge de nombreux célibataires gays inscrits sur cette plateforme et qui n'attendent que vous. Destiné à mettre en contact les hommes entre eux, le site de rencontre gay Hugavenue vous offre la possibilité de trouver l'élu(e) de votre coeur parmi les célibataires de Saint-Raphaël. https://mautaur.c-culture.info Rencontre Gay PAR RÉGION Alsace Aquitaine Auvergne Bourgogne Bretagne Centre Corse Franche-Comté Haute . Destiné à mettre en contact les hommes entre eux, le site de rencontre gay Hugavenue vous offre la possibilité de trouver l'élu(e) de votre coeur parmi les célibataires de Saint-Raphaël. Rencontrer des milliers de célibataires à Saint-Raphaël. Rencontrer des milliers de célibataires à Saint-Raphaël.

contactwfjwmt | (2021.05.21 06:35)

Good whatever time of day it is where you are!

We send Your commercial offers via contact forms to the sites offirms via all domain zones of the world.

Your letter is sent to electronic box of organization 100% will get to the incoming folder!

2000 bases:
https://xn----7sbb1bbndheurc1a.xn--p1ai/prajs-list/

Test:
twenty thousand messages on foreign zones to your email - 20 $.
We need from You only E-mail, title and text of the letter.

In our price there are more 800 databases for all countries of the world.
Common databases:
All Europe 44 countries 60726150 of domain names - 1100$
All European Union 28 countries 56752547 of domains- 1000$
All Asia 48 countries 14662004 of domain names - 300$
All Africa 50 countries 1594390 of sites - 200$
All North and Central America in 35 countries 7441637 of sites - 300$
All South America 14 countries 5826884 of domain names - 200$
New sites from around the world registered 24-48 hours ago. (A cycle of 15 mailings during the month) - 500$
Companies and Enterprises of Russia 4025015 - 300$
Ukraine 1114526 of domains - 100$
All Russian-speaking countries minus RF are 14 countries and there are 1979217 of domain names - 200$
New domains of the Russian Federation, registered 24-48 hours ago (A cycle of 15 mailings during the month) - 250$

Databases:
Whois-service databases of domains for all nations of the world.
You can purchase our databases separately from newsletter's service at the request.

P/S
Please, do not respond to this message from your mailbox, as it has been generated in automatic mode and will not reach us!
Contact Feedback form =» https://xn----7sbb1bbndheurc1a.xn--p1ai/to-order/

PRICE LIST:

Test mailing: $20 – 20000 contact forms websites

All Europe 44 countries there are 60726150 websites – $1100

All EU 28 countries there are 56752547 websites – $1000

All Asia 48 countries there are 14662004 websites – $500

All Africa 50 countries there are 1594390 websites – $200

All North and Central America is 35 countries there are 7441637 websites – $300

All South America 14 countries there are 5826884 websites – $200

Top 1 Million World’s Best websites – $100

Top 16821856 the most visited websites in the world – $300

New websites from around the world registered 24-48 hours ago. (A cycle of 15 mailings during the month) – 500$

Businesses and organizations of the Russian Federation – there are 4025015 websites – $300

All Russian-speaking countries minus Russia – there are 14 countries and 2440822 websites – $200

New websites of the Russian Federation, registered 24-48 hours ago. (A cycle of 15 mailings during the month) – 250$

1499203 of hosting websites around the world (there are selections for all countries, are excluded from databases for mailings) – $150

295285 websites of public authorities of all countries of the world (selections for all countries, are excluded from databases for mailings) – $100

13623819 websites online stores Worldwide – $350

CMS mailings:

3dCart 14689 websites - $50
Adobe CQ5 133567 websites - $80
Advance 17589 websites - $50
AdVantShop.NET 2453 websites - $30
ALMA 7095 websites - $30
Ametys 2389 websites - $30
Amiro 29587 websites - $30
Angora 20357 websites - $50
AVS 1369 websites - $30
BbPress 1487 websites - $30
BESTWEB 2699 websites - $30
BigCommerce 78257 websites - $50
Bitrix 319687 websites - $80
Blogger 658267 websites - $80
Blogspot 279865 websites - $80
BuddyPress 51477 websites - $50
Burning Board 4659 websites - $30
Catalyst Web 11689 websites - $50
ClassiPress 11796 websites - $50
CMSimple 11052 websites - $30
Concrete5 72100 websites - $50
Contao 110897 websites - $80
CONTENIDO 5069 websites - $30
Convio 2268 websites - $30
Coppermine Photo 1296 websites - $30
CS Cart 11400 websites - $30
Datalife Engine 42587 websites - $50
Dede 230589 websites - $100
DedeEIMS 96068 websites - $50
DIAFAN 4058 websites - $30
Discuz 47962 websites - $50
Django 71167 websites - $50
DokuWiki 9588 websites - $30
Dotnetnuke 82964 websites - $50
Drupal 978298 websites - $100
EasyBlog 1165978 websites - $100
EPiServer 29876 websites - $50
ExpressionEngine 1769823 websites - $150
eZ Publish 5367 websites - $30
F- 9356 websites - $30
FireBoard 1567 websites - $30
General Blogs 2067 websites - $30
GetSimple 23094 websites - $50
Host 6871 websites - $30
HostCMS 5042 websites - $30
HubSpot 31762 websites - $50
i- 9438 websites - $30
Image 1368 websites - $30
InSales 14149 websites - $50
InSales 11081 websites - $30
InstantCMS 4136 websites - $30
InteractiveBBS 32367 websites - $50
Invision Power Board 2430 websites - $30
IPBoard 2266 websites - $30
IT 15189 websites - $50
jforum 1056 websites - $30
jobberBase 3387 websites - $30
Joomla K2 154367 websites - $80
Joomla 1906994 websites - $200
Koobi 3722 websites - $30
Liferay 5137 websites - $30
Made Simple 20567 websites - $50
Magento 369447 websites - $80
MediaMaxScript 103896 websites - $80
MediaWiki 41468 websites - $50
Microsoft SharePoint 13198
MODx 64023 websites - $50
Moodle 8195 websites - $30
Movable Type 13096 websites - $50
MyBB 4367 websites - $30
myUPB 3397 websites - $30
NetCat 7294 websites - $30
NG 18356 websites - $50
NING 3687 websites - $30
NopCommerce 18600 websites - $30
Open 5916 websites - $30
OpenCart 667000 websites - $80
Osclass 4652 websites - $30
osCommerce 68468 websites - $50
OUR- 3096 websites - $30
OXID eShop 12200 websites - $50
Oxwall 6800 websites - $30
Parallels Plesk Sitebuilder 174216 websites - $80
php 14367 websites - $50
php Link 2298 websites - $30
phpBB 24400 websites - $30
PHP-Fusion 2596 websites - $30
PHPMelody 2365 websites - $30
PHP-Nuke 2489 websites - $30
PHPShop 2667 websites - $30
PHPWeb 29789 websites - $50
PHPWind 4032 websites - $30
Plone 84962 websites - $50
PowerEasy 1697 websites - $30
Prestashop 434100 websites - $80
Question2Answer 5598 websites - $30
R 296498 websites - $80
ReadyScript 6487682 websites - $80
S.Builder 394367 websites - $80
Shopify 6571650 sites websites - $400
Shoutbox 145564 websites - $80
SilverStripe 31721 websites - $50
Simpla 17429 websites - $50
Sitecore 74861 websites - $50
Sitefinity 4183 websites - $30
SMF 8111 websites - $30
SocialGO 54267 websites - $50
SPIP 28269 websites - $50
Squarespace 1098231 websites - $100
StoreLand 8257 websites - $30
SupeSite 12367 websites - $50
Textpattern 10900 websites - $30
TikiWiki 1446 websites - $30
Tilda 47396 websites - $50
Tumblr 302357 websites - $80
TYPO3 845009 websites - $80
Umbraco 146064 websites - $80
UMI.CMS 13191 websites - $50
VamShop 1737 websites - $30
vBulletin 14460 websites - $30
Volusion 16006 websites - $50
WallpaperSiteScript 2811 websites - $30
Weebly 191753 websites - $80
Wix 3379081 sites websites - $250
WooCommerce 6403862 websites - $400
Wordpress 35354537 websites - $650
XenForo 21105 websites - $30
XOOPS 20467 websites - $50
XpressEngine 8565 websites - $30
Zen Cart 26524 websites - $30

Country:

.ae 200462 websites United Arab Emirates - $50
.ae 1820 websites International zone United Arab Emirates:.com .net .biz .info .name .tel
.ag 11931 websites Antigua and Barbuda - $50
.ai 33130 websites Anguilla - $50
.am 21995 websites Armenia - $50
.am 1684 websites International zone Republic Of Armenia:.com .net .biz .info .name .tel
.ar 782608 websites Argentine Republic - $80
.ar 75496 websites International zone Argentina:.com .net .biz .info .name .tel .mobi .asia - $50
.ar.com 135 websites - $30
.at 1356722 websites Republic Of Austria - $100
.at 181907 websites International zone Republic Of Austria :.com .net .biz .info .name
.au 2432174 websites Australia - $150
.au 461279 websites International zone Australia:.com .net .biz .info .name
.az 17855 websites Azerbaijan - $50
.az 2036 websites International zone Republic Of Azerbaijan:.com .net .biz .info .name .tel .mobi .asia - $30
.ba 15725 websites Bosnia & Herzegovina - $30
.ba 2291 websites international zone Bosnia & Herzegovina:.com.net.biz.info.org.name.tel.mobi.asia-$30
.be 1349658 websites Kingdom Of Belgium - $100
.be 1056248 websites International zone Belgium:.com .net .biz .info .name
.bg 54418 websites Bulgaria - $50
.bg 50685 websites International zone Bulgaria:.com .net .biz .info .name
.bo 2602 websites Bolivia - $30
.bo 29415 websites International zone Plurinational State Of Bolivia:.com .net .biz .info .name .tel .mobi .asia-$50
.br 3205100 websites Brazil - $200
.br 1230078 websites International zoneBrazil:.com .net .biz .info .name .
.by 99148 websites Republic Of Belarus - $50
.by 1574 websites International zone Republic Of Belarus:.com .net .biz .info .name .tel
.ca 2587463 websites Canada - $150
.ca 288395 websites International zone Canada:.com .net .biz .info .name
.cc 436396 Cocos Keeling Islands websites - $80
.cc 1920589 websites Cocos Keeling Islands- $150
.cf 2461460 websites Central African Republic - $150
.cg 526 websites Republic Of The Congo - $30
.ch 1629450 websites Switzerland - $100
.ch 205292 websites International zone Swiss Confederation:.com .net .biz .info .name .tel .mobi .asia-$50
.ci 5794 websites Cote D'ivoire - $30
.ci 112 websites International zone Cote D'ivoire:.com .net .biz .info .name
.cl 590401 websites Republic Of Chile - $80
.cl 65996 websites International zone Republic Of Chile:.com .net .biz .info .name .tel .mobi .asia-$50
.cm 29221 websites Cameroon - $50
.cn 23160610 websites China - $600
.cn 1372416 websites International zone People's Republic Of China:.com .net .biz .info .name .tel .mobi .asia-$100
.co 1878923 websites Republic Of Colombia - $100
.co 10854 websites International zone Republic Of Colombia:.com .net .biz .info .name .tel .mobi .asia-$30
.cx 15753 websites Christmas - $50
.cy 11092 websites Cyprus - $50
.cy 744 websites International zone Cyprus:.com .net .biz .info .name .tel .mobi .asia-$30
.cz 1001208 websites Czech - $100
.cz 193400 websites International zone Czech Republic:.com .net .biz .info .name .tel .mobi .asia-$50
.de 15078512 websites Federal Republic Of Germany - $350
.de 3894156 websites International zone Germany:.com .net .biz .info .name .tel .mobi .asia-$150
.dk 1319155 websites Denmark - $100
.dk 148164 websites International zone Kingdom Of Denmark:.com .net .biz .info .name .tel .mobi .asia-$50
.dm 23318 websites Dominican - $50
.dn.ua 1835 websites - $30
.do 5255 websites Dominican- $30
.dy.fi 1112 websites - $30
.dz 5382 websites Democratic Republic Of Algeria - $30
.ec 11731 websites Ecuador - $50
.ec 2897 websites International zone Republic Of Ecuador:.com .net .biz .info .name .tel .mobi .asia-$30
.ee 131791 websites Estonian - $50
.ee 10490 websites International zone Estonian:.com .net .biz .info .name .tel .mobi .asia-$30
.es 1509048 websites The Kingdom Of Spain - $100
.es 683845 websites International zone The Kingdom Of Spain:.com .net .biz .info .name .tel .eu 3046076 websites European Union - $150
.eu 633384 websites International zone Europe:.com .net .biz .info .name .fi 361111 websites Republic of Finland - $80
.fi 69631 websites International zone Finland:.com .net .biz .info .name .fr 2810983 websites French Republic - $150
.fr 639546 websites International zone France:.com .net .biz .info .name .ge 24598 websites Georgia - $50
.ge 1676 websites International zone Georgia:.com .net .biz .info .name .tel .gf 996 websites French Guiana - $30
.gg 10528 websites Guernsey islands - $50
.gh 703 websites Ghana - $30
.gi 981 websites Gibraltar - $30
.gp 2044 websites Guadeloupe - $30
.gq 2027422 websites Equatorial Guinea - $100
.gr 327215 websites Hellenic Republic - $80
.gr 57984 websites International zone Greece:.com .net .biz .info .name .tel .mobi .asia-$150
.gt 15351 websites Republic Of Guatemala - $50
.hk 116093 websites Hong Kong Special Administrative Region Of China Hong Kong - $50
.hm 335 websites Heard & McDonald islands - $30
.hn 4732 websites Honduras - $30
.hr 75736 websites Croatia Hrvatska - $50
.hr 16592 websites International zone Croatia Hrvatska:.com .net .biz .info .name .tel .mobi .asia
.ht 1299 websites Republic Of Haiti - $30
.hu 53940 websites International zone Republic Of Hungary:.com .net .biz .info .name .tel .mobi .asia-$50
.ie 209620 websites Republic of Ireland - $50
.ie 49861 websites International zone Ireland:.com .net .biz .info .name .il 196266 websites Israel - $80
.il 38537 websites International zone The State Of Israel:.com .net .biz .info .name .tel .in 1157482 websites India - $100
.in 266179 websites International zone Republic Of India:.com .net .biz .info .name .tel
.io 496216 websites British Indian Ocean Territory - $80
.iq 2401 websites Republic Of Iraq - $30
.ir 574258 websites The Islamic Republic Of Iran - $80
.ir 15487 websites International zone Islamic Republic Of Iran:.com .net .biz .info .name .tel .mobi .asia
.it 2410105 websites Italian Republic – $150
.it 954040 websites International zone Italian Republic:.com.net.biz.info.org.name.tel.mobi.asia - $100
.je 3016 websites Republic of Ireland - $30
.jp 1825219 websites State of Japan - $150
.jp 4683252 websites International zone Japan:.com.net.biz.info.org.name.tel.mobi.asia - $200
.jp.net 5170 websites - $30
.ke 14677 websites Kenya - $50
.kg 10350 websites Kyrgyzstan - $30
.kg 664 websites International zone Kyrgyz Republic:.com .net .biz .info .name .tel .mobi .asia-$30
.ki 79 websites Kiribati - $30
.kn 3211 websites Saint Kitts and Nevis - $30
.kr 272463 websites Korea- $80
.kw 484 websites Kuwait - $30
.ky 5783 websites The Cayman Islands - $30
.kz 113180 websites Kazakhstan - $80
.kz 5876 websites International zone Republic Of Kazakhstan:.com .net .biz .info .name .tel .mobi .asia-$30
.lc 1121 websites Saint Lucia - $30
.lk 32654 websites Sri Lanka - $30
.lt 137666 websites Lithuania- $50
.lt 27710 websites International zone Lithuania:.com .net .biz .info .name .tel .mobi .asia- $50
.lu 74322 websites Luxembourg - $50
.lu 4125 websites International zone The Grand Duchy Of Luxembourg:.com .net .biz .info .name .tel .mobi .asia-$30
.lv 86593 websites Latvia - $50
.lv 8887 websites International zone Latvia:.com .net .biz .info .name .tel .mobi .asia-$30
.ma 59103 websites The Kingdom Of Morocco - $50
.mc 3046 websites Principality Of Monaco - $30
.md 16730 websites Moldova - $50
.md 1293 websites International zone Republic Of Moldova:.com .net .biz .info .name .tel .mobi .asia-$30
.me 761596 websites Montenegro - $80
.me 86897 websites International zone Montenegro:.com .net .biz .info .name .tel .mobi .asia-$50
.mg 3715 websites Republic Of Madagascar- $30
.mk 13266 websites Republic Of Macedonia - $50
.ml 2158835 websites Mali - $100
.mn 17044 websites Mongolia - $50
.mq 1112 websites Martinique - $30
.mr 776 websites Mauritania - $30
.ms 7265 websites Montserrat - $30
.mt 1402 websites Republic Of Malta - $30
.mu 6475 websites Republic of Mauritius - $30
.mv 1996 websites Maldives - $30
.mw 8579 websites Malawi - $30
.mx 670901 websites Mexico- $80
.mx 174571 websites International zone United Mexican States:.com .net .biz .info .name .tel .mobi .asia-$50
.my 143039 websites Malaysia - $50
.na 1094 websites Republic of Namibia - $30
.nc 3497 websites New Coledonia - $30
.nl 3925784 websites Netherlands - $200
.nl 1019697 websites International zone The Netherlands:.com .net .biz .info .name .tel .mobi .asia-$100
.no 620882 websites Norway - $80
.no 74318 websites International zone The Kingdom Of Norway:.com .net .biz .info .name .tel .mobi .asia-$50
.nu 255161 websites Republic Of Niue- $50
.nz 593127 websites New Zealand - $80
.om 1701 websites Oman - $30
.pe 83224 websites Peru - $50
.pe 59157 websites International zone Peru:.com .net .biz .info .name .tel .mobi .asia-$50
.pk 44464 websites Islamic Republic Of Pakistan - $50
.pl 1795299 websites Republic Of Poland - $100
.pl 327587 websites International zone Republic Of Poland:.com .net .biz .info .name .tel .mobi .asia-$50
.pr 1358 websites Puerto Rico - $30
.pt 263136 websites Portuguese Republic - $80
.pt 17691 websites International zone Republica Portuguesa:.com .net .biz .info .name .tel .mobi .asia-$50
.py 5593 websites Republic Of Paraguay - $30
.py 653 websites International zone Paraguay:.com .net .biz .info .name .tel .mobi .asia - $30
.re 15089 websites Reunion (French) - $50
.ro 424401 websites Romania - $80
.ro 42046 websites International zone Republic Of Romania:.com .net .biz .info .name .tel .mobi .asia-$50
.rs 85503 websites Republic Of Serbia - $50
.ru 5025331 websites Russia - $250
.ru 514668 websites International zone Russia:.com .net .biz .info .name .tel .mobi .asia-$80
.rw 3806 websites Rwandese Republic - $30
.sa 20421 websites Saudi Arabia- $50
.sa 5064 websites International zone Saudi Arabia:.com .net .biz .info .name .tel .mobi .asia - $30
.sc 4442 websites Republic Of Seychelles- $30
.se 1491677 websites The Kingdom Of Sweden - $100
.se 293316 websites International zone The Kingdom Of Sweden:.com .net .biz .info .name .tel .mobi .asia-$50
.sg 150351 websites Singapore - $50
.sh 7560 websites Saint Helena - $30
.si 103778 websites Slovenia- $50
.si 12879 websites International zone Republic Of Slovenia:.com .net .biz .info .name .tel .mobi .asia-$50
.sk 414198 websites Slovakia- $80
.sk 31572 websites International zone Slovak Republic:.com .net .biz .info .name .tel .mobi .asia-$50
.sm 8897 websites San Marino - $30
.sn 4465 websites Senegal - $30
.sn 344 websites International zone Senegal:.com .net .biz .info .name .tel .mobi .asia-$30
.sr 580 websites Suriname - $30
.sv 8432 websites Democratic Republic Of El Salvador- $30
.sx 2901 websites Sint Maarten - $30
.sy 2972 websites Syria - $30
.sz 321 websites Kingdom Of Swaziland - $30
.tc 16384 websites Turks And Caicos Islands - $50
.tf 19841 websites French Sauthern Territory - $50
.tg 1230 websites Togolez Republic - $30
.th 22368 websites Kingdom Of Thailand- $50
.tj 6874 websites Republic Of Tajikistan- $30
.tj 34 websites International zone Tajikistan:.com .net .biz .info .name .tel .mobi .asia
.tk 20085806 websites Tokelau (New Zealand) - $500
.tl 2748 websites East Timor - $30
.tm 6395 websites Turkmenistan- $30
.tm 44 websites International zone Turkmenistan:.com .net .biz .info .name .tel .mobi .asia
.tr 243347 websites Turkish Republic - $80
.tr 138818 International zone Turkish Republic:.com .net .biz .info .name .tel .mobi .asia - $50
.tt 1017 websites Trinidad and Tobago - $30
.ua 553216 websites Ukraina - $80
.ua 147202 websites International zone Ukraine:.com .net .biz .info .name .tel .mobi .asia-$50
.ug 3806 websites Republic Of Uganda - $30
.ug 720 websites International zone Uganda:.com .net .biz .info .name .tel .mobi.asia-$30
.uk 5975887 websites UK - $250
.uk 3304606 websites International zone UK:.com .net .biz .info .name .tel .mobi .asia-$150
.us 3139563 websites United States of America - $200
.us 578927 websites International zone United States of America:.com .net .biz .info .name .tel .mobi .asia-$80
.uy 15571 websites Eastern Republic Of Uruguay - $50
.uy 31812 websites International zone Eastern Republic Of Uruguay:.com .net .biz .info .name .tel .mobi .asia-$30
.uz 38357 websites Uzbekistan - $50
.uz 365 websites International zone Uzbekistan:.com .net .biz .info .name .tel .mobi .asia
.vc 18641 websites Saint Vincent and Grenadines - $50
.ve 14015 websites Venezuela - $50
.ve 2898 websites International zone Bolivarian Republic Of Venezuela:.com .net .biz .info .name .tel .mobi .asia - $30
.vg 8389 websites Virgin Islands (British) - $50
.vi 109 websites Virgin Islands (United States of America) - $30
.vn 436005 websites Socialist Republic Of Vietnam - $80
.vn 161855 websites International zone Vietnam:.com .net .biz .info .name .tel .mobi .asia - $50
.vu 1051 websites Vanuatu - $30
.wf 1133 websites Wallis & Futuna Islands - $30
.ws 99308 websites Independent State Of Samoa - $80
.ye 18 websites Yemen - $30
.yt 2004 websites Mayotte - $30
.za 1008308 websites South Africa - $100

댓글 작성

Blog 본문

지식공유/웹표준기술

flexbox

지식공유/웹표준기술|입력 2016. 9. 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)  (9) 2016.10.31
flexbox  (3) 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

트랙백 0개, 댓글 3개가 달렸습니다.

전체 댓글
궁금해요 | (2017.12.04 00:44)

2017또는 2018가준 flex속성 사용해도 되나요?? 답변좀 주세요 ㅠㅠㅠㅠㅠ

Re: marga | (2017.12.12 11:17)

flex속성 사용은 브라우저 지원 기준을 봐야 하는 것으로 년도와는 상관이 없습니다.

사용자가 flex속성을 지원하는 버전의 브라우저를 사용하면 유효한 것이고, 2030년이 될 지라도 사용자가 지원하지 않는 하위버전의 브라우저를 사용하면 flex속성은 먹히지 않는 것이지요.

때문에 개발시 flex속성을 사용할 것이냐 말 것이냐는 "사용자를 어디까지 포용할 것인가"하는 기준에 따라 결정해야 합니다.

이같은 결정을 할 때 보통 브라우저 점유율을 참고합니다만, 이것도 절대적 기준은 될 수 없어서 내부적으로 지원 기준을 확립하는 것이 더 중요합니다.

Global 기준 브라우저 점유율은 아래 사이트에서 참고하실 수 있습니다.
http://gs.statcounter.com/

Sarahbig | (2020.10.24 05:14)

Модная женская одежда Свитмода7|Молодежная женская одежда Свитмода7|Женская одежда больших размеров Свитмода7|


[url=https://sweetmoda7.ru/prio[/url]

댓글 작성

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)  (9) 2016.10.31
flexbox  (3) 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

트랙백 0개, 댓글 0개가 달렸습니다.

전체 댓글
댓글 작성

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "반응형웹 이슈"에 대해 공유드리려고 합니다.

PC

  • IE8 이하의 IE에서는 미디어 쿼리 지원이 불가능함
  • 추가적인 자바스크립트 작업 및 기타 우회 방법이 필요
해결방법
  • PC 환경의 IE에서 반응형을 지원 할 것인지 결정
    • 반응형을 지원 할 것이라면 - IE 전용 자바스크립트 사용
    • 반응형을 지원 할 필요가 없다면 - IE 환경에서는 일반적은 PC기준의 화면만 보여줌

Mobile

반응형웹 대응 해상도
  • Mobile 가로(Landscape) 모드
    • 가로(Landscape) 해상도가 639px 이하면 미적용
    • 가로(Landscape) 해상도가 640px 이상 적용 - 패블릿폰
  • 반응형을 지원 할 필요가 없다면
    • IE 환경에서는 일반적은 PC기준의 화면만 보여줌
반응형웹 대응 기기현황
반응형웹 대응 기기현황
단말기 해상도 브라우저 해상도 DevicePixelRatio
HTC EVO 4G 540*960 360*640 1.5
아트릭스폰 540*960 360*640 1.5
갤럭시탭 7 600*1024 400*683 1.5
갤럭시노트2 LTE 720*1280 360*640 2
옵티머스LTE 720*1280 360*640 2
옵티머스LTE2 720*1280 360*640 2
베가레이서2 720*1280 360*640 2
갤럭시넥서스 720*1280 360*640 2
갤럭시S3 3G 720*1280 360*640 2
갤럭시S3 LTE 720*1280 360*640 2
갤럭시S3 720*1280 360*640 2
옵티머스G LTE 768*1280 384*640 2
베가LTE EX 800*1280 400*640 2
갤럭시노트 800*1280 400*640 2
베가LTE 800*1280 400*640 2
옵티머스G PRO 1080*1920 360*640 3
갤럭시S4 1080*1920 360*640 3
베가넘버6 1080*1920 360*600 3
갤럭시노트3 1080*1920 360*640 3
LG 옵티머스 G2 1080*1920 360*640 3
LG 옵티머스 G3 1440 X 2560 360*640 4
갤럭시S5 1080 X 1920 360*640 3
갤럭시S6 1440 X 2560 360*640 4
갤럭시S7 1440 X 2560 360*640 4
아이폰6 750 X 1334 375 X 667 2
아이폰6 플러스 1080 X 1920 414 X 736 3
아이패드 1536*2048 768*1024 2

반응형웹(가로모드) 미대응 기기현황
단말기 해상도 브라우저 해상도 DevicePixelRatio
아이폰3GS 320*480 320*480 1
옵티머스원 320*480 320*480 1
갤럭시Ace 320*480 320*480 1
갤럭시S호핀 480*800 320*533 1.5
옵티머스3D큐브 480*800 320*533 1.5
갤럭시U 480*800 320*533 1.5
옵티머스2X 480*800 320*533 1.5
옵티머스블랙 480*800 320*533 1.5
베가레이서 480*800 320*533 1.5
베가X 480*800 320*533 1.5
베가S 480*800 320*533 1.5
옵티머스3D 480*800 320*533 1.5
옵티머스빅 480*800 320*533 1.5
프라다3.0 480*800 320*533 1.5
갤럭시M스타일 480*800 320*533 1.5
옵티머스LTE tag 480*800 320*533 1.5
갤럭시S2 480*800 320*533 1.5
갤럭시K 480*800 320*533 1.5
미라크폰 480*800 320*533 1.5
베가넘버5 480*800 320*533 1.5
갤럭시S 480*800 320*533 1.5
갤럭시S2 HD LTE 480*800 320*533 1.5
갤럭시S2 LTE 480*800 320*533 1.5
넥서스S 480*800 320*533 1.5
아이폰4 640*960 320*480 2
아이폰4S 640*960 320*480 2
아이팟 640*960 320*480 2
아이폰5 640*1136 320*568 2
옵티머스뷰 768*1024 439*585 1.75
옵티머스뷰2 768*1024 439*585 1.75
orientation 속성 Android 이슈 (Android 모든버전 해당)
@media all and (orientation:portrait){ … } /* 세로 모드. 뷰포트의 높이가 너비에 비해 상대적으로 크면 실행 */
@media all and (orientation:landscape){ … } /* 가로 모드. 뷰포트의 너비가 높이에 비해 상대적으로 크면 실행 */
  • 정상화면
    세로모드 (orientation:portrait)
    세로모드 (orientation:portrait) 에서 가운데 별은 빨강색.

    세로모드
    가로모드 (orientation:landscape)
    가로모드 (orientation:landscape) 에서 가운데 별은 파랑색

    가로모드
  • 이슈화면 (패드가 올라온다면?!)
    이슈화면
    • 키패드가 올라온 아래화면은 세로모드 (orientation:portrait) 인데, 가운데 별은 파랑색으로 표시됨.
    • Android의 가로,세로비의 계산은 native 해상도나 브라우저 해상도가 아닌 키패드를 제외한 브라우저에서 실제보이는 영역(viewport)를 기준으로 한다.
    • 즉, (아래화면) 초록색 테두리만 본다면 가로 (720px) 가 세로 (685px) 보다 넓으므로 가로모드로 인식해버리는 이슈이다.
    이슈화면

지금까지 반응형웹 이슈에 대해 살펴봤습니다.
다음 시간에는 "CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용"에 대해
공유드리도록 하겠습니다.
감사합니다.



by. UI개발팀 lemona


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

웹폰트 (Web Font)  (9) 2016.10.31
flexbox  (3) 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

트랙백 0개, 댓글 0개가 달렸습니다.

전체 댓글
댓글 작성

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 오늘은 "반응형웹 레이아웃"에 대해 공유드리려고 합니다.
스마트폰과 태블릿이 생활화되면서 하나의 소스로 다양한 디바이스를 한번에 지원하는 원 소스 멀티 유즈(OSMU:One Source Multi Use)에 대한 필요성이 빠르게 자리잡고 있습니다.
이에 맞추어 반응형웹 디자인 역시 빠르게 진화하고 있습니다만, 다양한 디바이스에서 모두 잘 작동하는 확립된 패턴 또한 소수입니다.
오늘은 이를 최초로 정리한 루크 로블르스키(Luke Wroblewski)의 5가지 패턴에 대해 살펴보려고 합니다.

루크 로블르스키(Luke Wroblewski)의 5가지 패턴

  • 유동형(Mostly fluid)
  • 열 드롭(Column drop)
  • 레이아웃 시프터(Layout shifter)
  • 미세 조정(Tiny tweaks)
  • 캔버스 오프(Off canvas)

유동형 (Mostly Fluid)

유동형 패턴은 가변형 그리드로 구성하여 단순히 컨텐츠의 폭을 맞추는 방법입니다.
큰 화면에서 중간 크기의 화면까지는 여백 정도만 조정되고, 이어 작은 화면이 되면 그리드가 움직이면서 컨텐츠를 수직으로 재배치 합니다.
이 패턴의 중요한 장점은 작은 화면과 큰화면 사이에 단 하나의 중단점(breakpoints)만 있으면 된다는 것입니다.

유동형 레이아웃 이미지

열 끌어놓기 (Column Drop)

화면폭이 좁아져서 더이상 컨텐츠의 정상적인 표시가 힘들 경우,
컨텐츠 영역의 확보를 위해 컬럼을 하단으로 떨궈서 열을 수직으로 쌓습니다.
이 패턴은 화면크기에 관계없이 사용하는 페이지를 작성 하는데 도움이 됩니다.

열 끌어놓기 레이아웃 이미지

배치 이동 (Layout Shifter)

이 패턴은 스크린이 크기마다 다른 형태의 레이아웃을 사용합니다.
단순히 컬럼을 다른 컬럼 아래로 이동 및 재배치하는 방식 아닌, 기기나 화면 사이즈에 따라 콘텐츠를 이동시켜 레이아웃을 변형합니다.
때문에 앞서 소개한 패턴에 비해 단조로움을 벗어날 수 있으나, 서버의 작업이 상대적으로 많이 필요하고 유지관리가 복잡할 수 있습니다.

배치 이동 레이아웃 이미지

미세 조정 (Tiny Tweaks)

미세 조정은 글꼴이나 이미지의 크기 조정 또는 콘텐츠 미세 이동 등과 같은 작은 변화만 이루어집니다.
보통 하나의 컬럼을 사용하며 브라우저의 폭이 변하더라도 레이아웃의 변화가 크지 않아서 블로그에서 많이 사용됩니다.

미세 조정 레이아웃 이미지

오프 캔버스 (off-Canvas)

오프 캔버스는 메뉴나 서브 컬럼을 화면 좌/우측에 숨겨두고 필요할때 노출하는 패턴입니다.
콘텐츠를 수직으로 쌓지 않고 사용 빈도가 낮은 콘텐츠(예: 탐색 또는 앱 메뉴)를 화면 밖에 배치하고, 화면 크기가 충분히 커지면 표시하고, 작은 화면에서는 클릭했을 때만 보여줍니다.

오프 캔버스 레이아웃 이미지
반응형웹 디자인 예제
  • 모바일에서는 세로모드(640 PSD), 가로모드(1280 PSD)로 작업합니다.
    • 가로모드(1280 PSD)에서 이미지가 고정적 이미지인지 유동적(flexible) 이미지인지 알수있게 작업합니다.
  • 태블릿(iPad)에서는 세로모드(1536 PSD),가로모드(2048 PSD)로 작업합니다.
  • PC, 모바일에서 선형 구조로 작업합니다.
반응형웹 디자인 예제 이미지
  • PC 썸네일은 모바일(640 PSD)기준 원본사이즈(리사이즈)로 사용합니다.
반응형웹 디자인 예제 마크업 이미지
반응형웹 디자인시 고려사항
  • 오브젝트의 크기는 라인 포함 4의 배수 제작 권장하며(버튼, 아이콘 등), 폰트는 2의 배수로 사용합니다.
  • 용량 최소화를 위해 기본 폰트 사용 및 기본 요소(탭, 버튼 등) CSS3 처리 권장합니다.
  • 개발 이슈가 생기는 디자인
    • 모바일에서의 선형 구조를 해치는 경우
    • 서로 다른 UX를 제공하는 경우



지금까지 반응형웹의 대표적인 5가지 레이아웃과 

반응형웹 디자인시 고려해야할 사항에 대해 살펴봤습니다.
다음 시간에는 "반응형웹 이슈"에 대해 공유드리도록 하겠습니다.
감사합니다.



by. UI개발팀 bliss


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

웹폰트 (Web Font)  (9) 2016.10.31
flexbox  (3) 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

트랙백 0개, 댓글 0개가 달렸습니다.

전체 댓글
댓글 작성

Blog 본문

지식공유/웹표준기술

안녕하세요 다룸 입니다. 반응형 웹에 대한 아래 4가지 주제로 공유드리려고 합니다.
  1. 반응형 웹 이란?
  2. 반응형웹 레이아웃
  3. 반응형웹 이슈.
  4. CSS @media queries (미디어 쿼리)를 이용한 반응형웹 적용
오늘 첫번째 "반응형 웹이란?" 주제로 정리하여 공유드립니다.

반응형 웹이란?

반응형 웹 디자인이란 가변 그리드, 가변 이미지, 미디어 쿼리를 이용해 하나의 소스 (One Code) 로 제작된 콘텐츠가 다양한 크기의 모바일 기기에 맞춰 해상도와 화면이 동적으로 변하는 기술을 말합니다.
이를 통해 사용자는 어떤 크기의 디스플레이에서 사이트를 방문하든 보다 높은 차원의 사용성 경험을 제공 받을 수 있습니다.
-출처 : Ethan Marcotte, Responsive Web Design.

반응형웹 특징

  1. 하나의 콘텐츠에 오직 하나의 HTML 소스만 있다.
  2. 특정 장치에 최적화된 여러벌의 HTML이 있으면 반응형이라고 부르지 않습니다.
  3. 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있으면 반응형이라고 부르지 않습니다.

반응형웹 목적

  • 반응형 웹의 기본, 사용자에게 남는 공간 없이 한눈에 많은 정보를 노출하며 더 자세한 컨텐츠를 제공해 줄 수 있습니다.
  • 향후 출시 될 어떠한 Screen Device에 유연한 대응이 가능하고 효율적입니다.
  • 적용대상
    • 태블릿 PC
    • 고해상도 Mobile 단말기 (해상도 세로 size 640 이상) 의 Landscape mode

반응형웹 기획시 고려사항

  • pc화면에 최적화된 PC카페탑(http://top.cafe.daum.net/), Mobile에 최적화된 카페탑(http://m.cafe.daum.net/) 처럼 많은 컨텐츠를 좀더 효율적으로 보여주기 위해선 반응형 웹이 꼭 답은 아닙니다.
    • 처음에 문제 없도록 구성을 했더라도 운영하면서 추가되는 콘텐츠나 기능변화로 인해 반응형 웹이 장점이라고 말하는 모든 해상도에 대응은 물 건너 가는 수도 있습니다.
  • 반응형 웹 구성시 복잡한 정보구조의 형태를 어떠한 서비스도 가능하지만, 서비스 목적성과 일관성, 연속성을 가지고 있어야 합니다.
  • 이미지 사이즈 규정: 확대/축소, 행/열 조정
  • Touch(클릭)에 대한 고려 : 어떤 화면 사이즈에도 터치를 고려해야 합니다.

반응형 웹 적용방법

반응형 웹 적용방법(1) : CSS @media queries (미디어 쿼리)
미디어 타입(media type)은 단말기의 종류에 따라 각각 다른 스타일시트를 적용하게 하는 기능이며 CSS 2.1 부터 추가되었습니다
하지만 실제로 많이 사용되지 않았는데, 미디어 타입 만으로는 해당 기기의 특성을 정확히 파악하여 알맞은 스타일을 적용시키기 어려웠던 문제점이 있었기 때문입니다.
CSS 3에는 미디어 타입을 개선하여, 더 구체적인 조건에서 필요한 스타일을 정확하게 적용할 수 있도록 확장하였는데, 이를 미디어 쿼리(media query)라고 하며, CSS 3에 Media Query 라는 명세가 있고 최신 브라우저들(IE9 이상, Chrome, Safari, Firefox, Opera)과 아이폰용 모바일 사파리 브라우저도 이를 지원하고 있지만, 아직 국내 점유율이 상당한 IE8을 포함하여, 그 이하 버전은 지원이 안되고 있습니다.
미디어쿼리 사용예
  • 외부 CSS 파일을 조건에 다라 불러오는 방법
    < link rel="stylesheet" media="screen and (min-width: 640px)" href="example1.css">
    < link rel="stylesheet" media="screen and (min-width: 1024px)" href="example2.css">
    
    <!-- 화면 너비가 640px 이상이면 example1.css 를 로드, 1024px 이상이면 example2.css 도 같이 로드함 -->
  • style 태그를 이용하는 방법
    < style type="text/css" media="screen and (min-width: 640px)">
    body { background-color: #000 }
    < /style >
     
    < style type="text/css" media="screen and (min-width: 1024px)">
    body { background-color: #fff }
    < /style >
     
    <!-- 화면 너비가 640px 이상이면 배경색이 검정, 1024px 이상이면 배경색이 흰색으로 캐스캐이딩 됨 -->
  • css파일내에서 사용하는 방법
    @charset "utf-8";
     
    /* 1. 공통 (Reset, Common) */
     
    /* 2. 모바일 (뷰포트너비 640px 미만) */
    .sample {background-color:black}
     
    /* 3. 패블릿 가로모드/태블릿 (뷰포트 너비 640px 이상) */
    @media all and (min-width:640px) {
        .sample {background-color:red}
    }
     
    /* 4. PC (해상도 1024px 이상) */
    @media all and (min-width:1024px) {
        .sample {background-color:green}
    }
    적용사이트 :
반응형 웹 적용방법(2) : UA체크를 통한 CSS 분기
  • 브라우저의 UA(userAgent)값에 따라 CSS파일을 분기 처리하여 내려줍니다.
    • userAgent 문자열은 홈페이지를 만들때, 접속하는 사용자의 웹 브라우저 종류, 버전, 또는 모바일 장비에서 접속 했는지 등을 알고자 할 때 분석되는 문자열입니다.
  • PC브라우져 창크기를 변화해도 화면이 반응하지 않으며 해당기기에 최적화된 화면만 확인 할 수 있다
    • IE 6~8 을 위한 JS라이브러리가 별도로 필요하지 않음
  • UA분기를 이용한 모바일과 테블릿 환경에서 미디어쿼리를 다시 사용할 수 있어서 테블릿의 가로와 세로를 다르게 구현하거나 패블릿에서 테블릿의 화면을 보이게 처리할 수 도 있다
반응형 웹 적용방법(3) : 기타 반응형 웹 기법
  • 유동형 그리드 (fluid grids)
    • 반응형 웹 이전부터 사용되어 온, 그리드 시스템과 달리 EM 등이 제안하는 유동형 그리드는 고정된 PX가 아닌 em이나 %를 사용합니다.
    • Tiny Tweaks 방식으로 예시) 검색결과 화면
  • 유동형 이미지 (fluid/flexible images)
    • 유동형 그리드와 마찬가지로, 고정된 PX가 아닌 em과 %를 이용하여 접근하는 방법으로, 특히 이 경우 max-width를 사용하고, 이를 처리하지 못하는 ie6~ie7의 경우 jabascript를 사용합니다.
  • javascript를 통한 반응형 레이아웃 (responsive layouts) 대응
    • 스크린 사이즈 단계별 스타일을 하나의 CSS내에 class로 분리 구성하고 javascript를 사용하여 브라우져의 뷰포트 사이즈를 체크하여 최상위 요소에 해당 class명을 변경하여 CSS를 캐스케이딩합니다.



지금까지 "반응형 웹이란?"에 대해 살펴봤습니다.
이후 반응형웹 레이아웃에 대해 공유드리도록 하겠습니다.
기대 많이 해주세요~ 감사합니다.



by. UI개발팀 jude


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

웹폰트 (Web Font)  (9) 2016.10.31
flexbox  (3) 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

트랙백 0개, 댓글 0개가 달렸습니다.

전체 댓글
댓글 작성