본문 바로가기

전체 글266

vue.js에서 jquery를 사용하는 방법 아래의 링크에 설명이 잘 되어 있다. https://lovemewithoutall.github.io/it/install-bootstrap-for-vue/ 2018. 5. 11.
input 박스 invalid 이벤트 최근에 form 내의 input 값들의 타당성 검증을 하던도중 디자인 문제에 직면하였다.html5에서는 타당하지 않은 값일 경우 자동으로 스크롤바를 하여서 해당 input 필드로 이동하는데,이 과정에서 내 사이트의 헤더가 position: fixed로 설정이 되어있어서 해당 input 필드를 덮어씌우는 현상이 발생하였다.작은 문제이지만 구글링 해본결과 이러한 문제로 실제 고민하던 사람이 있었다.아래는 그와 관련된 질문 링크이다. https://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit?utm_medium=organic&utm_source=google_rich_qa&u.. 2018. 5. 10.
css flex 속성에 관하여 아래의 두 링크에 flex 속성에 대한 자세한 설명이 있다. https://www.vobour.com/1-flexbox-%EC%9D%B4%ED%95%B4-%EB%8B%B9%EC%8B%A0%EC%9D%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%EB%AA%A8%EB%93%A0-%EA%B2%83-understa http://gnoownow10.cafe24.com/assets/html/flexbox.html 2018. 5. 9.
background-image 에서 해당 이미지가 없을때 대처방법 아래의 링크에 그 방법이 잘 나와있다. https://stackoverflow.com/questions/22287474/onerror-event-using-background-url?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa 2018. 5. 1.
form reset 하는법 아래의 링크에 자세한 설명이 나와있다. https://mytory.net/archives/365 2018. 5. 1.
5일동안 아마존 아키텍쳐 교육을 갔다왔다. 아마존 에센셜 교육 및 아키텍쳐 교육을 갔다왔다.현재 진행하는 서비스를 위해 들었는데,결론적으로 느낀건 아마존 자체가 마치 레고블럭처럼 정교하고 세밀한 서비스를 제공한다는 말이다.대신 그만큼 사용자의 학습 부담도 커지긴 하지만 이러한 아키텍쳐 교육을 받아두는 것은 나중에 서버 개발자들간의 소통에 있어서도 도움이 될거 같다.여튼 서버 아키텍쳐와 전혀 관련없을뻔 했던 나는 이렇게 아마존 서버를 설계할 수 있게 되었다.나중에 시간이 된다면 아마존 아키텍쳐에 관련한 이야기도 올리고 싶다.(물론 시간이 된다면 ㅎㅎ) 2018. 4. 10.
masonry에 대한 견해 이전에 salvattore.js를 써서 완벽한 masonry를 구현할 수 있다고 말했다.하지만 최근 salvattore.js를 다양하게 써보면서 salvattore.js가 꼭 정답이 아님을 깨닫고 있다. 일반적으로 모든 박스의 가로 길이가 동일할 경우 salvattore.js는 큰 완벽성과 효율성을 보인다.특히나 박스내에 콘텐츠가 동적으로 추가 된다고 하여도 다른 라이브러리처럼 위치가 깨지지 않을까 걱정하지 않아도 되고,시덥잖은 애니메이션 기능도 없기에 매우 렌더링 속도가 빠르다. 하지만 salvattore.js도 다양한 가로길이의 박스를 다룰 경우에 매우 취약함을 알았다.물론 이전에 실험 안해본건 아니지만 결과적으로 css float: left 속성을 적용한 것과 그 결과가 별반 다르지 않다.즉, 박스.. 2018. 4. 10.
로딩바 구현 로딩바를 지금까지는 absolute 방식을 써서 만들었는데,찾아보니 fix 방식을 쓰는것이 훨씬 깔끔하고 쉬웠다.아래의 링크는 내가 깔끔한 로딩바를 구현하기 위해 참조한 링크이다. https://codepen.io/MattIn4D/pen/LiKFC 결론적으로 내 코드는 아래와 같다. * html 부분 * css 부분 #loading { position: fixed; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 7000;} #loading:before { content: ''; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color.. 2018. 4. 7.
tinymce 사용기 다들 tinymce를 사용한 경험이 있는지 모르겠다.아래는 공식사이트 링크이다. https://www.tinymce.com 한마디로 말하면, 쓰기좋은 웹 에디터이다.다른 웹 에디터보다 역사도 오래 되었다.지금까지 꾸준히 업데이트 되는 것도 좋은거 같다. 여튼 최근에 해당 라이브러리를 사용하여서 에디터 입력을 받고 서버에 저장해야 할 일이 생겼다.예제가 잘 나와있기에 자세한 사항은 해당 홈페이지의 예제를 참고하면 된다. 문제는 에디터에 이미지가 들어갈때였다.인터페이스 딴에는 간단한거 같아도 이미지 하나 들어가면 그걸 서버에 저장하고 다시 뿌려주는것부터 복잡한 과정이 있다.다행이도 그에 관한 자세한 설명이 아래의 링크에 있었다. https://stackoverflow.com/questions/47757838.. 2018. 3. 28.

티스토리툴바