분류 전체보기102 간단히 사용할 스티커 메모를 만들어보자! 자주 가는 예제 사이트를 보다가 자바스크립트를 사용하여 스티커 메모를 만든 예제를 보았다. 업무 할 때 유용하게 사용 될 것 같아 따라서 코딩을 해봤다! 메모를 입력할 수 있는 div를 클릭하면 텍스트를 넣고 엔터키를 누를경우 새로운 div가 추가되게끔 appendChild 메소드를 활용했다. 자바스크립트 코드는 다음과 같다. let createBox = document.getElementsByClassName('createbox')[0]; let notes = document.getElementsByClassName('notes')[0]; let input = document.getElementById('input_memo'); let i = 0; createBox.addEventListener('ke.. 2023. 7. 12. [CSS] 텍스트 세로 쓰기 방법 기본적으로 텍스트는 가로 방향으로 작성된다. 가끔 디자인 나온 걸 보면 텍스트가 세로로 보여지는 경우도 있는데 이 경우 CSS로 텍스트의 방향을 지정할 수 있다. 텍스트 세로 쓰기는 write-mode 속성을 사용하면 된다. write-mode: horizontal-tb; 기본값 write-mode: horizontal-rl; write-mode: horizontal-lr; rl은 right to left, lr은 left to right 를 의미한다. 영문과 숫자의 경우 세로로 유지하려면 text-orientation 속성을 넣어주면 된다. text-orientation: mixed; 기본값 text-orientation: upright; 모든 문자 세로 입력 text-orientation:.. 2023. 7. 12. [CSS] 브라우저 폰트 사이즈 10px 이하로 줄이기 크롬 외 일부 브라우저는 브라우저 설정으로 최소 폰트 사이즈를 지정하고 있다. 보통 10px이 최소 사이즈인데 이보다 더 줄이고 싶다면? 10px 을 주고 zoom:0.8; 하면 0.8배 축소시켜 8px로 보여지게 한다. 더 크게 하려면 배수로 지정하면 된다! (1.2, 2, 2.2 등) 적당한 폰트 사이즈를 유지하는 게 가독성에 좋으니 참고만 하자! 2023. 2. 27. 프로그레스바(progressbar) css, 제이쿼리로 텍스트 옮기기 erp 구축 업무를 맡고 있다. 아이프레임으로 차트를 불러오곤 하는데 간혹 전년 대비 매출 추이를 비교 할 때, 프로그레스바를 사용하여 퍼센트를 직관적으로 보여줘야 하는 상황이 생겼다. 프로그레스바 css 는 간단한데 각 분야별로 비율이 다르기 때문에 개발자가 id를 이용하여 %를 제어할 수 있도록 구조를 짜야 한다. 브라우저가 줄어들었을 때 텍스트(%)가 프로그레스바의 오른쪽으로 이동하게 되는 스크립트를 사용했다. 제이쿼리를 사용하여 엘리먼트의 높이(height)와 너비(width)를 구할 수 있다. 높이(height) 측정하는 방법 $('요소).height(); 내부높이 $('요소).innerHeight(); 내부높이 + padding $('요소).outerHeight(); 내부높이 + padding.. 2023. 1. 18. [제이쿼리] 갤러리 탭 메뉴, 필터 기능 구현 제이쿼리를 이용하여 탭메뉴를 구현해보자. 탭메뉴는 유용하게 쓰는 UI 중 하나인데, 카테고리를 클릭하면 해당 카테고리에 속한 사진 등 내용을 확인 할 수 있는 일종의 필터 형식으로 구현해봤다. 먼저 모든 카테고리인 all에 active 해주고, 클릭 시 마다 컨텐츠와 버튼에 active를 넣고 빼주면 된다. $(document).ready(function() { var tab_btn = $('.tab_btn > ul > li'); var tab_cont = $('.tab_content > ul'); tab_cont.hide().eq(0).show(); // 첫번째 컨텐츠 영역 보이기 tab_btn.click(function(e) { e.preventDefault(); var target = $(this).. 2023. 1. 4. 체크박스를 이용한 다크모드 구현(토글 스위치 사용) 토글스위치 ui는 를 이용한다. input의 id와 값을 맞춰주는 것을 잊지 말자! 자세한 코드는 코드펜을 참고하시길~ See the Pen menu checkbox toggle, darkmode by kki (@kimki) on CodePen. 2023. 1. 3. 이전 1 2 3 4 ··· 17 다음 728x90
