동해둘리의 IT Study

png 파일을 원하는 크기로 변경할 수 있는 온라인 무료사이트가 있습니다. 이미지 크기조절 뿐만 아니라 이미지변환 및 간단한 편집도 가능합니다. 사이트주소는 https://www.iloveimg.com/ko 입니다 위 사이트에 접속한 후에 [이미지 크기조절] 을 선택하시면 됩니다. 그 후, 아래와 같은 화면이 보여지는데 여기서 [여러 이미지 선택] 버튼을 클릭하여 크기를 변경하고자 하는 이미지를 선택하셔서 업로드 합니다 업로드가 완료되면 아래와 같은 화면이 나타납니다. 이 화면 오른쪽에 있는 너비와 높이를 원하는 대로 변경해 줍니다 조절이 완료되면 아래와 같은 화면이 나타나고 [조절된 크기의 이미지 다운로드]를 클릭하시면 크기가 변경된 이미지를 다운로드 받으실 수 있습니다. 참고로 저 동해둘리가 직접 운..

IT공부방/개발환경,오픈소스 2019. 8. 27. 17:39

지난번 포스팅에서 파비콘으로 사용되는 ico 파일을 만드는 사이트를 소개시켜 드렸었는데요, https://doolyit.tistory.com/153 파비콘 만들기 ( favicon 만들기 ) favicon.ico 404 Not Found / PNG 파일을 파비콘으로 파비콘 만들기 / favicon 만들기 / faviconl.ico 웹사이트를 개발하다보면 크롬 개발자모드 화면의 콘솔에 다음과 같은 코드가 보이는 경우가 있습니다. 파비콘이라는 것은 바로가기 버튼/ 홈화면에 링크추가/ 브.. doolyit.tistory.com 참고로, 파비콘은 브라우저에서 페이지를 열었을 때, 아래 그림의 빨간색 동그라미 부분처럼 타이틀 부분에 표시되는 이미지를 말합니다. 이번에는 ico 파일을 png로 변경, 또는 ico ..

IT공부방/개발환경,오픈소스 2019. 8. 24. 17:26

웹사이트 또는 모바일 서비스를 개발시 지도를 표시하는 경우가 있는데요, 보통 네이버지도 또는 다음지도 API 서비스를 이용하여 아래와 같이 개발하게 됩니다. 그런데, 다음지도 서비스가 2018년 11월경에 중지되었고, 지금은 카카오에서 지도서비스를 제공하고 있습니다. 아울러 kakao지도 로 변경된 이후 일정 쿼터를 넘기게 되면 유료로 변경되어 비용이 지급해야 합니다. 네이버지도 또한 아래와 같이 쿼터제한을 두고 있습니다. 일반적인 웹사이트는 걱정할 필요가 없을 정도로 쿼터제한이 넉넉하긴 합니다만, 대량 접속을 유발하는 서비스의 경우는 비용을 지급해야 겠지요 이번 포스팅에서는 카카오지도 API 를 이용하여 웹사이트에 원하는 지도를 넣는 방법을 설명하도록 하겠습니다. kakao지도 를 이용하기 위해서는 카..

IT공부방/개발환경,오픈소스 2019. 7. 3. 08:08

게시판을 만들때 네이버 스마트데이터를 이용하는 경우가 많은데요, 아래 그림과 같이 글꼴이나 굵기 색상등을 편집하기 좋고 무료로 제공되기 때문에 사용하기 편리합니다 다만, 스마트에디터의 사진추가를 이용할 경우, 문제가 발생할 수 있습니다. 스마트에디터를 설치한 후에 사진을 첨부해보면, 기본적으로 myPhoto 폴더로 사진이 업로드 되게 됩니다. 이는, nse_files/quick_photo_uploader/popup/ 폴더에 있는 FileUploader_html5.php 파일에 아래와 같이 경로가 명기되어 있습니다. $newPath = $_SERVER['DOCUMENT_ROOT'].'/nse/myPhoto/'.iconv("utf-8", "cp949", $file->name); 이미 업로드된 파일과 동일한 ..

IT공부방/개발환경,오픈소스 2019. 6. 25. 13:38

요즈음 영상광고나 홍보물에서 많이 사용되는 모션그래픽을 쉽게 만들 수 있는 프로그램 입니다 아래 링크에서 다운로드 받을 수 있습니다. https://www.nchsoftware.com/animation/ko/index.html 사용설명은 아래 유튜브 동영상을 참고하시기 바랍니다 https://www.youtube.com/watch?v=_YYfsfi-gKs&feature=youtu.be

IT공부방/개발환경,오픈소스 2018. 12. 5. 19:24

