choisiel의블로그

timepicker 시간 선택기 구현. 안드로이드 알람앱과 비슷한 timepicker 기능 구현하고자 한다. 오전/오후, 시간부분을 슬라이드로 구현하고자하니, 마땅히 적용할 라이브러리가 없어서 swiper.js 를 사용하여 슬라이드 적용 후 나머지는 jqeury와 js 로 처리를 하였다. 자세한 코드는 아래 codepen 참고하시길. https://codepen.io/choiyoungjun90/pen/LYyYdaj timepicker with swiper.js ... codepen.io

웹 개발중에 css 작업해주신 분이 토글 버튼을 이미지로 주셨다.. 그럴수 있지.. 재 작업 고고~ 아래와 같은 형식의 토글 버튼을 작업을 하려한다. 토글버튼 부분을 클릭할 때 input이 checked 인지 확인하고 addClass, removeClass 를 통해 구현하였다. 자세한 코드는 아래 코드펜 링크를 봐주길.. https://codepen.io/choiyoungjun90/pen/qBmWzZa toggle_btn with jquery ... codepen.io

작업 중 chorme 브라우저에서 padding 값을 다르게 설정하고자 하였다. 자연스럽게 -webkit-padding-left : 100px을 지정하니 css가 먹히지 않았다.. 구글링을 통해서 검색하니 padding-left 를 -webkit-padding-start로 지정해야 한다고 한다. 까먹지 않게 기록해두자~ -webkit-margin-before (margin-top) -webkit-margin-end (margin-right) -webkit-margin-after (margin-bottom) -webkit-margin-start (margin-left) -webkit-padding-before (padding-top) -webkit-padding-end (padding-right) -web..

각각의 브라우저들은 서로 다른 렌더링 방식을 가지고 있어서 같은 css 로도 서로 다르게 보이게 됩니다. 이를 방지하기 위해 각 엘리먼트들을 초기화한 후 작업을 진행하면 됩니다. 아래는 제가 사용하는 css 디폴트 소스입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /* css reset*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,..

HTML을 처음 시작하시면 '무료'이며, 웹개발에 최적화된 Visual Studio Code 편집기를 추천합니다. www.visualstudio.com/ 로 접속하면 비주얼 스튜디오 제품군 중 Visual Studio Code [Window용 Code 다운로드]를 클릭하셔서 파일이 다운로드, 파일설치 성공적으로 설치가 되시면 다음과 같이 Visual Studio Code 의 화면이 뜨실겁니다. 위의 사진처럼 구동이 되셨다면, 간단한 HTML 문서를 작성하여 문서 구조가 어떻게 생겼는지 살펴보겠습니다. doctype html> 처음 시작하는 HTML Hello World 처음 시작하는 html 코드 테스트 코드 테스트 123 다음과 같이 Visual Studio Code에서 작성하시거나, 복사하신 후 Ct..