'지식공유'에 해당되는 글 9건

  1. 2016.10.31 웹폰트 (Web Font) (8)
  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
  7. 2013.07.09 img 요소의 여백 (2)
  8. 2013.07.09 Font 축약형 분석
  9. 2013.07.09 [성능] Reflow 원인과 마크업 최적화 Tip (3)

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)  (8) 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개, 댓글 8개가 달렸습니다.

전체 댓글
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.

댓글 작성

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)  (8) 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)  (8) 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)  (8) 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)  (8) 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)  (8) 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 본문

지식공유/이슈&버그


 작성자 : 유낙동 (다음서비스 웹표준개발2팀)


테스트 브라우저 버전정보
  • - IE6, IE7, IE8, IE9, IE10, 크롬(27.0), 사파리(5.1.7), 오페라(12.15), 파폭(21.0)
INTRO
  • - DTD 나 브라우저, 부모 엘리먼트의 영향을 받아 img요소의 여백 유무가 결정
  • - 각 케이스별 결과를 분석해보고 이에 대한 원인과 결론을 도출

결론

  • - 경우의 수는 크게 2가지, 소스내 공백이 있을 경우와 없을 경우로 나뉘어 짐
    • - 소스내 공백이 없을 경우 (DTD, 브라우저, 부모 엘리먼트)별 로 상이한 결과를 나타냄
    • 소스내 공백이 있을 경우에는 무엇에 관계없이 하단 여백 생김 (오페라 제외)

소스내 공백이 없을 경우

부모가 block 요소일 때

  • - 모든 브라우저 (IE6 제외)
    xthmlhtml5



  • - IE6
    xthmlhtml5


    <style>
    .wrap {background:red;}
    </style>
    <div class="wrap"><img src="test.jpg" /><img src="test.jpg" /></div>
    

부모가 inline 요소일 때

  • - IE7 이상, 오페라
    xthmlhtml5



  • - 크롬, 사파리, 파폭
    xthmlhtml5



  • - IE6
    xthmlhtml5

    <style>
    .wrap {background:red;}
    </style>
    <span class="wrap"><img src="test.jpg" /><img src="test.jpg" /></span>
    

소스내 공백이 있을 경우

부모가 block 요소일 때

  • - 모든 브라우저 (오페라 제외)
    xthmlhtml5

  • - 오페라
    xthmlhtml5

    <style>
    .wrap {background:red;}
    </style>
    <div class="wrap">
        <img src="test.jpg" />
        <img src="test.jpg" />
    </div>
    

부모가 inline 요소일 때

  • - 모든 브라우저
    xthmlhtml5

    <style>
    .wrap {background:red;}
    </style>
    <span class="wrap">
        <img src="test.jpg" />
        <img src="test.jpg" />
    </span>
    

원인

  • - 소스내 공백이 있을 경우,
    공백을 하나의 텍스트 노드로 인식하여,
    기본 행간이 적용되면서 여백 생김
  • - 소스의 공백이 없는 경우에도,
    html5 DTD 이거나 부모의 요소가 inline인 경우,
    img 요소에 기본 행간이 적용되어 여백 생김

해결방법

  • - img 요소에 display:block; 사용으로 행간의 영향에서 벗어나 여백을 방지.
  • - img 요소에 vertical-align:top; 사용으로, 기본 행간 기준을 상단으로 하여 여백을 방지.
  • - 부모 요소에서 line-height:0; 사용으로 기본 행간을 초기화하여 여백을 방지. (이는 부모가 블록요소일 경우에만 사용 가능하고, IE6에서는 블록요소에서도 적용 안됨)


'지식공유 > 이슈&버그' 카테고리의 다른 글

img 요소의 여백  (2) 2013.07.09
Font 축약형 분석  (0) 2013.07.09
Posted by darum

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

전체 댓글
Ahryne Sinner | (2013.09.09 00:47)

좋은 글 잘 보고 갑니다. 도움이 됐어요.

고맙습니다 | (2016.10.21 11:10)

됐어요!! ㅠㅠ

