Blog
반응형 그리드 레이아웃
그리드 레이아웃은 이미지 갤러리나 상품 목록 등에 사용되는 매우 자주 볼 수 있는 레이아웃이다. 보통 화면 크기에 따라 다단의 갯수가 변하고 다단의 너비는 사이의 간격은 고정 값을 가지게 된다. 구현이 CSS 만으로는 까다롭기 때문에 자바스크립트를 사용해서 많이 구현한다. 마이크로소프트에서 그리드 레이아웃을 제안한 이후로 시간도 많이 지났고 이제는 대부분의 브라우저에서 구현을 했기 때문에 까다로운 그리드 레이아웃을 CSS 그리드를 이용해서 쉽게 구현할 수 있게 되었다. 구문도 매우 간단하다. ul.grid { display: …
dev |2019-12-25 | Comments (0)
이미지 원본 크기 naturalWidth, naturalHeight
이미지 요소의 크기는 width, height로 알 수 있다. width, height는 이미지가 실제로 로드되지 않아도 스타일로 크기가 지정되어 있으면 그 크기를 반환한다. display: none을 지정했을 때 같이 화면에 랜더되지 않으면 크기를 가져올 수 없지만 재미있는 것은 랜더가 안된 상태에서 이미지 로드가 끝나면 이미지의 원본 크기를 반환한다는 점이다. 이미지가 실제로 차지하고 있는 크기는 offsetWidth, offsetHeight로 알 수 있다. display: none으로 화면에 랜더되지 않을 때에는 이미지 로드 …
dev |2019-07-13 | Comments (0)
Git 전역 ignore 파일
개인적으로는 전역 설정보다는 저장소마다 .gitignore를 상세히 설정하는 것을 선호한다. 그런데 지금 다니는 회사는 대부분의 어플리케이션을 파이썬으로 만들다 보니 파이썬에서 만드는 임시파일이 .gitignore에 등록되지 있지 않은 경우를 자주 볼 수 있었다. 그래서 전역 설정에 대해서 살펴봤는데 대부분 전역 설정파일을 만들고 그 파일을 사용하는 방법을 추천하고 있었다. git config --global core.excludesfile '~/.gitignore' 기본으로 참조하는 파일이 있을 것 같아서 찾아보니 Git 메뉴 …
dev |2019-06-29 | Comments (0)
유용한 자바스크립트 배열 함수 find, includes, flat
배열을 다룰 때 특정 조건을 만족하는 바로 그 요소를 반환 받고 싶을 때가 있었는데 이때 유용한 메서드가 바로 .find()이다. .filter()는 새 배열을 반환하지만 .find()는 인자나 undefined를 반환한다. 키 밸류가 저장되어 있는 myobj 객체에서 myvalue 값에 해당하는 키를 찾고자 할 떄 아래와 같이 사용할 수 있다. const key = Object.keys(myobj).find(arr => myobj[arr] === myvalue) MDN의 .find() 메서드 설명을 보면 .findIndex() …
dev |2019-05-23 | Comments (2)
iMac 21.5-inch, Late 2009 HDD 교체
집에서 iMac 21.5-inch, Late 2009 모델을 쓰고 있는데 소프트웨어 업데이트를 했더니 부팅이 안됐다. 디스크 유틸리티에 들어가서 하드를 복구 하려고 하니 하드 마운트가 풀리더니 인식이 안됐다. 그 전에도 비슷한 현상이 있어서 하드를 더이상 사용할 수 없게 됐나보다 생각하고 iMac을 치워버렸다. 고칠까 고민하다가 찾아보니 분해과정이 비교적 쉽고 집에 노는 하드도 하나 있어서 정신을 차리고 보니 이미 iMac을 뜯고 있었다. 상판 유리를 진공흡착기로 들어내라고 되어 있어서 어떻게 조립이 되어 있길래 이게 가능한 …
hobby |2019-04-20 | Comments (0)
자바스크립트에서 소숫점 아래 자리수 제한하기
숫자 소수점 아래 몇째 자리까지 표현하라는 문제는 프로그래밍 처음 배울때 많이 봤다. 나타낼 소수점 아래자리 갯수 만큼 10의 자승을 곱해서 정수부로 올리고, 소숫점 아래를 반올림하고, 다시 곱했던 수를 나눈다. 당연히 이 방법만 있는 줄 알고 계속 이렇게 해왔다. Math.round(123.4567 * 100) / 100; // 123.46 자바스크립트에서도 이렇게 쓰고 있었는데 뭔가 찾아보다가 .toFixed()라는 메서드가 있다는 것을 발견했다. 최근에 추가된건가 하고 봤더니 무려 ECMA 3rd, Javascri …
dev |2019-02-23 | Comments (0)
오드컨셉
오늘부터 오드컨셉에서 프론트엔드 엔지니어링 & 소프트웨어 엔지니어로 근무한다. 사무실은 역삼이다.
work |2019-01-02 | Comments (4)
마이크로소프트 엣지를 크로미움 기반으로 전환
며칠전에 나왔던 루머에 대한 공식 입장이 나왔다. 마이크로소프트(Mocrosoft)가 마이크로소프트 엣지(Microsoft Edge)의 랜더링 엔진을 크로미움(Chromium) 기반으로 교체한다. 마이크로소프트도 많이 변했고 그동안 보여줬던 오픈소스에 대한 움직임은 칭찬해야 한다. 이번 변화에 나타나있는 웹과 오픈소스에 대한 그들의 의도 역시 훌륭하다. 맥이나 리눅스용 엣지도 나올 것으로 예상된다. 마이크로소프트가 크로미움을 선택한 데에는 충분한 이유가 있었을 것이다. 하지만 다양성이 존중되어야 하는 웹의 관점에서는 우려가 많 …
browser |2018-12-08 | Comments (1)
케이블 꼬이지 않게 감는 방법
긴 케이블 감을때 손과 팔꿈치를 이용해서 감고는 했는데 풀다보면 줄이 다 꼬여 있어서 씨름하는 경우가 많았다. 특히나 요즘같이 날씨가 추워서 케이블이 굳은 경우에는 더욱 풀기가 힘들었다. 애초에 케이블을 감는 방법이 잘 못 되어서 케이블이 계속 꼬이는 것이었다. 케이블을 감을때마다 안쪽, 바깥쪽으로 바꿔가면서 감으면 꼬이지 않는다. 인생팁이다.
hobby |2018-11-26 | Comments (1)
셀렉트 요소의 기본값 없애기
<select> <option value="1">옵션1</option> <option value="2">옵션2</option> <option value="3">옵션3</option> </select> 브라우저는 첫번째 옵션 요소인 '옵션1'을 선택된 상태로 보여준다. 이 때 셀렉트의 value 값을 확인해 보면 선택된 옵션의 값인 '1'이고 티입은 문자열(string)이다. 셀렉트의 value 값을 undefined나 null, 또는 …
dev |2018-11-25 | Comments (0)