웹아틀리에 - Web atelier

예를 들어, 어두운 배경색에서는 밝은 글자색을 보여주고 싶고, 밝은 배경색은 어두운 글자색을 보여주고 싶다고 하겠습니다. 그런 조건에서 봤을 때 아래 예제는 글씨색이 눈에 잘 들어오지 않습니다. 어두운 배경색에는 아래처럼 밝은 글자색을 보여줘야 합니다. 색상에 16진수(예: #ffffff) 형태로 주어졌을 때 영상의 밝기차에 대한 정보(luma)를 결정하는 함수는 다음과 같습니다. function getTextColorByBackgroundColor (hexColor) { const c = hexColor.substring(1)// 색상 앞의 # 제거 const rgb = parseInt(c, 16)// rrggbb를 10진수로 변환 const r = (rgb >> 16) & 0xff// red 추출 c..

Vue.JS 의 대용량 데이터를 뿌려줄 때 문제되는 성능의 최적화 방법에 대한 포스트 입니다. 많은 배울 점이 있어 원출처를 남기고 퍼옵니다. [출처 Dev.DY] - [Vue.JS] 대용량 데이터의 처리 방법과 성능 최적화 방법 (Vue.js Performance) [Vue.JS] 대용량 데이터의 처리 방법과 성능 최적화 방법 (Vue.js Performance) 1년간의 대규모 프로젝트를 진행하면서 해결한 Vue.js 성능 최적화 방법 노하우 공유!!Vue.js에서 대용량 데이터 처리 시에 성능을 최적화하는 방법에 대해 알아보자. 남들은 모르는 Vue.js 성능 개선과 Vue.js에서 대용량 데이터를 처리하는 방법을 배워보자. Vue.js 성능 개선에서 가장 중요한 핵심은 Observe이며, 부가적으..

[제품리뷰] 와콤 뱀부 Ink 펜 얼마 전에 와콤 뱀부 Ink 펜이 출시되었습니다. 과거 와콤 타블렛을 많이 사용하던 저에겐 매우 반가운 소식입니다. 저는 서피스 프로 3를 사용하고 있기 때문에 서피스 3 펜을 주로 쓰고 있었는데요, 얼마 전 뱀부 잉크 펜을 사용해 볼 기회가 찾아왔습니다. 서피스 3펜과 뱀부 잉크 펜에 대한 차이를 좀 소개해드리려고 합니다. 서피스 3펜 VS 와콤 뱀부 Ink 서피스 펜의 경우는 전용이다보니 페어링후 바로 사용했었는데요, 뱀부 ink 같은 경우는 페어링을 해주고 모드를 바꿔주어야 했습니다. 와콤 뱀부 Ink 펜의 AES모드와 MPP모드를 변경하는 방법. 약 2초 정도 누르고 있으면 모드가 변경 됩니다. MPP모드의 경우에는 2번 처럼 불빛이 들어옵니다. 바로 이 부분 이..

[크로스브라우징]구버전 ie 테이블 가로스크롤 이슈 해결법 퍼블리셔라면 한번쯤 고민해 봤을 크로스브라우징 이슈 입니다. 이번 포스팅은 ie7에서 ie8~9와 다르게 가로스크롤이 나타나는 현상의 해결법 입니다. 출처 (HEIVLAB) 테이블을 이용하여 상하스크롤이 있는 컨텐츠를 만들기 위해서 어떻게 해야 할까요?? 테이블을 감싸고 있는 div에 height값을 주고 스크롤을 위해 overflow:auto 속성을 줍니다. 테이블요소의 속성으로 ​위와 같이 적용했습니다. 왼쪽은 IE8 ~ IE11브라우저에서 확인한 화면 오른쪽은 IE7에서 확인한 화면 입니다. 그 결과 IE7브라우저에서 상하스크롤 뿐만 아니라 좌우스크롤도 함께 생긴 것을 볼 수 있습니다. 좌우 스크롤을 없애기 위해 oveflow-x:hidde..

11월 티스토리 초대장 배포 - 마감 1. 메일주소 2. 만들고 싶은 블로그의 주제 비밀댓글로 적어주세요. 이번달도 신청자 분들이 많아서 금방 마감이 되었습니다. 짝짝짝~ 모두 제가 꼼꼼히 읽어보고 초대장 발송해 드린거니, 예쁜 포스팅 오랫동안 하셨으면 좋겠습니다. 축하드립니다.

[반응형웹]em 과 rem을 적절하게 사용하자. 반응형 웹을 개발하면서 다들 고민을 해보셨을 이야기 입니다. em과 rem의 차이. 그리고 적절한 활용 방법을 정확하게 알려주는 글이 있어서 가져옵니다. 출처 (https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984) 여러분은 아마 좀 더 유연한 측정 단위의 사용을 고려해 보신 적이 있으셨을 겁니다. 그런데 언제 rem 단위를 쓰고, 또 언제 em을 쓸 것인지 아직 완전하게 이해하지 못하셨다면, 이번에 확실하게 안내해 드리겠습니다! em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로..