하니's Life Logging

Recent Posts

Recent Comments

보여줄 댓글이 없습니다.

Archives

Categories

[태그:] javascript

% 로 width 를 지정한 textarea의 scroller가 border를 가리는 문제

테스트 환경 Chrome on Mac OS 이슈 내용 width right border x.5px 안보임 xpx 보임 현재 상태 영역 css left width: calc(50% – 8px); right width: calc(50% + 8px); 문제 원인 추측 문제 해결 구글링으로 동일 이슈를 찾았다. 링크 해결책으로 width: calc(50% - .5px); 찾음 ..

IE에서 multiline elipsis 처리하기

작성일자 : 2019-03-06 multiline ellisis 1. chrome 기준으로, css로 multiline ellipsis 처리, ie 에서는 ellipsis 처리가 되지 않음. See the Pen multiline-ellipsis css by zuhern (@zuhern) on CodePen. 2. css로 처리하는 방법을 찾음 See the Pen multiline-ellipsis css (fake ellipsis for ie) by zuhern (@zuhern) on CodePen. 원리 단점 3. 결론 ie 에서 css 만으로는
Read More

[firebase] javascript query

작성일자 : 2019-03-12 firebase query 예제 add 1. ref.push(data) 랜덤 키 생성하면서 데이터 저장The keys are also designed to be unguessable (they contain 72 random bits of entropy) 2. ref.child(key).set(data) 지정한 키로 데이터 저장 참조 firebase Doc

[javascript] element 내 text를 클립보드로 복사하기

작성일자 : 2019-03-12 목표: object data를 예쁘게 보이게 하고 내용을 복사하기 object 로 데이터를 말아놨는데,파일 다운로드 보다는 버튼 클릭으로 복사하는 방식이 간단하지 않을까 생각했디. textarea에 바로 넣으면 [object Object] 로 표시되더라JSON.stringify(data)로 변경해서 넣으면 줄바꿈이 안됌 <pre></pre> 안에 object를 bind (vue 사용) 하면 줄바꿈이 예쁘게 됌 이제, 복사를 하려고 검색한 내용. 하지만 나는 pre 안에 있는
Read More

[gatsby] tags menu 만들기

작성일자 : 2019-09-09 gatsby tags page 만들기 1. blog markdown에 tags 항목 넣기 2. graphQL 테스트 하기 3. tags/{tag} 에 쓰일 template 생성 tag list 에서 tag 를 클릭했을 때 보이는 리스트의 template 이다.해당 태그를 담고 있는 blog post 리스트이다. 기존 리스트의 template 가져와서 데이터에 맞게 수정해도 된다. 4. gatsby-node.js 에 tagTemplate 으로 만들 페이지를
Read More

[javascript] list 순서변경 예제 코드

작성일자 : 2019-03-19 list 순서변경 예제 코드 splice 는 자기 자신을 update 하면서 제거된 item 를 리턴하는 함수다. (mutable)이 점을 활용하여 list 순서를 바꾸면 좀 더 간편한 것 같다.

ie 에서 focus() 호출시 커서가 맨 앞에 위치하는 문제 해결

작성일자 : 2019-03-20 ie 에서 draggable 안에 있는 text input cursor가 한번에 잡히지 않아서 쓴 코드 ie 에서 focus 대신 select 을 써보자 focus() 하면 커서가 맨 앞으로 가고select() 하면 block 선택이 된다. 차라리 이게 낫지 않은가?!ㅋㅋ 더 좋은 해결 책 수정 모드일 때는 draggable 을 제거한다.draggable=false 여도 작동한다는 점을 유의할 것

[html5] drag and drop

작성일자 : 2019-04-08 cross browser html5 drag and drop html5 drag and drop 문제점 해결 기록 1. drop 영역 인식 ul (drop)/ li (drag) 구조에서 ul 에 margin 값이 있을 경우drag and drop 동작할 때 browser 영역 drag and drop event chrome drag and drop ul margin/padding 은 ul의 영역 O dragOver chrome javascript ul
Read More