아마존웹서비스 AWS 의 인스턴트에 접속하여 FTP 파일전송을 할 수 있는 프로그램인 WinSCP 를 설명합니다 WinSCP 는 Window 환경에서 아마존웹서비스의 인스턴스에 접속하여 파일을 전송할 수 있는 프로그램입니다아마존웹서비스의 인스턴스는 물론이고, 클라우드서비스인 Amazone S3 서비스에도 접속할 수 있습니다 WinSCP 프로그램은 아래 사이트에서 다운로드 가능합니다. http://winscp.net/eng/download.php 설치 후 실행시키면 호스트이름과 사용자이름을 물어보는데요 아마존 웹서비스의 인스턴스에 있는 퍼블릭DNS(IPv4) 를 입력해 주시면 됩니다. 그리고, 사용자이름은 AMI 의 기본 사용자이름을 사용하게 됩니다 즉, Amazon Linux AMI 일 경우 ec2-us..

IT공부방/개발환경,오픈소스 2018. 9. 10. 18:57

아마존웹서비스 AWS 에 접속하여 인스턴스를 생성한 후에putty 프로그램을 이용하여 SSH 로 접속하는 방법을 기록합니다. 아마존웹서비스 AWS 에 접속한 후에 콘솔에 로그인을 하게되면 아래와 같이 AWS 에서 제공하는 여러가지 서비스가 보입니다여기에서 기존에 생성했던 인스턴스를 관리하기 위해서는 EC2 메뉴를 선택합니다 이때, 인스턴스 리스트가 보이지 않는 경우가 간혹 있습니다 이럴때는 당황하지 마시고, 우측상단에 있는 리전(Region) 을 선택하셔서, 서울로 바꿔주시면 보이게 됩니다. 바꾸고 나면, 아래와 같이 기존에 생성했던 인스턴스 리스트가 보이게 됩니다. 생성된 인스턴스에 SSH로 접속하기 위해서는 SSH 접속프로그램이 필요합니다.putty.exe 프로그램을 많이 사용하는데요 아래 링크를 통..

IT공부방/개발환경,오픈소스 2018. 9. 10. 18:35

프로그래머가 아니어도 쉽게 프로그램을 만들 수 있도록 해주는 언어로 프로세싱언어가 있는데 프로세싱 언어를 자바스크립트에 통합시켜 만든 패키지로 p5가 있습니다. https://p5js.org/reference/ 아래와 같이 기본적인 드로잉 기능부터 3D는 물론 사운드까지 다양한 예제들과 라이브러리가 제공됩니다. ExamplesStructureCoordinates Width/Height Setup/Draw No Loop Loop Redraw Functions Recursion Create Graphics FormPoints/Lines Shape Primitives Pie Chart Regular Polygon Star Triangle Strip Bezier 3D Primitives DataVariables..

IT공부방/개발환경,오픈소스 2018. 6. 25. 22:37

앱개발 등에 필요한 무료아이콘을 구할 수 있는 사이트 http://www.flaticon.com http://www.iconfinder.com 저작권에 위배되지 않는 아이콘을 제공하는 사이트입니다무료도 있지만 유료로 판매되는 아이콘도 있습니다

IT공부방/개발환경,오픈소스 2018. 3. 27. 01:37

비메오 동영상을 특정 웹사이트에 포함하는 경우 보통 아래와 같이 임베드코드를 삽입하는 방식을 사용하는데요 API 를 이용하면 비메오 플레이어에 직접 접근하여플레이어를 플레이하거나 멈추거나 소리를 키우거나 특정위치로 가게하는 등의 작업이 가능합니다. 아래와 같이 기존의 iframe 임베드를 포함하여도 되고 아래와 같이 동적으로 플레이어를 생성할 수도 있습니다. 플레이어 생성후에는 각종 method 와 event 를 컨트롤 할 수 있는데요 아래 리스트가 사용가능한 method 입니다. ◦on◦off◦loadVideo◦ready◦enableTextTrack◦disableTextTrack◦pause◦play◦unload◦getAutopause◦setAutopause◦getColor◦setColor◦addCueP..

IT공부방/개발환경,오픈소스 2018. 3. 26. 19:03

블록을 짜맞추는 방식의 아주쉬운 방법으로 스마트폰용 앱을 개발할 수 있는 앱인벤터(App Inventor) 는 그 소스가 오픈되어 있는 관계로,여러 기관에서 앱인벤터를 이용한 파생툴이 많이 나오고 있는데요 기존의 앱인벤터에서 개발가능한 앱은안드로이드폰 에서만 실행가능했었죠 그런데, 아래의 사이트에서 제공하는 Thunkable 이라는 툴은 https://thunkable.com 아이폰에서도 동작한다고 합니다. 아직 자세히 살펴보지는 않았지만, 향후 참고를 위해 기록으로 남겨둡니다

IT공부방/개발환경,오픈소스 2018. 3. 19. 11:45