댓글 작성

Blog 본문

지식공유/이슈&버그


 작성자 : 유낙동 (다음서비스 웹표준개발2팀)


INTRO
  • - font 축약형을 사용했을때와 그렇지 않은경우 비교 분석
  • - 비교 분석 결과에 따른 성능 결과 도출

결론

  • - Font 축약형 사용시 불필요한 폰트속성이 추가 됨
  • - 위 결과를 토대로 yslow를 이용한 페이지 로딩 속도를 실험한 결과, 성능에는 큰 차이점을 보이지 않음

축약형 사용/미사용 비교분석

비교

  • - css 적용 전 마크업
    소스결과
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



  • - 축약형 미사용시 요소별 default 속성을 그대로 유지

    소스
    결과
    <style type="text/css">
    #font * {font-size:12px;font-family:dotum;}
    </style>
    
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



  • - 축약형 사용시 요소별 defalut 속성을 덮어쓰게되어 모든 font속성 초기화
    htmlview
    <style type="text/css">
    #font * {font:12px/15px dotum;}
    </style>
    
    <div id="font">
    	<h1>heading</h1>
    	<p>paragraph</p>
    	<i>italic</i>
    	<b>bold</b>
    </div>
    



분석

  • - 축약형을 사용한 경우,  선언하지 않은 불필요한 폰트 속성이 선언되어있음을 확인할 수 있음.
    • 크롬 Computed Style
      축약형 사용축약형 미사용





비교/분석에 따른 성능 비교

  • - 10000개의 동일한 마크업을 생성 후 축약형을 사용한 경우와 그렇지 않은 경우를 yslow를 이용하여 측정
  • - 페이지 로딩시간 분석 (총 10회 측정)
    축약형 사용여부1회2회3회4회5회6회7회8회9회10회평균
    미사용0.878s0.840s1.213s1.218s0.848s1.223s1.094s1.250s0.899s1.258s1.0721
    사용1.107s1.186s1.197s1.188s0.822s0.839s1.214s0.839s1.228s1.213s1.0833
  • - 성능 측정 결과 큰 차이점이 없음을 확인


'지식공유 > 이슈&버그' 카테고리의 다른 글

img 요소의 여백  (2) 2013.07.09
Font 축약형 분석  (0) 2013.07.09
Posted by darum

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

전체 댓글
댓글 작성

Blog 본문

지식공유/성능관련


 작성자 : 이동원 (다음서비스 웹표준개발팀 개발선임)


개요

CSS를 이용한 복잡한 페이지 디자인과 Javascript를 이용한 동적변화가 매우 다양하게 이용되고 있는 상황에서 이에 따른 속도저하 등의 문제점이 발생하고 있다. 이를 원천적으로 해결할 수는 없겠으나 조금이라도 줄일 수 있는 방법들을 찾기 위해 브라우저의 작동원리를 이해해보고, 그에 따른 문제해결 방법을 찾아보고자 한다.

브라우저 렌더링 프로세스의 이해

브라우저의 기본구조


  • User Interface - 주소창, 뒤로가기/앞으로가기 버튼, 즐겨찾기 기능등을 포함하며 브라우저 중 웹페이지 표시부분(document)을 제외한 거의 모든 부분에 해당.
  • Browser Engine - 렌더링 엔진에 질의를 보내며, 조작하는 인터페이스
  • Rendering Engine - 요청된 콘텐츠를 화면에 뿌려주는 기능을 담당함. (전송된 HTML과 CSS 등을 파싱하여 디스플레이)
  • Networking - HTTP 리퀘스트와 같은 네트워크 통신기능 수행. 
  • UI Backend - 브라우처 창의 형태나 셀렉트버튼, 체크박스 등을 표현함. OS의 UI 메소드에 의존함. (XP에서의 셀렉트박스와 윈도우7에서의 셀렉트박스가 다른 것을 생각하면 이해가 쉬움)
  • Javascript Interpreter - 자바스크립트 코드의 파싱과 실행에 사용 (유명한 것이 바로 Chrome의 V8 엔진)
  • Data Storage - 지속적인 계층(쿠키 등을 위한 저장공간). HTML5에서는 웹DB가 해당됨.

