웹아틀리에 - 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 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로..

[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선 평소 웹을 보면 심심치않게 웹폰트가 적용되어 있는 것을 볼 수 있습니다. 이미 널리 쓰이고 있는 중인데요. 그런데 알고 계신가요? 웹폰트의 용량은 생각보다 큽니다. 영문 폰트의 경우는 그래도 괜찮습니다. 종류도 다양하고 용량도 작습니다. 문제는 한글 웹폰트죠. 실제로 c드라이브의 폰트 폴더에 가서 확인해 보면 한글 폰트의 용량은 매우 큰 편입니다. 그 용량을 웹에서 로딩한다면...? 사이트 이용자는 속도도 그렇지만 매번 폰트 다운로드로 인한 용량 때문에 데이터에 신경을 쓸 수 밖에 없습니다. 이미지는 경량화 하는데... 폰트는..? 사실 폰트를 서버에 올려서 사용하는 방법은 그리 추천드리지 않습니다. 데스크탑의 폰트는 용량이 매우 크기 때문..

10월 티스토리 초대장 배포 - 마감 그래서 아직 1장 남았습니다. 1장 마저 배포 후 마감 합니다.

[iOS10] 모바일 웹 줌 막기 최근 iOS10이 나오면서 생긴 이슈가 하나 있네요. 보통 모바일 웹에는 뷰포트 메타태그를 설정하죠? 뷰포트는 웹 사이트를 모바일에서도 보기 편하도록 만들어줘서 필수로 적용들 하죠. 이 태그로 웹을 확대하거나 축소하는 것을 막아두는곳이 꽤 많은데요, 이번 iOS10에서는 이게 제대로 적용되지 않는다고 하네요. 그럴때, 바로 자바스크립트를 이용하는 방법이 있습니다. 터치 이벤트를 받아 터치되는 손가락의 갯수를 구한 뒤 1개보다 많다면 터치이벤트를 작동하지 않게 하는 스크립트 입니다. 모쪼록 이번에 당황하고 계실 퍼블리셔 분들이 많으실것 같아 올려봅니다.

8월 티스토리 초대장 배포 - 마감했습니다.

오페라 개발자 사이트에서 퍼왔습니다. Sara Soueidan 이 2014년 6월 10일에 작성한 글이군요. 최근 하드웨어 가속을 3D속성을 이용해 사용하는 것을 자주 목격하는데요. 강제로 3D속성으로 변환시켜 가속하지 않아도 지원하는 속성이 있었습니다. 많은 분들이 알아두면 좋을것 같아 가져옵니다. 출처-https://dev.opera.com/articles/ko/css-will-change-property/시작하면서웹킷 계열 브라우저에서 CSS transform이나 animation 같은 프로퍼티를 사용할 때 발생하는 깜빡이는 현상에 관해 알고 있는 사람은 “하드웨어 가속”이라는 용어를 한번쯤 들어본 적이 있을 것이다.CPU, GPU, 하드웨어 가속하드웨어 가속은 그래픽 처리 장치(GPU)를 이용하여..

신카이 마코토 신작 - 너의 이름은 ( 君の名は ) 신카이 마코토의 신작 정보를 가지고 돌아왔습니다. 사실 애니메이션이 전공이라 이쪽을 참 좋아합니다. ㅎㅎ 신카이 마코토 라는 감독은 pc게임 이스2이터널의 게임영상을 감독했으며 게임회사에서 나와 애니메이션을 본격적으로 제작한 감독입니다. 데뷔작으로 라는 5분짜리 단편 애니메이션이 있습니다. 라는 작품으로 극장판 애니메이션을 데뷔했으며, , , , 그리고 이번이 최신작 너의 이름은 되겠습니다. 사실 그 사이사이에 CF 애니메이션을 여러개 만들었었는데요, 미친 퀄리티 광고 등등 으로 유명했죠. 부동산이라던지 학습지 라던지... 한창 화두였습니다. 크로스로드 누군가의 시선 AC재팬 대성건설 이 감독의 특징은 '커플 브레이커' 라고 하죠. 대단한 점은 배경의 ..

[JQuery] input="text" 에서 엔터키로 함수 호출 하는 방법 Form 내부에서 사용하는 input은 자동으로 엔터키로 서브밋 합니다. 하지만 종종 디자인상, 혹은 구조상 form 없이 버튼 없는 검색창 같은 경우를 만들게 되는데요. 이때 엔터키로 함수를 호출하는 방법 입니다. // enter event $('input').keyup(function(e) { if (e.keyCode == 13) 함수호출(); }); 여기서 사용하는 keyCode 13은 엔터키를 가리킵니다. 이벤트를 사용할 때 keydown보다 keyup을 권장 하더군요. 아무래도 keyup이벤트는 한번씩만 실행되기 때문이 아닐까 생각합니다.

6월 티스토리 초대장 배포 - 마감되었습니다.

HTML DTD HTML DTD(독타입 선언)는 사용하고자 하는 HTML 문서의 종류와 버전을 표시합니다. 독타입에는 몇 가지 종류가 있지만 주로 사용하는것은 다섯 개 정도로 꼽아 볼 수 있겠습니다. DTD는 W3C에서 정의한 웹표준을 의미하는데요, 선언을 해 주지 않으면 다양한 웹 브라우저들이 제각각의 형태로 렌더링을 하고 맙니다. 그래서 최소한의 격차로 줄이고 표준을 만들기 위해 정의 한 것이죠. DTD선언이란 것은 크로스 브라우징의 출발점이자 웹표준의 기초 입니다. 독 타입의 종류와 선언 HTML5 가장 최신의 시맨틱한 트렌디의 독타입 문서 입니다. 대부분의 스마트폰들은 지원을 하고있지만 PC사양에서의 구버전 브라우저들은 완전히 지원을 하지는 못합니다. W3C에서 html5를 공식 표준 권고안으로 ..