Lighthouse란?Lighthouse는 웹 앱의 품질을 개선하는 오픈 소스 자동화 도구입니다. Lighthouse는 Chrome 확장프로그램, 커맨드 라인에서, 노드 모듈에서 프로그램으로도 사용할 수 있습니다. Lighthouse에 확인할 URL을 지정하고, 페이지에 대한 테스트를 실행한 다음, 페이지에 대한 보고서를 생성합니다. 여기에서 실패한 테스트는 앱을 개선하기 위해 할 수 있는 것에 대한 지표로 사용할 수 있습니다. Note: Lighthouse는 현재 홈스크린에 추가나 오프라인 지원 같은, 프로그레시브 웹 앱 기능에 중점을 둡니다. 그러나 프로젝트의 가장 중요한 목표는 웹 앱 품질의 모든 측면에 대한 end-to-end 테스트를 제공하는 겁니다. 사용 방법Chrome v.54 이상 [개발자..

들어가며 이 강의는 ES6 자바스크립트 문법을 기반으로 작성되어 있습니다. ES6 문법에 익숙하지 않아서 예제 코드에서 모르는 것들은 찾아서 아래 참고자료에 링크로 모아두었습니다. 강의 속 예제와 아래 코드펜이 100% 똑같진 않지만 거의 비슷한 데모가 있어서 가져왔습니다. See the Pen JavaScript Drum Kit by Maegan Womble (@MaeganW) on CodePen. 만드는 과정 1. 피아노 건반 모양을 html/css로 만듭니다. (마크업 하는 과정은 생략합니다.) 2. 건반에 매칭 된 알파벳을 키보드 자판으로 누르면 data-key 값에 저장된 keyCode값을 읽어옵니다. 3. (2)에서 얻은 keyCode 값과 동일한 keyCode 값을 가진 audio 파일을 재..

테이블 형식의 디자인을 반응형으로 변경하면서 table 태그를 그대로 사용하기 어려운 상황이었다. (좌) PC 시안 / (우) 모바일 시안 그래서 css display 속성을 이용해서 div태그로 테이블 레이아웃을 잡았다. https://developer.mozilla.org/en-US/docs/Web/CSS/display 제목 셀에 해당하는 영역의 width를 원래는 width: calc(100% - 344px)로 잡아놨는데, disaplay: table-cell 속성이 들어가면서 이 부분이 사파리 브라우저에서 정상적으로 렌더링되지 않았다. calc() 속성은 safari 6 (2018.04.04 최신 버전은 11.1) 이하에서 -webkit-이 필요하기 때문에 호환성의 문제는 아니었다. 그럼 도대체 ..

Local Overrides https://developers.google.com/web/updates/2018/01/devtools#overrides 크롬 65 업데이트 명세를 읽던 중 슈퍼어썸한 걸 발견해서 포스팅 한다. 이제 로컬에서 데브툴을 통해 CSS 수정한 것도 새로고침 할 때 날아가지 않도록 설정할 수 있게 됐다! (몇 가지 예외사항을 제외하고) 어떻게 동작하는가? DevTools에서 변경 사항을 저장 해야하는 디렉토리를 지정합니다. DevTools에서 변경을 수행하면 DevTools는 수정 된 파일의 사본을 디렉토리에 저장합니다. 페이지를 다시 로드하면 DevTools는 네트워크 리소스 대신 로컬의 수정 된 파일을 제공합니다. 설정 방법 Sources 패널을 연다. Override 탭을 연..

Chrome 62 adds a default border radius to 2017년 10월 쯤 갑자기 사이트 모든 input에 border-radius가 적용되어 전체 스타일을 훼손(!)시키는 이슈가 있었다. 나는 내가 잘못 CSS Override 한 줄 알고 놀랬는데, 알고 보니까 크롬 버전 62 업데이트가 되고 난 후 user agent 속성으로 들어가진 거였다. 역시 나만 이상하게 느낀게 아닌건지 크롬팀은 버전 63 (2017.11) 에서 다시 이 속성을 없던 걸로 revert 하기로 했단다. 오늘 확인해보니 border-radius가 없길래 (2018.03.16. ver.65) 히스토리를 찾아봤더니 63에서 사라졌다고 한다.

jQuery로 작업할 때 가장 많이 쓰던 코드들이다. 1. 공통 header, footer html 파일을 로드2. 제이쿼리 탭 메뉴 소스3. 제이쿼리 아코디언 메뉴 소스4. 제이쿼리 드롭다운 메뉴 소스5. 제이쿼리 커스텀 셀렉트 박스 소스 $(function() { // layout $('#header').load('../../docs/base/header.html'); $('#footer').load('../../docs/base/footer.html'); }); /* Tab */ function tab(e, num){ var num = num || 0; var menu = $(e).children(); var con = $(e+'-con').children(); var select = $(menu)..

[참고] https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type :nth-of-type() The :nth-of-type() CSS pseudo-class matches elements of a given type (tag name), based on their position among a group of siblings. developer.mozilla.org 첫번째 div.content-area에 특정 스타일을 주고 싶었는데, 왜 안되지 하고 한참 헤맸는데 생각해보니까 이 속성은 엘리먼트를 타깃으로 해야지 제대로 동작한다. 클래스명으로 되는 게 아니었다! 감 떨어져쓰 ㅠ_ㅠ See the Pen [CSS] :nth-of-type() by zin..

[참고]https://stackoverflow.com/questions/34667409/why-is-the-css-border-color-inheriting-the-the-color-propertyhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-color See the Pen [CSS] border-color inherits from color property by zinee (@zineeworld) on CodePen.

Shortcut Mac 바탕화면 보기 : cmd+F3 / Fn+F11 특수문자 : ctrl+cmd+space Webstorm http://webclub.tistory.com/42 shitf+cmd+F : file in path option+cmd+I : inspect option+shift+방향키 : line move option+마우스클릭 : multiselection cmd+L : go to line shift+cmd+O : file open iTerm 새 윈도우 : cmd+n 새 탭 : cmd+t 탭 닫기 : cmd+w 탭 세로 분할 : cmd+d 탭 가로 분할 : cmd+shift+d 탭 투명 설정 : cmd+i > window tab 탭 투명 on/off : cmd+u 탭 포커스 찾기 : cmd..