웹사이트 개발시 다양한 환경의 브라우저에서 테스트 하고아이폰, 넥서스, 갤럭시 등등의 다양한 기기에서의 테스트를 필요호 하는데요 이때 사용하면 좋은 툴이 있어서 소개드립니다. https://www.browseemall.com/ 위 사이트에 접속하셔서 프로그램을 다운로드 한 후 설치하게되면 아래와 같이 쉽게 다양한 브라우저 환경에서 테스트를 할 수 있습니다. 아울러 PC에서 사용되는 다양한 브라우저는 물론모바일 기기에서 접속했을 경우도 테스트 가능합니다. 다만, 이 프로그램은 유료로 제공되구요무료버전은 14일간 테스트가 가능합니다.

IT공부방/개발환경,오픈소스 2018. 3. 5. 19:24

아이폰이나 아이패드에 사용되고 있는 사파리 브라우저는 얼마전부터 MAC OS용만 다운로드를 재공하고 있는데요, 윈도우 환경에서 웹사이트를 개발하는 개발자의 경우, 아이폰이나 아이패드에서 웹사이트가 제대로 보이는지 확인할 필요가 있습니다 이를위해 윈도우용 사파리 브라우저를 다운로드 받을 수 있는 경로를 알려드립니다 제가 직접 다운로드 하여 테스트 해봤구요, 설치이외에 별다른 요구사항등이 없이 깨끗해 보입니다. 설치 후에는 아래와 같이 세팅을 변경해야 하는데요 우선 아래의 1번에 있는 기어버튼을 클릭한 후에 [기본설정] 메뉴를 클릭합니다 기본설정 팝업창에서 제일 하단의 [메뉴 막대에서 개발자용 메뉴보기] 를 선택해 줍니다 그런후에 아래 화면의 기어메뉴 좌측에 있는 문서버튼을 클릭하고, 개발자용 메뉴로 갑니다..

IT공부방/개발환경,오픈소스 2018. 3. 5. 19:12

웹사이트/홈페이지 개발시, 아이폰, 아이패드, 갤럭시 등등의 서로다른 사용자 환경에 따라 화면이 정상적으로 보여지는지 테스트 해야하는 경우가 있는데요, 크롬의 개발자모드를 이용하면 별다른 프로그램 설치없이 테스트가 가능합니다 먼저 아래화면의 1번을 클릭한 후 2번의 [도구더보기] 클릭 후 [개발자도구]를 선택합니다. 그러면, 아래와 같이 상단부분에 테스틀 할 사용자환경을 선택할 수 있는 선택바가 나타납니다. 이 부분을 iPhone7 , iPhone8 등등 원하는 환경으로 변경하면 아래와 같이 웹사이트/홈페이지의 화면이 해당기기에서 보는것 처럼 변경되게 됩니다. 개발자라면 많이들 알고계시겠지만, 혹시, 모르는 분들을 위해 기록으로 남깁니다

IT공부방/개발환경,오픈소스 2018. 3. 5. 18:29

웹서핑 할 때, 어떤 브라우저를 사용하시나요? 익스플로러? 크롬? 마이크로소프트의 인터넷 익스플로러 점유율은 특히나 우리나라에서 독보적으로 1위를 차지했었는데요... 이제는 우리나라 에서도 더 이상 1위가 아닙니다. 현재 브라우저 점유율 1위는 바로 구글에서 개발한 크롬 (Chrome) 브라우저 되시겠습니다 저는, 블로그 포스팅할 때도 크롬을 많이 사용하는데요, 크롬 브라우저를 사용해서 포스팅을 하면 편리한 점이 많습니다. 사진 첨부할 때 이미지 미리 보기가 가능하고요, 방금 전에 첨부했던 폴더가 기억되어 있어서.. 매번 클릭을 몇 번씩 해야 하는 익스플로러 보다 훨씬 편하죠 암튼, 오늘 크롬 브라우저를 사용하면서 활용할 수 있는 팁 한가지 알려드립니다. 웹서핑을 할 때, 브라우저는 쿠키/이미지/사용기록..

IT공부방/개발환경,오픈소스 2017. 2. 2. 16:05

HTML5 또는 그 이하 HTML 에서 제공하는 태그/엘리먼트의 브라우저 버젼별 지원여부를 확인할 수 있는 사이트를 소개합니다. caniuse.com 이라는 사이트 입니다. 이 사이트에 접속하여 아래 Can I use 뒤에 있는 입력란에 태그를 넣으면 지원되는 브라우저 버전을 확인할 수 있습니다. 예를 들어, audio 태그를 입력한 후 확인해 보면, 아래와 같이 Internet explprer 6/7/8 버전에서는 지원되지 않는다는 것을 알 수 있습니다. 반면, textarea 태그의 경우 초창기부터 지원되던 태그이기 때문에Explorer 모든 버젼에서 지원되는 것을 확인할 수 있습니다.

IT공부방/개발환경,오픈소스 2016. 9. 11. 18:07