Study/JavaScript
-
초보자를 위한 자바스크립트로 프린트 기능 구현하기Study/JavaScript 2023. 3. 3. 15:42
현재 인사정보조회 관련 기능을 구현 하고 있는데, 고객사측 요구사항중 출력을 할 수 있게 출력 기능을 구현해 달라는 요구 사항이 있었음. 공부 겸 다른분께 도움이 되고자 정리를 하고자 함. 1.구현 방법 구현은 간단하다 자바스크립트로 window.print();를 사용 하면 된다. 나 같은 경우 아래 그림처럼 출력 이라는 버튼에 클릭이벤트를 발생시켜 window.print(); 함수를 작동하도록 구현 하였는데 구현방법은 아래와 같다. 1-1.출력 버튼에 이벤트 걸기 기본정보 출력 코드를 보면 printPage() 라는 onclick 이벤트를 걸어서 출력 버튼을 눌렀을때 아래에 있는 자바스크립트가 작동 하게 됨 function printPage(){ window.print(); } window.print(..
-
초보자를 위한 화살표로 메뉴펼치기 구현(화살표 모양 토글 구현)Study/JavaScript 2023. 3. 2. 23:46
현재 프로젝트를 구현 하는 부분중에 화살표 모양으로 왼쪽 메뉴바를 펼치는 부분을 구현 해야 되었음. 아래와 같이 구현 해야함. *메뉴펼치기전 *메뉴펼치기후 구현하는 방법에는 직접 화살표 아이콘을 사용하여 눌렀을때 화살표 아이콘을 바꿔줘도 되지만 나는 transform 속성 과 board 속성을 이용하여 구현 하였음 어떻게?? 1.html 부분 조직도 (1)영업부 (2)경영지원 특이할점은 없지만 클릭할 부분과 onclick에 의해 펼쳐졌다가 없어질 부분을 div로 구분해 놓아야 됨 id=arrow 로 설정한 div가 화살표가 있는 부분 2.CSS 부분 #arrow{ position:relative; top:10px; width: 10px; height: 10px; border-top: 2px solid b..
-
초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기)Study/JavaScript 2023. 2. 12. 21:43
프로젝트를 하다보면 pc뿐만 아니라 mobile 또는 table등 여러 디바이스기기가 있는데, 모든 디바이스별로 크기를 고려하여 사이즈를 조절해야 되는 문제가 있을것이다. width는 단위를 %로 설정하면 되지만 hight, font-size...등 이 모든 사이즈를 일일히 조절하기엔 우리에겐 시간이 부족하다는것! 그래서 rem 이라는 단위가 나왔다! 1.설명 rem단위는 상대적 단위로 최상위태그인 html태그에 font-size를 지정 하면 지정한 사이즈가 기준이 되어 하위자식태그의 사이즈는 모두 rem단위를 계산하여 넣어주면 추후에 자바스크립트로 font-size만 바꿔주면서 디바이스별로 사이즈를 적용할 수 있다는것! 설명이 어렵다면 바로 예제 코드를 보자! 2.코드 전체화면 위에 설명에서 말했듯이 ..
-
초보자를 위한 캔버스(Canvas)로 그림 그리기 방법Study/JavaScript 2023. 2. 7. 18:14
캔버스(canvas)는 간단하게 소개하자면 웹에 도형을 표시하고싶거나 그림등...그래픽적인 기능이 필요할때 사용 하는 태그로 html5가 나오면서 같이 나온 기술이라고 한다. 프로젝트를 진행중 웹상에 그림을 그려야 되는 일이 있어 canvas기술을 익히는중 정리겸 올려본다. 1.html 부분 html코드에서는 canvas 태그를 설정하고 id는 자바스크립트 사용을 위해 지정 하고, class는 css적용을 위하여 지정한다. width와 height는 canvas의 사이즈를 지정 할 수 있는데, css에서도 지정 할수 있으나 렌더링 과정에서 css크기에 맞추기 위해 이미지의 크기를 조절하므로 최종 그래픽이 변형 될 수 있다. 그래서 html 코드에 직접 width와 height를 설정 하였다. 2.css ..
-
초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기)Study/JavaScript 2023. 1. 18. 15:55
웹사이트나 앱을 보면 메뉴창을 열고닫는 기능이 있다. 이 기능을 신입입장에서 기능을 쉽게 구현해 보겠다. 1.구현화면 위에 이미지는 내가 현재 구현한 메뉴 열고닫기 기능 또는 toggle창 기능인데 원리를 설명하자면 특정 버튼을 누르면 감춰져있던 div가 보이고 다시 특정버튼을 누르면 다시 div가 감춰지도록 하는데 이때 쓰이는 요소가 css의 요소중 display 를 이용하여 기능을 구현 할수 있다! 자세한 설명을 아래 코드를 보고 설명 하도록 한다. 2.코드설명 (1)html 코드 ASP 모바일 상담 서비스 *화면구성 설정 고객화면크게 상담사화면크게 고객만 직원만 *카메라 설정 전면카메라 후면카메라 *음성 설정 음성포함 음성제거 위에 코드는 이미지상의 상단부분만 발췌 하였는데 특정아이콘은 버튼요소로 ..
-
초보자를 위한 반응형 기초(화면크기별로 width설정 하기)Study/JavaScript 2023. 1. 7. 11:04
web으로 되어있는 페이지를 mobile버젼으로 만들어 달라는 업무지시를 받았고 현재 만들기 위해 시행 착오중에 발견한 지식에 대해서 공유하고자 포스팅한다. 내가 반응형 웹을 만들라고 했을때 옆에 동료가 width가 px로 고정으로 되어 있으니 %로 설정해야 디바이스 크기에 따라 줄어들고 늘어날수 있다고 알려 줬었다. 그래서 %적용하니 되긴 되는데,,,도대체 %를 설정 했을때 기준점을 모르겠다는것... 그래서 이것저것 실험을 해보니 "%를 설정하고자 하는 선택자의 상위부모선택자를 px로 고정값을 주고 그걸 기준으로 %로 변경" 이 되는거 같다! 아래 코드를 보고 설명하겠다. (1)html코드 ASP 모바일 상담 서비스 setting 영상걸기 영상통화 채팅 캡쳐보기 영상걸기화면1 영상통화화면2 채팅화면3 ..
-
자바스크립트로 탭 구현하기(신입버젼)Study/JavaScript 2023. 1. 6. 10:40
자바스크립트로 탭 메뉴를 구현할 일이 생겨 공부겸 포스팅 해본다. 우선은 저는 신입이고 프론트단은 해본적이 없어서 매우 기초적인 국비교육생 수준이니 신입 및 국비교육생이 포스팅의 대상이 될거 같다. 1.구현시 결과화면 2.코드 (1) html 코드 탭1 탭2 탭3 탭1 화면 입니다. 탭2 화면 입니다. 탭3 화면 입니다. (2) css 코드 ul.list { list-style-type: none; } .tab-button { display: inline-block; } .active { background-color: aqua; } .tab-content { display: none; padding: 10px; } .show { display: block; } (3)JavaScript 코드 consol..
-
모바일과 pc 디바이스 자바스크립트로 구분하는 쉬운방법Study/JavaScript 2023. 1. 6. 10:15
업무를 하다보니 pc버젼과 mobile버젼을 나눠야 되는 일이 생김 그래서 이것저것 알아보다가 제가 찾아본 방법중에 신입이 쉽게 자바스크립트로 구현할 수 있는 방법을 찾아서 공유함. navigator.userAgent 는 자바스크립트 내장함수로 개발자모드로 Console창에 입력하면 아래와 같이 현재 디바이스의 정보를 보여준다. navigator.userAgent를 user에 담아서 indexOf("iPhone" 또는 "Android") 함수를 통하여 괄호안에 있는 단어를 찾으면 index숫자를 반환하고 없으면 -1을 반환한다.