Rendering engine basic flow

브라우저가 네트워크 계층에서 요청된 데이타를 받아오면 렌더링 엔진이 움직이기 시작한다.

다음은 렌더링 엔진의 기본적인 흐름을 도식화 한 것.

  1. Parsing HTML : HTML을 파싱하고 DOM Tree를 설계
  2. Render Tree
  3. Layout : 각각의 노드가 화면내에 위치되어야 할 좌표값 계산 (화면 내 position과 size) 후 배치
  4. Paint : 계산되고 지정된 명령에 따라 각각의 노드를 그림

화면구성이 완료된 후 동적인 변화(JS를 통한 DOM 편집, 스타일 수정 등) 발생 시엔?

어떠한 변화가 발생했을 때 브라우저는 최소한의 대응을 하도록 설계되었으며 만일 특정 엘리먼트의 color값에 변화가 발생한다면 오직 해당엘리먼트의 repaint만을 유발한다. 하지만 엘리먼트의 포지션에 변화가 발생했을 경우에는 해당 엘리먼트의 Repaint는 물론 레이아웃까지도 유발(Reflow)한다. html 엘리먼트의 폰트사이즈를 키우는 것과 같은 커다란 변화들은 전체 Render Tree의 Repaint와 Reflow를 유발시킨다.

Reflow? Repaint?

Repaint (or Redraw)

엘리먼트의 스킨에 변화가 발생하지만, 레이아웃에는 영향을 미치지 않을 때 유발된다. (visibility, outline, background-color 등이 포함) Opera에 따르면 Repaint는 해당 행위가 발생하는 순간, 문서내 DOM tree의 다른 노드들의 스킨까지도 검증해야 하므로 비용이 높다고 함.

Reflow

문서 내 노드들의 레이아웃, 포지션을 재계산 후 다시 뿌려주므로 Repaint보다도 더 심각한 퍼포먼스 저하를 유발시키는 프로세스이다. 특정 엘리먼트에 대한 Reflow 발생 시, 페이지에서의 해당 요소는 즉시 Reflow State가 되며 해당 엘리먼트의 자식요소와 부모/조상 요소역시 레이아웃 계산을 진행한다. (결국은 페이지 전체를 다시 훑는 것이나 마찬가지) Opera에 의하면, 대부분의 리플로우는 페이지 전체의 렌더링을 다시 일으킨다고 한다.

" Reflows are very expensive in terms of performance, and is one of the main causes of slow DOM scripts, especially on devices with low processing power, such as phones.In many cases, they are equivalent to laying out the entire page again." 

- Reflow는 퍼포먼스 측면에서 매우 고비용을 발생시키는 프로세스이며, 휴대전화와 같은 저성능 디바이스에서는 특히나 더욱 느린 DOM 스크립팅을 발생시키는 주범이다. 많은 경우에서 Reflow는 페이지 전체를 다시한번 레이아웃시키는 결과를 가져온다.

무엇이 Reflow를 유발시키는가?

특정 엘리먼트에 스타일변화가 발생했을 때, 그 개체가 가진 자식요소에 대한 레이아웃 재정리를 위해 Reflow가 실행된다. 설령 그 변화가 그 자식요소 및 페이지에는 아무 영향을 미치지 않을지라도, 기계는 이를 미리 알고있지 못한다. 따라서 작은 변화에도 자식개체는 물론, 페이지 전체에 Reflow가 실행된다. Mozilla에 따르면 다음의 케이스에서 Reflow가 발생한다고 한다.

  • 윈도우 리사이징
  • 폰트의 변화
  • 스타일 추가 또는 제거
  • 내용 변화 (인풋박스에 텍스트 입력 등..)
  • :hover와 같은 CSS Pseudo Class
  • 클래스 Attribute의 동적 변화
  • JS를 통한 DOM 동적 변화
  • 엘리먼트에 대한 offsetWidth / offsetHeight (화면에서 보여지는 좌표) 계산시
  • 스타일 Attribute 동적변화

