본문 바로가기

전체보기

특정 비율 유지하는 div 만들기 (padding 활용, IE11 호환) CSS 모던 스펙 중 하나인 'aspect ratio'는 특정 엘리먼트의 비율을 특정 값으로 유지할 수 있게 해 줍니다. 다만 IE11 등 하위 버전의 브라우저에서는 사용할 수 없는 단점이 있습니다. 'padding'을 활용해 이와 비슷한 비율을 유지하는 기능을 구현할 수 있습니다. 이는 IE11 등의 하위 브라우저에서도 구현이 가능합니다. CSS 랜더링 방식을 일종의 해킹하여 구현한 이 방식은 하위 브라우저를 호환하기 위한 작업 외에도 필요한 경우 특정 비율을 유지하도록 하는 스타일을 구현하는 용도로 활용이 가능합니다. 비율 유지가 주로 많이 쓰이는 용도는 썸네일의 비율을 유지시키는 데에 사용됩니다. 이 때에는 또 하나의 모던 스펙 중 하나인 'object-fit'을 하위 브라우저 대응하여 구현하는 데..
피그마(Figma) 아이콘 다운로드 무료 플러그인(Plugin) ‘아이코니파이(Iconify)’ 피그마(Figma)는 다양한 아이콘을 무료로 다운받을 수 있는 플러그인을 제공해 줍니다. 그 중 유료로 제공되는 것들도 있는 반면, 무료로 제공되는 것들 중에도 높은 기능성을 통해 실제 업무에 활용하기 충분한 성능을 보여 주는 플러그인도 많습니다. 그 중 가장 오래된 피그마 플러그인이자 또 가장 많이 다운로드된 플러그인 중 하나인 ‘아이코니파이(Iconify)’를 간단한 활용법과 함께 소개해 드리고자 합니다. 아이코니파이 (Iconify) 쉬운 검색 및 아이콘 세트별 분류 쉽게 키워드만으로 원하는 아이콘을 검색 가능하며, 특히 아이콘 세트별로 분류가 되어 있어, 원하는 아이콘 스타일을 일관되게 적용할 수 있습니다. 무료이자 오픈소스 라이선스 무엇보다 무료로 매우 양질의 아이콘들을 종합, 검색할 수 있는 ..
forEach() IE 11 호환 오류 문제 대응하기 ‘forEach()’는 IE 11에 ‘fully supported’ 되는 메소드로 기재가 되어 있습니다. 다만 ‘querySelectorAll’로 여러 요소를 선택하는 경우 정상적으로 작동을 하지 않습니다. 그 이유는 ‘querySelectorAll’은 ‘NodeList’를 반환하며, ES5에서 ‘forEach()’는 ‘Array’에만 작동하도록 되어 있기 때문입니다. ‘NodeList’는 ES6부터 적용 대상으로 포함이 됩니다. 이 이슈는 ‘babel’로 ‘IE 11’을 타겟으로 잡고 트랜스파일링을 진행해도 수정이 되지 않습니다. ‘NodeList’ 등 배열이 아닌 요소를 대상으로 ‘forEach()’를 적용하기 위해서는 해당 요소들을 배열화하여 활용해 줘야 합니다. var alltable = docu..
세종 나성동 라운지46 (Sejong Naseong-dong Lounge46) 세종 나성동 메타45 위에 있는 와인바. 기본적으로 와인바이나 식사가 가능한 음식을 일부 판매합니다. 뷰 장사를 하는 곳이기에 가격이 비싼 것은 각오를 해야 하고, 술집이기까지 해서 사실 음식 맛은 기대 안 했지만 의외로 뭔가 편하게 먹기 좋은 맛을 보여 주었습니다.. 기본적으로 뷰와 분위기를 즐기러 가는 곳이기는 하다. 커피도 마실 수 있으나, 그런 경우 한 시간 이상 공간 내에 머무를 수 없습니다. 음식 소고기 스테이크를 6만원에 팔긴 합니다. 함박 스테이크와 볶음밥, 감바스를 먹었는데 나쁘지 않았습니다. 와인은 종류가 다양한데 꽤 비싼 가격대에 판매합니다. 공간 주차가 쉽고, 46층 주상복합 아파트 펜트하우스를 상업공간으로 만든 느낌이 듭니다. 통창과 테라스 뷰가 정말 좋습니다. 3면의 뷰 감상이..
로지텍 K380 (Logitech K380) 기본정보 일반 사무용 보급형 키보드의 '최광자'로 자리를 잡은 것으로 알고 있는 아는 사람은 아는 명기 키보드 가격은 3만원 대이며 3개 기기와의 멀티 페어링을 지원하는 블루투스 무선 키보드 기능성 펜타그래프 방식으로 슬림한 폼팩터와 일반 노트북의 뭔가 촐싹 거리는 키감을 제공. 싸구려 느낌이 아니고, 적한 키감과 반발력을 지녀 경쾌한 느낌을 주는 키보드인 것으로 보임 블루토스 연결성 좋음 무게 또한 가벼워 휴대에 굉장히 유리 효용성 가성비 갑이며 이건 중고매물도 많아, 가끔식 중고마켓에서 매우 싼 가격에 취득 가능 심미성 원형 모양의 키로 인해 유니크한 스타일 연출 가능하나, 문자 표시 공간이 적어져 각인이 다소 혼잡 다양한 컬러를 선택 가능하게 하는 점은 개인 개성 반영이 가능하게 함 ..
로지텍 MX Keys (Logitech MX Keys) 기본정보 로지텍의 사무용 하이엔드 제품 라인업인 MX 시리즈의 키보드 출시 제품입니다. MX Master 마우스를 1부터 오랫동안 써 왔던 터라 세트 아이템을 맞추고 싶은 마음이 커, 출시되자마자 주문을 해서 사용했습니다. 펜타그래프 방식을 채용하고 있어, 노트북의 키보드 경험과 상당히 유사합니다. 가격은 10만원 이상의 일반 사무용 키보드 대비 높은 가격대를 보이나, 전문가용 키보드군과 비교할 때는 적정 가격대를 유지한다고 볼 수도 있습니다. 기능성 완성도 높은 노트북 느낌의 키보드 역할을 매우 잘 수행 블루토스 연결성 좋음 로지텍 제공 소프트웨어를 통해 디바이스간 연결성 확보 가능하나, 맥의 경우 사이드카나 유니버셜컨트롤이 더욱 안정적임 효용성 가격이 비싼 편이나 일반 기계식이 아닌 라인업 중에서는 ..
대전 유성온천역 청주해장국 (Daejeon Yuseong Hot Spring Station Cheongju Haejangguk) 유성온천역 계룡스파텔 근처에 위치한 곳으로, 유성 관공 부흥기(?)에 속풀이 처로 많은 사랑을 받았던 장소인 것으로 보입니다. 현재는 밤 12시까지만 운영합니다. 청주해장국 자체는 프렌차이즈로 알고 있고, 대전 안에서는 지점이 꽤 자주 보이는 편입니다. 음식 손님 주요 주문 메뉴를 보면 뼈 해장국과 소고기 해장국이 주력인 것으로 보입니다. 마늘도 많이 넣고, 전반적으로 매운 편에 속합니다. 김치맛 모두 좋고, 사이드로 시킨 만두의 맛도 좋습니다. 다만 다진마늘을 엄청나게 많이 넣는 것을 볼 수 있는데, 위장 자극에 취약한 분들은 조심하시기 바랍니다. 공간 주변에 호텔도 많고, 리조트 옆이라 좀 관광지 온 것 같은 느낌이 들기도 합니다. 속풀이를 하러 오거나, 1~2인 손님도 많고, 전반적으로 왁지지껄..
웹페이지에서 focus(포커스)가 어디에 있는지 확인하기 tabindex 를 활용하거나, 포커스의 이동 경로를 설정하는 등의 스크립트를 실행한 경우, 현재 포커스가 어디에 가 있는지 확인하기가 어려울 때가 있습니다. 이럴 때에 브라우저 콘솔창을 통해 간단하게 현재 포커스가 어디 있는지 확인할 수 있습니다. 크롬 또는 개발자 도구를 지원하는 브라우저를 실행한 후 개발자 도구에 들어가 콘솔창에 다음과 커맨드를 통해 현재 포커스의 위치 확인이 가능합니다. console.log(document.activeElement); 포커스의 위치 확인 용도 뿐 아니라 필요한 경우 DOM 또는 스타일을 제어하는 자바스크립트 코드 생성 시에도 활용이 될 수 있을 것으로 보입니다.
외주문의

티스토리툴바