css3 spec

우선순위 Module 특징 지원 vendor prefix how to use 참고
1 Media Queries https://www.w3.org/TR/css3-mediaqueries/
2 text text-shadow
3 font font-face IE하위버젼을 위해 eot 포멧 필요 https://www.w3.org/TR/css-fonts-3/
4 font-size
  1. vm
  2. rpm
5 color opacity https://www.w3.org/TR/css3-color/
6 background multiple-images IE9 background.html https://www.w3.org/TR/css3-background/
7 rgb, rgba
8 gradients -moz-

-webkit-

https://www.w3.org/TR/css3-images/#gradients
9 sizing -moz-

-webkit-

https://www.w3.org/TR/css3-images/#sizing
10 clip IE9 -webkit- (사파리) background.html
11 origin IE9 background.html
12 border border-radius   -moz-

-webkit-

https://www.w3.org/TR/css3-background/#the-border-radius
13 transform -moz-

-webkit-

https://www.w3.org/TR/css3-transforms/
14 transition -webkit- https://www.w3.org/TR/css3-transitions/
15 animation -webkit-
16 display display:flex 관련 flex

flex-direction

flex-wrap

align-items

order

align-self

align-content

justify-content

flex-flow (IE11)
(flex-direction, flex-wrap)

-ms- (ie10용)

-moz-

-webkit-

display_flex.html https://www.w3.org/TR/css-flexbox-1/

예제

  1. flex: editor.html
  2. product_editor_bak.html
17 display -webkit-box -webkit-line-clamp ONLY

CHROME

SAPARI

웹킷엔진에서만 사용됨. (IE에서 사용안됨) http://caniuse.com/#search=-webkit-line-clamp

display:-webkit-box; 와 -webkit-line-clamp를 이용하여 여러줄의 문단도 말줄임 처리를 할 수 있다.

18 -webkit-box-orient
19 box-shadow -moz-

-webkit-

https://www.w3.org/TR/css3-background/#the-box-shadow
20 box-reflect ONLY

CHROME

SAPARI

-webkit- /box_reflect.html https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
21 multiple columns -moz-

-webkit-

https://www.w3.org/TR/css3-multicol/
22 box-sizing -moz-

-webkit-

https://www.w3.org/TR/css3-ui/
23 counter https://www.w3.org/TR/css-counter-styles-3/
24 speech https://www.w3.org/TR/css3-speech/
25 shape https://www.w3.org/TR/css-shapes-1/
26 masking https://www.w3.org/TR/css-masking-1/
27

https://www.w3.org/TR/css-namespaces-3/
28 compositing https://www.w3.org/TR/compositing-1/
29 keyframe
30 backface-visibility
 여기를 클릭하여 펼치기…

[공유] 크롬에서 column-count안의 x버튼이 미노출되던 이슈 해결

어제 미팅 때 이미지편집창에서
column-count 안에 transform을 쓴 x버튼이 영역은 잡고 있지만, 노출이 되지 않아 이슈가 있다고 공유드렸었는데요.

해당 이슈 해결하여 공유드립니다.

* test url: http://fe.cafe24test.com/smartAdmin/market/global/admin/product/common/product_editor.html
* 해결방안: column-count가 적용된 부분에 backface-visibility: hidden; 을 적용하였더니 해결되었습니다.
* 예시:
editList {
column-count: 3;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
* 참고 url: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_backface-visibility

감사합니다.

31 *********

Responsive Web Design

반응형웹은 쉽게 말해, 디바이스 화면의 크기에 따라 웹페이지의 레이아웃이 자동적으로 재조정 되는 것을 말합니다.

기존에는 PC와 모바일기기를 대응하기 위해 선별된 기기 유형에 따른 별도의 독립적인 템플릿 (각각의 *HTML, *CSS 소스)을 이용하였지만,

반응형웹은 미디어퀴리라는 CSS기법을 이용하여 하나 템플릿(HTML, CSS소스)만으로 다양한 환경에서 레이아웃이 변환되어 최적화된 환경을 사용자에게 제공합니다.

사용자 입장에서는 어느 기기에서든 같은 콘텐츠를 적절한 화면으로 볼 수 있고, 개발자 입장에서는 기기마다 따로 웹페이지를 개발하지 않아도 되므로 개발 비용을 절감할 수 있습니다.

*HTML(Hyper Text Markup Language) : 웹페이지를 만들기 위한 언어로 웹브라우저 위에서 동작하는 언어.

*CSS(Cascading Style Sheets) : HTML을 바탕으로 만들어진 문서를 꾸며주는 역할.

한 화면은 HTML로 구성되어 있으며 이 화면을 꾸며주기 위해서 CSS파일이 연결 되거나 안에 포함 되어 있다.

mediaquery

<link>

<style>

@import

css

The 960 Grid System

960 Grid System은 단순히 너비가 960px 인 Grid를 사용하여 웹사이트를 배치하는 방법이다.

web accessibility

웹 접근성이란?

월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란
‘장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간’이라고 정의하였으며,
웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야
한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고,
웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다.

하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.

월드 와이드 웹 컨소시엄(W3C: World Wide Web Consortium)웹 접근성 이니셔티브(WAI: Web Accessibility Initiative)링크와 짐 대처 (Jim. Thatcher)는 웹 접근성에 대해 매우 현실적으로 정의하고 있다. 즉, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 편리하게 사용할 수 있으며, 그 내용이 이해하기 쉬워야 하며, 견고성을 지녀야 웹 접근성이 있다고 보는 관점이다. 인터넷 전자도서관인 Wikipedia 는 웹 접근성의 개념을 웹 콘텐츠 뿐만 아니라 인터넷을 통하여 전달될 수 있는 모든 콘텐츠로 확대하고 있다.

웹 접근성 및 정보통신 접근성에 대한 주요 정의

웹 접근성 및 정보통신 접근성에 대한 주요 정의
구분 정의
장애인·노인 등의 정보통신 접근성 향상을 위한 권장지침 정보통신 제품과 서비스를 활용하고자 하는 사람에게 이의 활용 가능성이 제공되는 것
웹 접근성 이니셔티브
(WAI: Web Accessibility Initiative)
장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고(Perceivable), 운영하고(Operable), 이해하고(Understandable), 기술에 상관없이 이용할 수 있도록 견고한(Robust)하게 웹콘텐츠를 만드는 것
Wikipedia 표준 브라우저 뿐만 아니라 다양한 사용자 에이전트(User Agent)를 사용하는 사람들이 웹 페이지에 접근하기 쉽게 만드는 것으로, 이를 통해 장애인들도 웹을 사용할 수 있도록 보장하는 것
한국정보화진흥원 어떠한 사용자(장애인, 노인 등), 어떠한 기술환경에서도 사용자가 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것

 

[source] https://www.wah.or.kr:444/Accessibility/define.asp