본문 바로가기
728x90
반응형

분류 전체보기158

직장인 손목터널증후군 조심! 버티컬 마우스 사용 후기 - 아이리버 버티컬 마우스 사무직에게 거북목과 손목터널증후군은 숙명인 것인가. 최근 몇달간 일할 때 손목이 아팠고 요즘엔 집에서 아무것도 안하고있어도 시큰거렸다. 주변 직장인 친구들에게 물었더니 버티컬 마우스를 추천해줬다. 전에 버티컬 마우스 쓰는 동료를 보고 신기하다 저렇게 생긴걸 어떻게 쓰지? 저게 손목에 정말 편한가 의구심이 들었지만 아무튼 손목이 아프니 사보기로한다. 내가 산 제품은 아이리버 인체공학 블루투스 겸용 무소음 무선 버티컬 마우스 EQwear-EV3 블랙 이라고 함 버티컬 마우스 1도 모르는데 네이버 검색해서 랭킹순으로 적당한 가격대에서 골랐다. 3만원쯤 했다. 그리고 아무래도 버티컬마우스는 손 크기에 맞는게 중요해서 잘 살펴봐야한다. 전에 한번 동료 버티컬 마우스 손대봤는데 어려워서 제대로 쓰질못했던 기억때문에.. 2022. 8. 1.
[React] 리액트로 Three.js 작업하기 기본 (3D 박스 구현) 내가 까먹을까봐 쓰는 Three.js 리액트 작업 순서 VSCODE 실행하고 터미널을 열어 npx create-react-app my-app 리액트 프로젝트를 설치한다. (my-app 부분을 내 프로젝트 이름으로 대체) 나는 대충 문서 폴더에 threejs라는 프로젝트를 생성했다. cd 프로젝트명 명령어를 통해 프로젝트 폴더로 이동해준다. 터미널에 npm start를 입력해 로컬 서버를 켠다. 익숙한 리액트 로고 등장 작업 준비완 이제 리액트로 three를 설치하면 된다. https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js 작업에 필수적인 document. 설치법이 나와있다. 아래의 명령어들로 THREE와 THR.. 2022. 7. 25.
[Javascript] THREE.JS 3D 정육면체에 여러 이미지 적용하기 (textureLoader) 완성본 요새 THREE.JS의 사용법을 익히고 있다. 나는 3D 오브젝트를 소환하고 간단한 환경 수정 정도만 할 수 있는 초보인데 한가지 이미지의 텍스쳐가 아닌 정육면체를 6가지 이미지로 맵핑(+컨트롤 가능)을 하라는 미션이 떨어졌다. 직장인은 안되도 되게 해야한다. three.js의 예제를 뒤져보자 https://threejs.org/examples/#webgl_geometry_cube 그나마 비슷한 샘플을 찾았다. 하지만 한 개의 나무 이미지 텍스쳐만 쓰였다는 것을 육안으로 그리고 코드로 알 수 있다. ..이게 아냐 구글링 갈겨~~~ 출처: https://r105.threejsfundamentals.org/threejs/lessons/threejs-textures.html 발견! three.js 예제.. 2022. 7. 22.
[HTML/CSS] 테이블 thead에 border-radius 들어간 CSS 적용하기 테이블에 border-radius가 들어간 디자인 시안을 받으면 아주 킹받습니다. 테이블에는 CSS 적용에 제한이 있기때문이죠 대충 예를 들면 아래와 같은 디자인은 보기에 아주 쉬워보이지만 THEAD에는 border-radius가 적용되지 않아 좀 번거롭습니다. thead에 border-radius값을 주면 이렇게 아무런 변화가 없습니다. table 태그 자체에 border-radius를 주게 되면 이렇게 말그대로 테이블 전체가 둥글어집니다. thead에만 border-radius 디자인을 적용하려면, 가상요소 속성을 사용하는 방법이 있습니다. See the Pen round thead by nah (@wimmwell) on CodePen. 정리하면 thead에 position:relative; 를 주고.. 2022. 7. 20.
웹퍼블리셔입니다 3월에 블로그 개설할때에는 웹디자이너였는데 대표님과 면담을 통해 웹퍼블리셔로 전향하게되었다. 퍼블리셔로 일한지 두세달이 되어가는 초보 퍼블리셔의 우당탕탕 코딩 성장기 2022. 7. 20.
[Javascript] 간단한 데이터 필터링 탭 메뉴 (forEach, dataset) 전체 1번 3번 4번 2번 1번 2번 4번 2번 2번 3번 위의 탭 메뉴 기능은 아래의 HTML과 자바스크립트를 이용하여 구현할 수 있다. 단순히 탭이 아니고 데이터 필터를 이용하여 data-type을 읽어 데이터를 구분하기 때문에 유동적이고 많은 양의 데이터를 분류별로 표시하기에 좋은 코드이다. 아카이브용으로 정말 대충 작성함주의 See the Pen Tab menu by nah (@wimmwell) on CodePen. 내가 만든 것이 아니고 공부 중에 알게 된 코드이다. 나중에 사용하기 위한 아카이빙 2022. 7. 14.
[javascript] 체크박스 클릭으로 selectbox의 disabled 속성 추가/제거하기 input 체크박스를 체크/해제시 selectbox의 disabled 속성이 토글되는 코드이다.체크박스 체크 여부를 확인하는 속성은셀렉터.checked /* 240711 본문 수정*/jQuery -> javascript disabled 속성 제거하기: removeAttribute('disabled');disabled 속성을 disabled로 설정: setAttribute('disabled', 'disabled'); 코드펜 예제 See the Pen Undisable selectbox o checkbox click by sel (@wimmwell) on CodePen.+jQuery에서는disabled 속성 제거하기: removeAttr('disabled');disabled 속성을 disabled로 설정:.. 2022. 4. 25.
무료 datepicker 소스 Air-datepicker 한국어로 바꾸는 방법 MIT라이센스인 날짜 선택 air-datepicker는 간편하게 쓰기 좋은 소스인데 기본 언어가 러시아이고 한국어 로컬 파일을 지원하지않는다. air-datepicker.js 파일의 locale 부분을 수정하면 원하는대로 달력을 커스텀할 수 있다. locale:{days:["일요일","월요일","화요일","수요일","목요일","금요일","토요일"],daysShort:["일","월","화","수","목","금","토"],daysMin:["S","M","T","W","T","F","S"],months:["1월","2월","3월","4월","5월","6월","7월","8월","9월","10월","11월","12월"],monthsShort:["1","2","3","4","5","6","7","8","9","10.. 2022. 4. 14.
유용한 MIT라이센스 무료 아이콘 라이브러리 모음 1. Feather icons 사이즈와 두께, 색상을 커스터마이즈 가능하다는 장점이 있다. 웹 다크모드도 지원한다. https://feathericons.com/ Feather – Simply beautiful open source icons Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability. feathericons.com 2. Heroicon 라인아이콘/솔리드아이콘이 나뉘어있어서 보기 편하다. https://heroicons.com/ Heroicons Beautiful.. 2022. 4. 2.
728x90
반응형

티스토리툴바