Reflow를 피하거나 그 영향을 최소화하는 방법

  1. 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 주어라. 
  2. 인라인 스타일을 최대한 배제하라.
  3. 애니메이션이 들어간 엘리먼트는 가급적 position:fixed 또는 position:absolute 로 지정
  4. 퀄리티와 퍼포먼스 사이에서 타협하라
  5. 테이블 레이아웃을 피하라
  6. IE의 경우, CSS에서의 JS표현식을 피하라.
  7. JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리하라.
  8. CSS Rules는 필요한 만큼만 정리하라.
  9. position:relative 사용 시 주의하자.

1. 클래스 변화에 따른 스타일 변화를 원할 경우, 최대한 DOM 구조 상 끝단에 위치한 노드에 주어라.

클래스 변화로 인한 Reflow는 물론 피할 수 없겠지만,  그 효과는 줄일 수 있다. DOM 트리에서 가급적 말단에 위치한 노드에 클래스 변화를 줄 경우, 이는 리플로우의 행동반경을 전체 페이지가 아닌 일부 노드들로 제한할 수 있다. 따라서 전체 페이지를 감싸는 wrapper에 클래스를 수정하는 행위는 꼭 피해야 한다. 또한 OOCSS 방식을 통해 클래스변화가 발생할 경우, 특정 엘리먼트에 대해 상당히 많은 클래스를 적용시키는 것 같지만, 실제로는 리플로우의 영향을 최소화함으로써 퍼포먼스적인 측면에서 큰 이득이 발생한다.

2. 인라인 스타일을 최대한 배제하라.

DOM은 매우 느린 구조체이다. 게다가 인라인상에 스타일이 주어진 경우, 리플로우는 페이지 전체에 걸쳐 수차례 발생하게 된다. 만일 인라인스타일이 없을 경우, 외부스타일 클래스의 조합으로 단 한번만 리플로우를 발생시킨다.

3. 애니메이션이 들어간 엘리먼트는 가급적 position:fixed 또는 position:absolute 로 지정

일반적으로 JS (특히 jQuery)나 CSS3로 width/height 또는 위치이동을 구현한 애니메이션은 거의 초단위로 상당한 Reflow를 불러일으킨다. 이러한 경우에 해당 개체의 position 속성을 fixed 또는 absoute로 주게 되면 다른 요소들의 레이아웃에 영향을 끼치지 않으므로 페이지 전체의 Reflow 대신 해당 애니메이션요소의 Repaint만을 유발한다. 이것은 비용적인 측면에서 매우 효율적인 방법이다.

4. 퀄리티와 퍼포먼스 사이에서 타협하라

한 time에 1px을 움직이는 애니메이션 A와 한 time에 3px를 움직이는 애니메이션 B가 있다고 할 때, 애니메이션의 계산과 페이지 Reflow 계산이 동시다발적으로 발생함으로써 CPU 퍼포먼스 비용이 발생하는데, A가 B에 비해 더욱 큰 비용이 발생한다. 속도가 빠른 디바이스에서는 둘다 비슷하게 보이지만, 속도가 느린 (휴대전화와 같은) 디바이스에서는 그 차이가 눈에 띌 수 있다. 

5. 테이블 레이아웃을 피하라

테이블로 구성된 페이지 레이아웃은 점진적(progressive) 페이지렌더링이 적용되지 않으며, 모두 로드되고 계산된 후에야 화면에 뿌려진다. 더군다나 Mozilla에 따르면 테이블 레이아웃에서는 아주 작은 변화마저도 해당 테이블 전체 모든 노드에 대한 Reflow를 발생시킨다고 한다. 또한 YUI data table 위젯의 개발자인 Jenny Donnelly 에 의하면, 레이아웃 용도가 아닌 데이터표시 용도의 올바른 테이블이라 할지라도 해당 테이블에 table-layout:fixed 속성을 주는 것이 디폴트값인 auto에 비해 성능면에서 더 좋다고 한다.

