본문 바로가기

전체 글158

게임프로그래밍전문가 www.cb.or.kr/creditbank/eduIntro/nEduIntro2_4_1.do 자격 학점인정이란? | 자격 | 학점인정 대상 | 학점은행제 소개 | 학점은행 홈으로 이동 학점은행제 소개 학점인정 대상 이전학점인정 대상 자격 학점인정이란? --> 자격 전공별 자격연계 자격별 학점인정의 세부기준은 교육부장관의 승인을 받아 국가평생교육진흥원의 www.cb.or.kr 영문명 Certificate of Game Programmer 분야 정보/통신 관리처 한국콘텐츠진흥원 시험과목 프로그래밍일반 게임제작개론 게임알고리즘 게임프로그램작성 자격명칭 게임프로그래밍전문가(2002-12-31) 실기기관 홈페이지 : www.kgq.or.kr/service/pub/IntroServlet 한국콘텐츠진흥원 게임국가기술자.. 2020. 10. 7.
이미지 해상도 분기대응 해상도에 맞춰 이미지를 분기대응해야 한다. 이미지를 1배, 2배, 3배로 이미지 제작 후 아래와 같이 코딩합니다. /* 1배 이미지 분기대응 */ .img_g {display:inline-block;overflow:hidden;background:url(https://m1.daumcdn.net/svc/image/U03/common_icon/527B1A970370F60001) no-repeat 0 0;text-indent:-9999px} /* 2배 이미지 분기대응 */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .img_g {background-image:url(.. 2020. 10. 5.
[모바일 디자인] 디바이스별 픽셀 밀도 이해하기 Device Pixel Density 모바일을 포함한 반응형 웹 디자인과 밀접한 관련이 있는 장치 별 픽셀 밀도에 대해 알아보도록 하겠습니다. 오늘 날과 같은 발빠르게 다변화하고 있는 환경, 즉 수많은 디바이스를 접하는 시대에 디바이스마다 각각 픽셀을 어떻게 처리하고 있으며, 이에 대응하는 방법이 무엇인지를 알아야 합니다. TV 해상도 비교 픽셀 밀도(Pixel Density) 픽셀 밀도란 공간(대부분 inch에서 사용)에 픽셀이 들어가는 물리적인 수치를 말합니다. (국내에서는 센치미터나 밀리미터를 사용하지만 해외에서는 인치를 사용하기 때문에 인치가 기준) 제록스에 의한 연구결과로 나온 첫 번째 맥킨토시 컴퓨터(애플2)는 인치당(inch) 72픽셀이었습니다. 첫 번째 맥킨토시 컴퓨터인 Apple 2에서는.. 2020. 10. 5.
워드프레스 샘플 사이트 ++ 심플솔루션 소개! ++ - caostudio http://caostudio.co.kr/ - dnmmedia http://dnmmedia.kr/ - MNID http://mnid.co.kr/ - 대구경북과학기술원 뇌인지대학원 http://abc-neuro.org/ - 비주얼골프 http://visualgolf.co.kr/ - ifezine 소셜맵 http://ifezinemap.com/ - PINGO http://picngo.kr/ - 비마이카 http://bemycar.co.kr/ - 가온애드에이전시 https://gaon-adagency.com/ - 세닥스 http://www.sedax.co.kr/ - ARMOR KOREA http://armorkorea.com/ - 단열하는사람들 http://d.. 2020. 9. 28.
레이어팝업-위치조정-초점처리for웹접근성 $('.layer_open').click(function(){ var el = $(this); $('.layer_popup').show(); $('.dim').show(); el.attr('data-focus','on'); // 레이어 팝업이 닫힐 때를 위한 표시 - 웹접근성 /* modalPopup팝업 위치조정 */ window.setTimeout(function(){ var target = $("#layerPopup"); var win_height = $(window).height(); var pop_height = target.height(); var top_value = $(window).scrollTop() + (win_height - pop_height) /2; target.attr("tabi.. 2020. 9. 24.
css Animate wowjs.uk/ wow.js — Reveal Animations When Scrolling wowjs.uk jackonthe.net/css3animateit/ CSS3 Animate It Examples - Animate Elements on Scroll Sequencing If you want to have a set of animations start one after the other then you can set a sequence time in ms using "data-sequence" then define the order with "data-id". It Works! This animation will start 500ms after This animation will start 500m.. 2020. 9. 22.
04- [웹디자인기능사] 설치, 폴더만들기 작업 준비하기 1. 코딩 EDIT 프로그램 설치 컴퓨터에 설치되어 있는 메모장으로도 코딩이 가능하지만 작업하기가 어렵다. 해서 EDIT 프로그램을 사용하여 코딩한다 VS Code, Atom, Brackets 등 많은 프로그램이 있지만... 시험장에 설치되어 있는 프로그램을 설치해서 연습하는게 좋기 때문에 Brackets을 설치해 연습해보겠다. 아래 페이지로 가서 Brackets과 emmet을 설치하고 오세요~ https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A mo.. 2020. 9. 18.
06- [웹디자인기능사] CSS 제작하기 작업 전 프로그램 설치가 필요합니다. 설치를 위해 아래 페이지를 참고하세요. https://oddcode.tistory.com/69?category=836326 웹디자인기능사 설치 프로그램 1. EDIT 프로그램 - Brackets 시험장에 설치되어 있는 Brackets을 사용해 공부해보겠습니다. 아래 사이트에서 Brackets을 설치해주세요. http://brackets.io/ A modern, open source code editor that understands.. oddcode.tistory.com HTML로 사이트의 뼈대를 완성했으면 CSS로 디자인을 입히겠습니다. 1. CSS 파일 External로 추가하기 css 확장자를 가진 파일을 만들고 html 파일에 방금 만든 css를 연결해 사용합.. 2020. 9. 18.
Skip Navigation ie 오류 blog.naver.com/PostView.nhn?blogId=yongpal0070&logNo=220040882196&parentCategoryNo=12&categoryNo=&viewDate=&isShowPopularPosts=true&from=search 2020. 9. 16.
VSCode ftp-simple gangnam-americano.tistory.com/26 [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 [VSC] Visual Studio Code에서 FTP로 remote(원격)서버 연동하기 오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해 알아보겠다. 우선, Visual Stu.. gangnam-americano.tistory.com 오늘은 Visual Studio Code로 Reactjs를 개발하는데 있어 remote서버에 FTP로 연동하여 바로 코딩하는 방법에 대해 알아보겠다. 우선, Visual Studio Code를 켜고 좌측 메뉴중 제일 밑에있는 확장버턴을 눌러.. 2020. 9. 16.
VSCode : OSX Finder에서 열기 https://gist.github.com/tonysneed/f9f09bfa28bcf98e8d8306f9b21f99e2 Add a command to Finder services in Mac OSX to open a folder in VS Code Add a command to Finder services in Mac OSX to open a folder in VS Code - Mac OS X: Open in Visual Studio Code gist.github.com 1. Automater를 시작합니다 2. 파일메뉴에서 신규를 선택합니다. 3. 서비스를 선택합니다. 4. "서비스가 받는 선택 항목: 파일 또는 폴더", "선택 항목 위치: Finder"를 선택합니다. 5. 왼쪽 화면에서 "셸 스크립트 .. 2020. 9. 11.
책 추천 - 인터랙티브 웹디자인북 인터랙티브 웹디자인북 www.hanbit.co.kr/store/books/look.php?p_code=B4796244265 인터랙티브 웹디자인북: 웹디자이너를 위한 HTML5+CSS3+jQuery 사용설명서 필수 구문 40개와 9개의 실전 예제로 완성하는 인터랙티브 웹 만들기 이 책에서는 웹 디자인에 필요한3Step만 따라가면 인터랙티브 웹 예제 9개를 완성할 수 있다. HTML5, CSS3, jQuery 문법 중 실무에서 www.hanbit.co.kr 2020. 8. 28.
신사임당 쇼핑몰 cosette.kr/index.html 인테리어소품 :: 코제트 본 결제 창은 결제완료 후 자동으로 닫히며,결제 진행 중에 본 결제 창을 닫으시면 주문이 되지 않으니 결제 완료 될 때 까지 닫지 마시기 바랍니다. cosette.kr 홈퍼니싱 사업 (이케아) 2020. 8. 28.
06. jQuery Effects Hide / Show hide()및 show()메서드를 사용하면 HTML 요소를 숨기고 표시 할 수 있습니다 hide() 요소를 숨깁니다. show() 요소를 보여줍니다. See the Pen OJNmQXr by miae (@flato) on CodePen. Fading 요소를 서서히 보여주거나 없앱니다. $(selector).fadeToggle(speed,callback); speed 매개 변수는 효과의 지속 시간을 지정하고 "slow", "fast"또는 milliseconds(2000) 값을 사용할 수 있습니다. 선택적 콜백 매개 변수는 페이딩이 완료된 후 실행되는 함수입니다. fadeIn() 숨겨진 요소를 서서히 보여줍니다. fadeOut() 요소를 서서히 안보이게 합니다. fadeToggle() .. 2020. 8. 28.
05. jQuery Event Methods 이벤트 란? 웹 페이지가 응답 할 수있는 모든 방문자의 행동을 이벤트라고 하고 어떤 일이 발생하는 정확한 순간을 나타냅니다. 요소 위로 마우스 이동 라디오 버튼 선택 요소 클릭 Mouse Events Keyboard Events Form Events Document/Window Events click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload 이벤트를 실행 시키려면 아래 구문과 같이 클릭 이벤트를 넣으면 됩니다. $("p").click(function(){ // action goes here!! }); on () 메서드 on()메서드는 선택한 요소에 대해 하나 .. 2020. 8. 28.
04. jQuery HTML Dimensions Dimensions (박스 모델) width() 요소의 너비를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) height() 요소의 높이를 설정하거나 반환합니다 (패딩, 테두리 및 여백 제외) innerWidth() 요소의 너비를 반환합니다 (패딩 포함) innerHeight() 요소의 높이를 반환합니다 (패딩 포함) outerWidth() 요소의 너비를 반환합니다 (패딩, 테두리 및 여백 포함) outerHeight() 요소의 높이를 반환합니다 (패딩, 테두리 및 여백 포함) width(), height() See the Pen vYGmpdm by miae (@flato) on CodePen. Document와 Window 비교 1. Document (전체 문서 크기) - 창크기에 상관없이 일정.. 2020. 8. 28.
원페이지 애니메이션 스크롤링 (onepage animation scroll) 애니메이션 스크롤링 공용 CDN 사용 script 추가 // scrollTo $('nav a').on('click', function (event) { $.scrollTo(this.hash || 0, 500); event.preventDefault(); }) https://github.com/flesler/jquery.scrollTo flesler/jquery.scrollTo Lightweight, cross-browser and highly customizable animated scrolling with jQuery - flesler/jquery.scrollTo github.com 2020. 8. 25.
scrollUp jQuery plugin https://markgoodyear.com/2013/01/scrollup-jquery-plugin/ scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer ScrollUp is a lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy for t markgoodyear.c.. 2020. 8. 25.
03. jQuery HTML jQuery DOM 조작 jQuery의 매우 중요한 부분 중 하나는 DOM을 조작 할 수 있다는 것입니다. DOM = 문서 개체 모델 DOM은 HTML 및 XML 문서에 액세스하기위한 표준을 정의합니다. "W3C DOM (문서 개체 모델)은 프로그램과 스크립트가 콘텐츠, 구조 및 콘텐츠에 동적으로 액세스하고 업데이트 할 수 있도록하는 플랫폼 및 언어 중립적 인터페이스입니다. 문서 스타일. " 콘텐츠 가져오기 요소의 콘텐츠를 가져오거나 설정할 수 있습니다. text() 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. html() 선택한 요소 (HTML 마크 업 포함)의 내용을 설정하거나 반환합니다. val() 양식 필드의 값을 설정하거나 반환합니다. text(), html() See the Pen MW.. 2020. 8. 20.
02. jQuery Selectors html의 요소를 선택하고 조작하려면 jQuery의 선택자를 사용해야 합니다. jQuery의 모든 선택기는 달러 기호와 괄호 ($ ())로 시작합니다. 태그 선택자 $("p") $("button").click(function(){ $("p").hide(); }); #id 선택자 $("#test") $("button").click(function(){ $("#test").hide(); }); .class 선택자 $(".test") $("button").click(function(){ $(".test").hide(); }); 추가 선택자 $("*") 모든 요소 선택 $(this) 현재 요소 선택 $("p.intro") 선택 $("p:first") 첫번째 요소 선택 $("ul > li") 의 자식 중 요소 선.. 2020. 8. 20.
01. Hello jQyery jQuery란? jQuery의 목적은 웹 사이트에서 JavaScript를 훨씬 쉽게 사용할 수 있도록하는 것입니다. 여러 줄의 자바스크립트로 처리해야 할 작업을 한줄로 처리할 수 있도록 합니다. 예를 들어 폰트 사이즈를 35px로 변경하는 스크립트를 작성하려고 한다면... jQuery를 이용하면 훨씬 쉽게 작성할 수 있습니다. javascript document.getElementById("demo").style.fontSize = "35px"; jQuery $("#demo").css("font-size", "35px"); 웹페이지에 jQuery 추가 jQuery를 사용하려면 jQuery 라이브러리가 필요합니다. 아래의 2가지 방법으로 연결하여 사용할 수 있습니다. 1. jQuery 다운로드 아래 사이트.. 2020. 8. 20.
06. 객체 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/06-object.html 06. 객체 · GitBook 06. 객체 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age); 결과물은 다 learnjs.vlpt.us 객체는 우리가 변수 혹은 상수를 사용하게 될 때 하나의 이름에 여러 종류의 값을 넣을 수 있게 해줍니다. const dog = { name: '멍멍이', age: 2 }; console.log(dog.name); console.log(dog.age).. 2020. 8. 19.
05. 함수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/05-function.html 05. 함수 · GitBook 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. 한번, 이 작업을 함수로 만� learnjs.vlpt.us 함수는, 특정 코드를 하나의 명령으로 실행 할 수 있게 해주는 기능입니다. 예를 들어서, 우리가 특정 값들의 합을 구하고 싶을 때는 다음과 같이 코드를 작성합니다. const a = 1; const b = 2; const sum = a + b; 한번, 이 작업을 함수로 만들어보겠습니다. function add(a, b) { r.. 2020. 8. 19.
04. 조건문 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/04-conditions.html 04. 조건문 · GitBook 04. 조건문 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한�� learnjs.vlpt.us 조건문을 사용하면 특정 조건이 만족됐을 때 특정 코드를 실행할 수 있습니다. if 문 가장 기본적인 조건문은 if 문입니다. if문은, "~~하다면 ~~를 해라" 를 의미합니다. 예시 코드를 한번 봅시다. const a = 1; if (a + 1 === 2) { console.log('a + 1 이 2 .. 2020. 8. 18.
03. 연산자 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/03-operator.html 03. 연산자 · GitBook 03. 연산자 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let learnjs.vlpt.us 연산자에 대해서 알아봅시다. 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자입니다. 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했었지요? let value = 1; // 변수 선언 value = 2; // 대입 연산자 여기서 두번째 줄에서 사용된 = 문자가 바로 연산자입니다. 연산자의 종류.. 2020. 8. 17.
02. 변수와 상수 [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/02-variables.html 02. 변수 · GitBook 02. 변수와 상수 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러 learnjs.vlpt.us 변수와 상수에 대해서 알아봅시다. 변수와 상수는, 특정 이름에 특정 값을 담을 때 사용합니다. 예를 들어서 우리가 value 라는 이름에 1 이라는 값을 넣는다고 가정해봅시다. 그러면, 코드를 이렇게 입력하면 됩니다. let value = 1; 그러면, 앞으로 우리가 value 를 조회하면 value 는 1을 가르키게.. 2020. 8. 17.
01. Hello JavaScript! [펌] 벨로퍼트와 함께하는 모던 자바스크립트 https://learnjs.vlpt.us/basics/01-hello-javascript.html 01. Hello JavaScript · GitBook 자바스크립트는 여러분의 브라우저에서 언제든지 사용 할 수 있습니다. 만약 현재 여러분이 크롬브라우저가 아닌 다른 브라우저를 사용중이라면 크롬을 설치하여 실행해보세요. 그리고 개발자 learnjs.vlpt.us 자바스크립트는 여러분의 브라우저에서 언제든지 사용 할 수 있습니다. 만약 현재 여러분이 크롬브라우저가 아닌 다른 브라우저를 사용중이라면 크롬을 설치하여 실행해보세요. 그리고 개발자 도구를 열어보세요. 개발자 도구는 윈도우 Ctrl + Shift + I 또는 macOS Command + Option + .. 2020. 8. 17.
macOS, 파이썬 API 마인크래프트 서버 설치 맥을 기준으로 한 설치 및 설정입니다. 1.마인크래프트설치 -http://minecraft.net 에서 구입하여 설치합니다. 2.파이썬 3.5.6 설치 및 설정 -brew설치 $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” -파이썬 설치 및 확인 $ brew install python3 $ python3 —version 3.JDK SE설치 -http://www.oracle.com/technetwork/java/javase/downloads/index.html 접속 후 1.8 이상 다운로드 및 설치 -자바 설치 확인 $ java -version 4.마인크래프트 파이썬 API,.. 2020. 8. 15.
홈브루 설치하기 설치하는 방법 먼저 홈브루를 내 컴퓨터에 설치했는지 터미널에 brew --version을 입력해 확인한다. -bash: brew: command not found가 나와 없다는 것을 확인한다. 터미널에 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"를 입력하고 엔터를 누른다. 엔터를 누른다. 내 컴퓨터의 비밀번호를 입력한다. 설치가 끝났다. 참고 https://brew.sh/index_ko 2020. 8. 15.
emmet 설정 변경 Emmet Cheat Sheet docs.emmet.io/cheat-sheet/ Cheat Sheet Download cheat sheet as printable PDF A5 docs.emmet.io https://code.visualstudio.com/docs/editor/emmet#_using-custom-emmet-snippets Emmet in Visual Studio Code Using Emmet abbreviations inside Visual Studio Code. code.visualstudio.com Visual Studio Code의 Emmet Emmet 스 니펫 및 확장에 대한 지원은 Visual Studio Code에 내장되어 있으며 확장이 필요하지 않습니다 . Emmet 2.0 은.. 2020. 8. 14.