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

git repository

repository

github

branch

Git 브랜치 – 브랜치란 무엇인가

모든 버전 관리 시스템은 브랜치를 지원한다. 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 것이 브랜치다.

사람들은 브랜치 모델이 Git의 최고의 장점이라고, Git이 다른 것들과 구분되는 특징이라고 말한다. 당최 어떤 점이 그렇게 특별한 것일까. Git의 브랜치는 매우 가볍다. 순식간에 브랜치를 새로 만들고 브랜치 사이를 이동할 수 있다. 다른 버전 관리 시스템과는 달리 Git은 브랜치를 만들어 작업하고 나중에 Merge 하는 방법을 권장한다. 심지어 하루에 수십 번씩해도 괜찮다. Git 브랜치에 능숙해지면 개발 방식이 완전히 바뀌고 다른 도구를 사용할 수 없게 된다.


브랜치의 목록을 볼 때

브랜치를 생성할 때

브랜치를 삭제할 때

병합하지 않은 브랜치를 강제 삭제할 때

브랜치를 전환(체크아웃)할 때

브랜치를 생성하고 전환까지 할 때

브랜치 간에 비교할 때

브랜치 간의 코드를 비교 할 때

로그에 모든 브랜치를 표시하고, 그래프로 표현하고, 브랜치 명을 표시하고, 한줄로 표시할 때

A 브랜치로 B 브랜치를 병합할 때 (A ← B)

branch 삭제

[source] https://opentutorials.org/course/2708/15261