forked from philipwalton/solved-by-flexbox
/
index.html
104 lines (98 loc) · 6.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
---
template: home.html
---
<section class="Section">
<div class="Container">
<h2 class="Section-heading">서론</h2>
<p>CSS는 너무 오랫동안 적절한 레이아웃 메커니즘이 없었습니다. 트랜지션, 애니메이션, 필터는 모두 훌륭하고 유용한 부가 기능이지만, 웹 개발자들이 불평해 온 영원해 보이는 문제는 다루지 않습니다.</p>
<p>마침내, 감사하게도 우리는 <a href="http://www.w3.org/TR/css3-flexbox/">Flexbox</a>라는 해결책을 갖게 되었습니다.</p>
<p>이 사이트는 또다른 CSS 프레임워크에 대해 설명하는 것이 아닙니다. 한때 CSS만으로는 해결하기 어려웠거나 불가능했지만, 이제는 Flexbox를 통해 아주 쉽게 해결할 수 있는 문제들을 소개하는 사이트입니다. 최근 Internet Explore 11과 Safari 6.1이 배포되면서, 이제 최신 Flexbox 스펙은 모든 모던 브라우저에서 지원됩니다.</p>
<p>아래의 데모들을 참고하세요. Web inspector로 스타일을 보거나, <a href="https://github.com/philipwalton/solved-by-flexbox">소스 코드</a>를 직접 보면서 CSS 레이아웃이 Flexbox를 통해 얼마나 쉬워지는지 확인하세요.</p>
</div>
</section>
<section class="Section">
<div class="Container">
<h2 class="Section-heading">둘러보기</h2>
<ul class="Grid Grid--guttersLg">
{% for demo in site.demos %}
<li class="Grid-cell u-full u-med-1of2 u-large-1of3">
<div class="Feature">
<a href="{{ site.baseUrl }}demos/{{ demo.slug }}/">
<figure class="Feature-figure">
<img class="Feature-image" alt="{{ demo.title }}" src="{{ site.baseUrl }}images/{{ demo.slug }}.jpg">
</figure>
<h3 class="Feature-title">{{ demo.title }}</h3>
</a>
<p class="Feature-description">{{ demo.excerpt }}</p>
</div>
</li>
{% endfor %}
</ul>
</div>
</section>
<section class="Section">
<div class="Container">
<h2 class="Section-heading">브라우저 지원</h2>
<ul class="Grid Grid--guttersLg Grid--justifyCenter">
<li class="Grid-cell Grid-cell--autoSize">
<div class="Browser Browser--chrome" title="Since 2012-07-31">
<figure class="Browser-image"></figure>
Chrome<br>21+
</div>
</li>
<li class="Grid-cell Grid-cell--autoSize">
<div class="Browser Browser--opera" title="Since 2012-11-05">
<figure class="Browser-image"></figure>
Opera<br>12.1+
</div>
</li>
<li class="Grid-cell Grid-cell--autoSize">
<div class="Browser Browser--firefox" title="Since 2013-06-25">
<figure class="Browser-image"></figure>
Firefox<br>22+
</div>
</li>
<li class="Grid-cell Grid-cell--autoSize">
<div class="Browser Browser--safari" title="Since 2013-06-11">
<figure class="Browser-image"></figure>
Safari<br>6.1+
</div>
</li>
<li class="Grid-cell Grid-cell--autoSize">
<div class="Browser Browser--ie" title="Since 2012-09-04">
<figure class="Browser-image"></figure>
IE<br>10+
</div>
</li>
<li class="Grid-cell Grid-cell--autoSize">
<div class="Browser Browser--edge" title="Since 2015-03-15">
<figure class="Browser-image"></figure>
Edge<br>All
</div>
</li>
</ul>
<h3 class="Section-heading">주의 사항 및 알려진 문제</h3>
<ul class="Section-list">
<li>IE 10은 Flexbox를 지원하지만 현재 스펙의 <a href="http://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">초안</a>(<code>display:flexbox</code>)만을 지원합니다.</li>
<li>Safari 6 및 구버전은 현재는 사라진 Flexbox 문법의 <a href="http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">원래 버전</a>(<code>display:box</code>)을 지원합니다.</li>
<li>Firefox 27 및 구버전은 여러 줄에 걸친 Flexbox를 지원하지 않습니다. 자세한 내용은 이 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=702508">버그</a>를 참조하세요.</li>
<li>전체 브라우저 지원 비교를 보고 싶다면 <a href="http://caniuse.com/flexbox">caniuse.com/flexbox</a>를 참조하세요.</li>
</ul>
</div>
</section>
<section class="Section">
<div class="Container">
<h2 class="Section-heading">코드에 대해서</h2>
<p>이 사이트에 있는 코드 예제는 모두 특정한 디자인 문제를 Flexbox로 해결하는 법을 보여줍니다. 모든 코드는 사양이 호환되는 브라우저에서 데모를 작동시키는데 필요한 코드만 보여줍니다. 일부 브라우저는 Flexbox 스펙의 최신 버전을 완전히 준수하지 않으므로 안타깝게도 몇 가지 대응책이 필요합니다.</p>
<p>완전히 사양이 호환되지 않는 브라우저를 위한 대응책은 코드 예제에는 나타나 있지 않습니다. 그러나 구현 세부사항에 관심이 있다면 소스 파일을 확인해 보시기 바랍니다. 각각의 데모는 소스코드로 링크되어 있으며, 특정 브라우저를 위한 대응책도 모두 잘 문서화되어 있습니다. 그러니 코드 보는 것을 겁내지 마세요!</p>
<p>현재의 Flex 속성에 각 브라우저 제조사별로 prefix를 붙이고 대응되는 레거시 코드로 변환하는 것은 모두 <a href="https://github.com/ai/autoprefixer">autoprefixer</a>가 처리하고 있습니다. 만약 Flexbox 코드를 작성하면서 autoprefixer를 사용하지 않는다면 끔찍한 실수를 하고 계신 겁니다.</p>
<p>코드 예제 및 소스 코드에서 사용하고 있는 클래스 네이밍 컨벤션은 <a href="https://github.com/suitcss/suit">SUIT CSS</a>에서 온 것이며 이 프로젝트는 BEM 방법론에 기초하고 있습니다. 각 예제는 하나 이상의 재사용 가능한 CSS 컴포넌트를 포함하고 있으므로 이 패턴을 여러분의 프로젝트에 응용하거나 복사할 수 있습니다. 링크는 각 예제 페이지의 각각의 컴포넌트에 제공됩니다.</p>
<p>만약 실수를 찾았거나 추가로 예제를 제안하고 싶다면, <a href="https://github.com/philipwalton/solved-by-flexbox">Github</a>에 자유롭게 Issue를 남겨주시거나 Pull Request를 보내주시기 바랍니다.</p>
</div>
</section>
<section class="Section">
<div class="Container">
<h2 class="Section-heading">한국어 번역</h2>
<p>한국어 번역은 <a href="https://github.com/HyunSeob">@hyunseob</a>이 개인적으로 진행하였습니다. 오탈자나 더욱 매끄러운 번역은 이 <a href="https://github.com/HyunSeob/solved-by-flexbox-kr">레포지토리</a>에 Issue를 남겨주시거나 kr 브랜치로 Pull Request를 보내주시기 바랍니다. 감사합니다.</p>
</div>
</section>