크롬 다운로드를 권장하기 위해서 띠배너를 보여주는데, 크롬 브라우저일 경우에는 보이지 않아야 한다. 어떻게 하면 크롬 브라우저 인지 알 수 있을까? userAgent를 통해 확인 할 수 있다. UserAgent 관련 정보가 정리된 곳https://developer.chrome.com/multidevice/user-agenthttps://developers.whatismybrowser.com/useragents/explore/hardware_type_specific/mobile/1Step1. MacOS ChromeMacOSChrome : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (K..

(2020 리뉴얼 ver.) 심플하지만 화려하게 해주세요국내도서저자 : 박창선출판 : 부키 2020.05.21상세보기 (2018 초반 ver.) 디자이너 사용설명서국내도서저자 : 박창선출판 : 부키 2018.06.08상세보기 2018년 12월 27일 목요일 ​ 출판사 부키는 직업에 관련된 도서를 잘 만드는 것 같다. 디자이너로 취업하기 전이나 프리랜서를 하려는 사람, 디자이너에 대한 이해가 하나도 없는 사람들이 읽으면 엄청 도움이 될 것 같다. 사실 나는 #싸우지않고원하는디자인을얻는45가지방법 이라는 부제에 끌려서 읽기 시작했다. 처음 책을 펼쳐서 목차만 보아도 진짜 책 잘 뽑았다(!) 라는 생각이 든다. 스타트업에서 5년 동안 일하면서 함께 일하거나 지켜본 디자이너들의 이야기가 그대로 다 쓰여 있었다...

#퇴사-굿바이MMT2018년 1월 30일에 마이뮤직테이스트를 떠났다. 정말 애증의 회사였다. 그냥 회사라고만 말하기엔 모자라다. 정말 좋아했고 행복했고 힘들었고 성장할 수 있었던 곳이었다. 그래도 좋게 마무리하고 웃으면서 떠날 수 있어서 감사했다. 함박눈이 펑펑내리던 날 2층 개발자분들까지 다 마중나와서 안녕~ 해주시던 모습이 아직도 선명하다. 진짜 울뻔 했다.    #이직-코인원2018년 2월 19일 첫 출근. 두근두근 두번째 이직. 낯설고 어색한게 세상에서 가장 싫은 나에게 새로운 환경은 언제나 힘들다. 3개월은 진짜 적응이 안되서 참 힘들었는데 (엠엠티도 그랬었다) 100일이 지나니 슬슬 괜찮아지기 시작했다. 좀처럼 내 회사 같은 느낌이 들지 않고 꼭 이방인으로 앉아 있는 기분이었는데 거래소 마크업..

상업용 무료한글폰트 사이트 '눈누'https://noonnu.cc/ 한글 폰트라고 하면 나눔고딕이 전부인 나에게 진짜 천국과도 같은 곳KCC-은영체 너무 취향저격이다...... 크흡 서버비 때문에 언제까지 운영될 수 있을까... 약간 걱정이 된다.진짜 좋은데 ㅠㅠㅠㅠㅠ 어디서 통크게 후원 안해주나 ㅜㅜㅜ 눈누 펀딩하러가기 >> https://www.wadiz.kr/web/campaign/detail/28025?utm_source=unknown&utm_medium=maker_noonnu 눈누 영상 from Project Noonnu on Vimeo.

문제환경 : 아이폰X iOS 11.2.1 (크롬, 사파리)문제현상 : 트레이드 페어 드롭다운이 보이지 않음문제원인 : max-height: calc(100% - 44px) 이 먹히지 않음 해결방법특정 iOS 버전에서 발생하는 이슈라고 생각하여, min-height: 85% 값을 방어책으로 넣어 둠85% : iphone5 (최소 디바이스 사이즈) 기준으로 가로모드에서도 하단이 잘리지 않는 값정상적인 다른 버전에서는 max-height 값이 더 크기 때문에 min-height 값에 영향없음 문제해결과정화살표 방향, 배경색이 바뀌는 것으로 보아 .is-open 상태는 정상적으로 ON/OFF 되는 것으로 확인DOM 구조상 dropdown 부분이 제일 하단에 있어서 z-i..

같은 CSS 를 쓰고 있는데 왜 height 에 차이가 생겼을까? PC 화면 (time, side, price, remaining, total, sum, action) Mobile 화면 (time, side, price, total, action) - remaining, sum 삭제 반응형에 따라 셀이 보여졌다 아니었다 해야하고, 다른 셀들은 유동적으로 width가 변경되어야 하는 상황이었다. display: none 처리를 하지 않고, overflow: hidden 처리를 했더니 폰트가 살아있는 채로 영역을 좁히니 임의 공백이 생기는 걸 확인했다. font-size: 0; 을 넣으니 height: 24px; 로 정상 출력이 되었다. 개선 전 (26px) 개선 후 (24px) - font-size: 0;..

ol 리스트 depth 별 스타일 지정하기 ol 에 리스트 스타일 이름을 지정해주고 li 에 지정된 리스트 이름을 연결 시키고, li:before 요소에 표현 방법을 구현하면 된다. ol { counter-reset: type1; li:before { counter-increment: type1; content: counter(type1) ". "; } } depth 별 스타일을 다르게 하고 싶다면 ol > li > ol > li 와 같이 선택자에 따라 다른 표현방식을 적어주면 된다. See the Pen WNrLQQj by zinee (@zineeworld) on CodePen. https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset counte..

CGEX 모바일 웹 Only Desktop 버전 웹사이트로 런칭하고 나서 당연히 모바일 웹에 대한 필요성도 있었다. 애매하게 남은 12월 한 달을 어떻게 알차게 보낼 수 있을까 고민하다가 혼자서 먼저 모바일 웹을 어느정도 선까지 만들어보고 싶은 욕심이 생겼다. 디자인은 이미 어느정도 나와 있는 상황이어서 내가 나머지 페이지들을 모바일화 하는 동안 디자이너님께서 트레이드 페이지 디자인을 고도화해주셨다. 12월 안에 내가 해낼 수 있을까 걱정이 되기도 했는데 생각보다 빠르게 진행되어서 예상보다 1주일이나 당겨서 완료할 수 있었다. 2018년 모바일웹의 목표는 일단 모바일에서 볼 수 있는 레이아웃으로 정돈한다! 였다. Balance, Order 페이지의 테이블들은 아직 반응형에 최적화 되어있지는 않다. 그런 ..

이게 파비콘의 전부라고 생각하는 당신이 읽어야 할 글! Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? | CSS-Tricks The following is a guest post by Philippe Bernard. Philippe has done research on what it takes to make a favicon (and all the related graphics and markup) css-tricks.com Adding favicons in a multi-browser multi-platform world - mobiForge Favicons: they used to be so easy. A simple 16×16 pixel f..