Webkit

Webkit:

- 사파리, 크롬 브라우저 렌더링 엔진

- css3 모듈에서 사용되는 css 문법

 

웹 브라우저 엔진:

- 내용을 렌더링하는데 사용되는 웹 브라우저의 일부

- 렌더링 엔진은 화면에 보여지는 것을 책임지는 부분

- html, php+css, xsl 을 읽어서 보여준다.

- 브라우저마다 사용하는 렌더링 엔진이 다르다. 그러므로 내용의 레이아웃이 제대로 안 그려질 수도 있다.

IE에 맞춰 만들어졌으면 다른 부라우저에서는 안 맞을 수도 있다.

- webkit은 css 문법에서 사용된다: 사파리, 크롬 브라우저에 맞춰서 내용을 만들어

 

 

CSS Webkit: 웹킷 엔진을 기반으로 하는 웹 브라우저에서만 동작하는 CSS 속성입니다. 이 속성들은 주로 사파리 브라우저와 구글 크롬 브라우저에서 사용되며 IE난 파이어폭스 등 다른 브라우저에서는 지원하지 않습니다.

-webkit-border-radius, -webkit-box-shadow, -webkit-gradient, -webkit-transform. 웹 페이지를 디자인하거나 구현할 때 해당 브라우저에서 webkit엔진을 사용하는지 여부를 확인해야 한다.

 

웹에서 CSS를 보면 webkit, moz, ms, o 등 접두어가 속성 앞에 붙은 것을 종종 볼 수 있다. 이들은 크로싱 브라우저를 위해 필요하다. 우리나라에서는 크롬과 파이어폭스만 적용하면 무난한 처리가 가능하다.

-webkit-: 구글, 사파리 브라우저에 적용

-moz-: 파이어폭스 브라우저에 적용

-ms- : 익스프로러에 적용, 보통 생

 

-webkit-box-align: center; -> webkit 기반 브라우저에서 사용되는 CSS 속성. flexbox레이아웃이나 또는 flexbox레이아웃이 아닌 경우에도 아이템을 수직(세로) 중앙에 정렬한다.

-webkit-box-pack: flexbox 레이아웃이나 flexbox레이아웃이 아닌 경우에도 아이템을 수평(가로)으로 정렬할 때 사용. justify-content와 비슷. 속성값으로는 'center', 'start', 'end', 'justify'가 있다. 

center-> 아이템을 수평 중앙에 정렬

start->아이템을 왼쪽 끝에 정렬

end->아이템을 오른쪽 끝에 정렬justify: 아이템을 수평 방향으로 균등하게 분배

 

-webkit-tap-highlight-color:

• 모바일에서 a태그 클릭시 하이라이트, 효과
• 꾹 눌렀을 때 또는 터치했을 때 영역 색상을 변경할 수 있다.

-webkit-tap-highlight-color: unset; (기본)

터치 및 꾹 눌렀을 때

색상 변경 후 터치 및 꾹 눌렀을 때

-webkit-tap-highlight-color: rgba(252,213,216, 8);

css 제거

-webkit-tap-highlight-color: transparent;