분류 전체보기
-
초보자를 위한 반응형페이지 만들기(디바이스 별로 다른 사이즈 적용하기)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 ..
-
비전공자 30대 중반 여자가 어떻게 개발자로 취업 했지?(1)사는 이야기 2023. 1. 29. 20:49
제목에 소개 했듯이 저는 30대중반의 비전공자 학원출신 여자 신입 개발자 입니다. 저를 소개한 단어에서 볼수 있듯이 저는 신입으로 취업하기에 모든 악조건을 갖췄습니다. 전직을 할지말지 무수한 고민이 있었지만 그래도 어찌저찌 취직해서 다니고 있습니다 :) 여튼,,,저 처럼 전직을 고민 하시거나 나이가 많은데...난 여자인데...하시는 분에게 도움이 되고자 몇자 적어봅니다. Part1.전직할까?말까? 먼저 제 글을 보고계시다면 궁금해서 보고 계실수도 있지만 저처럼 -비전공자 출신 -다른 직무로 경력을 쌓아온분 대상이 되지 않을까 싶네요... 먼저 전직 쉽지 않다는 사실은 알았으면 좋겠습니다. 인스타, 유튜브 등등 학원에서 나오는 광고처럼 개발자가 되면 연봉도 많이 받고 좋은 사무실환경에 평등한 회사분위기와 ..
-
초보자를 위한 메뉴 열고 닫기 만들기(Toggle 창 만들기)Study/JavaScript 2023. 1. 18. 15:55
웹사이트나 앱을 보면 메뉴창을 열고닫는 기능이 있다. 이 기능을 신입입장에서 기능을 쉽게 구현해 보겠다. 1.구현화면 위에 이미지는 내가 현재 구현한 메뉴 열고닫기 기능 또는 toggle창 기능인데 원리를 설명하자면 특정 버튼을 누르면 감춰져있던 div가 보이고 다시 특정버튼을 누르면 다시 div가 감춰지도록 하는데 이때 쓰이는 요소가 css의 요소중 display 를 이용하여 기능을 구현 할수 있다! 자세한 설명을 아래 코드를 보고 설명 하도록 한다. 2.코드설명 (1)html 코드 ASP 모바일 상담 서비스 *화면구성 설정 고객화면크게 상담사화면크게 고객만 직원만 *카메라 설정 전면카메라 후면카메라 *음성 설정 음성포함 음성제거 위에 코드는 이미지상의 상단부분만 발췌 하였는데 특정아이콘은 버튼요소로 ..
-
자바의정석-배열의 장단점(arrayList 또는 배열 for문으로 삭제 했는데 숫자가 남아요 ㅠㅠ)Study/Java 2023. 1. 17. 23:23
1.배열의 장단점 *장점-배열은 구조가 간단하여 데이터를 읽는데 걸리는 시간이 짧다. *단점 (1)크기를 변경 할수 없다. 크기를 변경해야되는 경우 첫번째, 더큰 크기의 배열을 생성해야 된다. 두번째, 이전 배열에 있던 데이터를 복사한다. 세번째. 참조변수의 주소값을 변경해야 된다. 위에 3단계를 거치기 때문에 크기변경시 시간이 많이 걸리고 비효율적이다. 또한, 위와 같은 불편함을 제거하기위하여 큰크기의 배열을 생성할 경우 메모리를 차지하기 때문에 메모리관리 차원에서 그것 또한 비효율적이다. (2)배열 중간에 데이터를 추가하거나 삭제할 경우 시간이 많이 걸린다. 왜? 중간에 추가 할경우 추가하는 위치 뒤에 있는 데이터를 한칸씩밀면서 저장을 해야하기 때문. 그와 같은이치로 삭제할 경우에도 중간에 있는 데이..
-
자바의 정석-ArrayListStudy/Java 2023. 1. 16. 23:35
1.ArrayList 란? Array(배열)+List(List인터페이스)의 결합으로 데이터의 저장공간으로 배열을 사용하며, List인터페이스의 특징인 순서가 있고, 중복을 허용한다는 특징을 가지고 있다. 위에 사진을 보면 앞서 말한거와 같이 ArrayList는 List인터페이스를 상속받아 구현한 구현클래스로 List 인터페이스를 구현한 구현클래스는 Vector와 LinkendList도 있는데 먼저 Vector의 경우 예전에 썼던 배열형식의 저장방식으로 ArrayList와 거의 유사하나 한가지 다른점이 있다면 Vector같은 경우 동기화가 되어 있고 ArrayList의 경우 동기화가되어 있지 않다는 차이점이 있다. LinkendList는 이름에서 알수 있듯이 Linkend(연결됨)+ List(List인터페..
-
자바의 정석-컬렉션프레임웍(collections framework)Study/Java 2023. 1. 16. 00:01
나의 랜선 쌤인 남궁선쌤이 객체지향 다음으로 제일 중요한게 컬렉션프레임웍 (collections framework)이라고 한다. 처음 들었을 당시에는 아무 지식이 없어서 그런가보다 하고 들었는데, 어느정도 기초 지식이 생기고나니 왜 중요하다고 하는지 이제야 조금씩 알게 되는거 같다. 아마 백엔드 개발자 직무를 가진 개발자라면 어떻게 하면 수많은 데이터를 효율적으로 관리를 할까 많이 고민할것이다. 이런 고민에서 나온 방법들이 모여 컬렉션프레임웍 (collections framework)을 만들어 졌다고 하니, 기초 다질겸 다시한번 복습겸 내용을 정리 하고자 한다. 1.컬렉션프레임웍 (collections framework) 란? 컬렉션(collection) : 여러 객체(즉, 데이터)를 모아 놓았다는 의미..
-
초보자를 위한 반응형 기초(화면크기별로 width설정 하기)Study/JavaScript 2023. 1. 7. 11:04
web으로 되어있는 페이지를 mobile버젼으로 만들어 달라는 업무지시를 받았고 현재 만들기 위해 시행 착오중에 발견한 지식에 대해서 공유하고자 포스팅한다. 내가 반응형 웹을 만들라고 했을때 옆에 동료가 width가 px로 고정으로 되어 있으니 %로 설정해야 디바이스 크기에 따라 줄어들고 늘어날수 있다고 알려 줬었다. 그래서 %적용하니 되긴 되는데,,,도대체 %를 설정 했을때 기준점을 모르겠다는것... 그래서 이것저것 실험을 해보니 "%를 설정하고자 하는 선택자의 상위부모선택자를 px로 고정값을 주고 그걸 기준으로 %로 변경" 이 되는거 같다! 아래 코드를 보고 설명하겠다. (1)html코드 ASP 모바일 상담 서비스 setting 영상걸기 영상통화 채팅 캡쳐보기 영상걸기화면1 영상통화화면2 채팅화면3 ..