본문 바로가기

분류 전체보기266

vue.js 공식 스타일 가이드 최근 vue.js를 사용하다보면서 파일 이름 형식에 대해 많은 궁금증이 생겼다.그런데 물어볼 곳이 없어서 vue.js 커뮤니티에 질문한 결과 아래와 같은 vue.js 팀의 공식 문서가 있었다.나와같은 궁금증을 가진 사람은 참고하길 바란다. https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended 2018. 2. 22.
bootstrap3 이상 버전에서 주의할점 bootstrap3 이상 버전에서는 더이상 그리드시스템에서 float 기능을 자동으로 제공하지 않는다.즉 두 div에 col-md-6을 써도 서로 붙지 않는다는 점이다.처음에 내가 잘못했나 하고 한참을 찾았는데,찾아보니 3버전에서는 float: left 속성를 기본으로 제공하고 있지 않음을 알게되었다. 2018. 2. 12.
jquery에서 contains 함수 jquery에서 키에 따라서 결과를 렌더링할때 쓰는 함수중에 contains라는것이 있다.해당 함수는 하위노드에 특정값을 포함하고 있을때 이벤트가 발생하게 된다.이 함수를 통해 쉽게 글자에 따라 결과가 가려지고 보여지는 기능을 구현할 수 있다.본 함수의 자세한 설명을 보고 싶다면 아래의 링크를 참고하면 된다. https://api.jquery.com/contains-selector/ 그나저나 최근에 규모있는 프로그램을 Node.js 및 jquery로 짜고 있는데,최신 프론트엔드 프레임워크로 앱 컴포넌트화를 하는것의 필요성을 느끼고 있다.(역시 사람은 겪어봐야 이게 왜 탄생하게 되었는지를 아는거 같다.ㅅ.) 2018. 2. 7.
masonry 라이브러리 잘 사용하기 최근 masonry 때문에 정말 많은 고민을 하였다.좋은 라이브러리이긴 하지만 제대로 설정을 안 잡아주면 여러가지고 허점이 많은 라이브러리이기도 하다.특히나 이번에 고민했던것은 콘텐츠를 반응형 그리드 형식으로 출력하는 부분이었는데,아래의 링크를 통해서 영감을 얻어 원했던 완벽한 masonry를 구현할 수 있었다.쉽고 완벽하게 구현하기 위해서 bootstrap의 컬럼 class도 써 주었다. https://codepen.io/Axiol/pen/yzhGF?q=responsive%20masonry&order=popularity&depth=everything&show_forks=false 반응형이 될뿐더러 컨텐츠의 width나 height의 길이가 서로 달라도 빈틈이 생기지 않고 잘 표시해 준다. 2018. 2. 1.
image drag 방지 -webkit-user-drag: none; 이라는 속성을 쓰면 이미지 드래그를 방지할 수 있다. 2018. 1. 31.
box-sizing 속성의 중요성 bootstrap을 참조하면 일반적으로 대부분의 div에 box-sizing 속성이 잡혀있다.예전에는 몰랐는데, 해당 속성이 css 코드에 있어서 많이 중요하다는 것을 알게되었다.본 속성은 div의 padding 값을 고려하여 DOM 속성에 width 값을 정해준다.자세한 설명은 아래의 링크를 참조하면 된다. https://www.w3schools.com/cssref/css3_pr_box-sizing.asp 본 속성을 설저 안하고 padding에 감싸져 있는 태그에 width 100%값을 준다면,해당 태그가 감싸진 태그의 범위를 넘어서게 된다. 2018. 1. 31.
부모 영역의 이벤트를 자식에게 전달 최근 CSS3에서 만약 부모의 DOM에 이벤트가 발생했을때 자식의 스타일을 바꾸어줄수 있는지 찾아보았다.왠걸 정말 방법이 존재했다..(정말 좋아졌구나..ㅅ..) https://stackoverflow.com/questions/7217244/style-child-element-when-hover-on-parent/7217397 그냥 간단히 hover 다음에 바꾸어줄 자식 dom을 적으면 된다. 2018. 1. 29.
submit 이벤트 지금까지 자주 login 페이지에서의 submit 이벤트를 click으로 했었다.하지만 이렇게 되면 타당성 검사도 못하지 엔터를 쳤을때 바로 이벤트 실행도 못한다.지금까지 왜 이랬는지 모르겠지만,html5의 여러가지 기능혜택을 맛보고 싶다면 로그인페이지의 이벤트는 submit으로 하길 바란다. 2018. 1. 27.
input password 형식 맞추기 html5를 거치고 많은 것이 좋아졌다.이전에는 password validation을 하려면 javascripts 및 서버에서까지 검사를 해야될게 많았는데,최근 패스워드를 html validation 할 수 있는지 찾아보니,아래의 링크와 같이 예제가 존재하고 있다. (굿) https://www.w3schools.com/howto/howto_js_password_validation.asp https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_password_val 로그인 시스템을 구현할 사람이라면 참고하길 바란다. 정규식 표현이 궁금한 사람은 아래의 링크를 참고 바란다. http://www.rubular.com/r/Drwq39CvTi 그외 passwo.. 2018. 1. 27.

티스토리툴바