6. IE의 경우, CSS에서의 JS표현식을 피하라.

소개된지 오래된 규칙이지만 매우 효과적인 규칙이다. 이 CSS 표현식의 비용이 매우 높은 이유는, 문서 전체 또는 문서중 일부가 Reflow될 때마다 표현식이 다시계산되기 때문이다. 이는 결국.. 애니메이션과 같은 변화에 의해 리플로우가 발생했을 때, 경우에 따라 1초당 수천, 수만번의 표현식 계산이 진행될 수 있다는 것을 의미한다. 때문에 CSS표현식은 반드시 피해야한다.

7. JS를 통해 스타일변화를 주어야 할 경우, 가급적 한번에 처리하라

특정 요소에 스타일변화를 주어야 할 경우 다음과 같이 시도해볼 수 있다.

var toChange = document.getElementById('elem');
toChange.style.background = '#333';
toChange.style.color = '#fff';
toChange.style.border = '1px solid #ccc';

이러한 접근은 여러번 중복된 Reflow와 Repaint를 유발시킨다.

때문에 위와 같은 방법보다는 다음과 같은 방법으로, 단 한번의 변화만을 발생시키는 것이 더욱 효과적이다.

/* CSS */
#elem { border:1px solid #000; color:#000; background:#ddd; }
.highlight { border-color:#00f; color:#fff; background:#333; }
/* js */
document.getElementById('elem').className = 'highlight';

8. CSS 하위선택자는 필요한 만큼만 정리하라.

Reflow 자체보다도, Reflow가 유발시키는 CSS Recalculation 에 필요한 내용이다. CSS의 Rule 매칭 프로세스는, 가장 우측의 핵심 선택자에서 좌측으로 흐른다. 이 과정은 더이상 매치시킬 Rule이 없거나 잘못된 Rule이 튀어나올 때까지 계속 매칭시키며 진행된다. 만일 해당 CSS의 특별성(specialty)이 확보되는 선에서, 가급적 딱 필요한만큼만 사용한다면 퍼포먼스 측면에서의 극적인 향상이 발생하게 된다. (즉, 룰이 적을수록 비용절감) 설령 .btn_more라는 클래스가 list_service 내에 쓰이는 유일한  요소일 경우, 아래와 같은 두가지 예가 발생할 수 있다.

첫번째 예
.section_service .list_service li .box_name .btn_more {display:block;width:100px;height:30px;}
두번째 예
.section_service .list_service .btn_more {display:block;width:100px;height:30px;}

가정 상 둘 다 .btn_more의 specialty가 유효한 CSS임에도 불구하고, 첫번째 예처럼 쓰는 경우는 "코드 가독성"과 같은 이유에서일 것이다. 유지보수의 측면에서 보자면 물론 가독성도 중요한 부분이나, 위의 첫번째 예와 같이 5단계에 걸쳐 필요이상의 규칙들을 작성해놓을 경우 퍼포먼스 하락을 가져올 수 있다. 더군다나 이러한 CSS 코드들이 5~10라인이 아닌, 500~1000라인쯤 될 경우 퍼포먼스에 상당한 영향을 미치게 된다. 때문에 두번째 예와 같이 딱 필요한 선에서 핵심만을 짚는 CSS Rule 선언이 필요하며, 코드 가독성을 위해서라면 차라리 해당 분류 묶음에 CSS 주석처리를 하는 것이 효과적이다. (하위선택자는 가급적 적을수록 좋다)

9. position:relative 사용 시 주의하자.

페이지를 새로 열거나 Reflow가 발생되어 CSS Calculation이 발생할 경우, Box model Calculation → Normal Flow 의 순서로 계산이 진행된다. (Normal flow는 Layout 또는 Reflow라 불리는 과정에 속하는 일부임.) 일반적인 경우, 엘리먼트 들은 margin, border, padding, content(width,height) 등 Box model을 먼저 계산한 후 Normal flow 상태의 레이아웃에 배치된다. (다른말로 선형적 배치)

1) Box model Calculation에 의한 계산

아래 이미지와 같이, 화면내 배치가 아닌 각 엘리먼트 자체의 Metrics 계산을 우선 진행한다.

2) Normal flow에 의해 선형적으로 배치된 상태

Box model 계산 후, 마크업 순서에 따라 화면 내 배치를 실행한다. (단, position:absolute 또는 fixed일 경우 Normal flow를 거치지 않고 Out of flow 즉, 곧바로 Positioning을 진행한다.)

3) Normal Flow 이후

Float냐 Position이냐에 따라 Positioning 과정이 한번 더 일어나는데 각 케이스별 시나리오는 다음과 같다.

→ case 1. Float 속성을 가진 요소

Normal flow 이후 별도의 Positioning 계산은 없으며, 왼쪽 또는 오른쪽으로 자신이 갈수있는 한 끝까지 이동한다.

(즉, Box model → Normal flow → Floating)

→ caes 2. position:relative;와 함께 top,left 등 위치값을 가진 요소

Normal flow 상태에서 한번 더 Positioning 프로세스를 거치게 된다.

(Box model → Normal flow → Positioning)


→ case 3. position:absolute 또는 fixed를 가진 요소

Box model 계산 후 Normal flow 과정을 거치지 않고 바로 자신의 위치에 박히게 된다. (Out of flow)

(Box model → Positioning)


위에서 확인할 수 있듯, position:relative가 오히려 position:absolute 또는 float 속성보다 더 큰 비용을 가진다. (Box model → Normal flow → Positioning 의 3단계를 모두 거치므로) 때문에 UL 또는 OL과 같은 목록에서 상당수 반복되는 LI 요소에 position:relative 와 top,left 속성등을 주는 경우, 퍼포먼스 하락이 발생할 가능성이 크다.

관련 참조자료 및 인용자료

How browsers work - behind the scenes of modern web browsers (by Tali Garsiel)

http://taligarsiel.com/Projects/howbrowserswork1.htm

Reflows & Repaints : CSS Performance making your Javascript slow? (by Nicole Sullivan)

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

Efficient Javascript (by Mark Wilton-jones, Opera)

http://dev.opera.com/articles/view/efficient-javascript/

Pegs, Holes And Reflow (by Robert O'Callahan, Mozilla)

http://weblogs.mozillazine.org/roc/archives/2007/11/pegs_holes_and.html

Notes on HTML Reflow (by Chris Waterson, Mozilla)

http://www-archive.mozilla.org/newlayout/doc/reflow.html

Gecko:Reflow Refactoring (Mozilla Wiki)

https://wiki.mozilla.org/Gecko:Reflow_Refactoring

Writing Efficient CSS for use in the Mozilla UI (by David Hyatt)

https://developer.mozilla.org/en/Writing_Efficient_CSS

WebCore Rendering I - The Basics (by David Hyatt)

http://www.webkit.org/blog/114/webcore-rendering-i-the-basics/

CSS Positioning and Layout (by Jennifer Kyrnin)

http://webdesign.about.com/od/beginningcss/p/aacss9layout.htm

The CSS Box Model (by Jennifer Kyrnin)

http://webdesign.about.com/od/beginningcss/p/aacss6box.htm


'지식공유 > 성능관련' 카테고리의 다른 글

[성능] Reflow 원인과 마크업 최적화 Tip  (3) 2013.07.09
Posted by darum

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

전체 댓글
숫자놀이 | (2014.07.11 13:42)

감사합니다! 좋은 글 이제야 찾았네요!_!

Metroidtic | (2021.03.15 22:20)

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

Заплаты для камер является важным этапом обслуживания автомобиля каждые 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/gruziki-balansirovochnye-1442

ValeriyPavlovitchSemenovsoymn | (2021.03.31 18:52)

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

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

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

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

С большим удовольствием ответим на все интересующие вопросы по теме: https://tiretools.by/cat/ventili-dlya-koles-i-kamer-1444

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

tiretools.by

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

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

댓글 작성