본문 바로가기

전체 글134

dd DOCTYPE html> flex : css ul { background: lightpink; } li { display: block; width: 100px;height: 100px; margin: 10px; text-align: center; line-height: 100px; background: #fff; } flex .flex-1 { display: flex; } 1 2 3 .flex-2 { display: flex; flex-direction: column; } 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3.. 2020. 10. 20.
썸네일 스케치하기 썸네일(Thumbnail)이란? 썸네일이란 엄지손가락 손톱만한 스케치를 말하며, 정식 작업 전 주로 아이디어 정리를 간단히 표현하기 위해 사용되던 일종의 스케치입니다. 즉 만들고자 하는 작품의 대강을 미리 그려 다른 사람으로 하여금 전체적인 감과 레이아웃 등을 알 수 있게 해주는 스케치를 말합니다. 2020. 10. 15.
GaugeMeter GaugeMeter.js jQuery 플러그인 jQuery로 제작 된 그래픽 게이지 미터 사용방법 1. jQuery & JavaScript Code 추가 태그 내에 아래 코드 추가 2020. 10. 13.
무료 템플릿 사이트 html5up.net/ HTML5 UP Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license. html5up.net 부트스트랩 템플릿 themehunt.com/ Free Bootstrap Templates & WordPress Themes A great collection of multipurpose free templates and WordPress Themes. Browse and download theme for your personal, business or commercial website. themehunt.com 2020. 10. 13.
웹폰트 만들기 m.blog.naver.com/PostView.nhn?blogId=designondo&logNo=220915027585&proxyReferer=https:%2F%2Fwww.google.com%2F CSS web font 웹폰트 ttf, eot, woff 만들고 설치 사용하기 시작하기 전 알아두기!CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가... blog.naver.com 시작하기 전 알아두기! CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가 흔히 웹폰트라 부르는 Embedded Open Type(.eot)포맷의 라이센스로 인해 해당 포맷을 지원하는 유일한 웹브라우저인 인터넷 익스플로러에서만 사용했습니다. 그러나,.. 2020. 10. 8.
[학점은행제] 자격연계 전공별 자격연계 검색하기 www.cb.or.kr/creditbank/eduIntro/nEduIntro2_4_3.do 1. 컴퓨터공학 자격연계 2. 시각디자인학 자격연계 2020. 10. 7.
게임프로그래밍전문가 영문명 Certificate of Game Programmer 분야 정보/통신 관리처 한국콘텐츠진흥원 시험과목 프로그래밍일반 게임제작개론 게임알고리즘 게임프로그램작성 자격명칭 게임프로그래밍전문가(2002-12-31) 실기기관 홈페이지 : www.kgq.or.kr/service/pub/IntroServlet 한국콘텐츠진흥원 게임국가기술자격검정 www.kgq.or.kr 참고 사이트 blog.naver.com/sorang226/222021954217 문제풀이 모음, 게임프로그래밍전문가 실기 (총 19개 문제) 게임국가기술자격검정 시험, 게임프로그래밍전문가 실기시험 기출문제 풀이 모음 포스트입니다.가장 최근 ... blog.naver.com [책] 유니티 쉐이더 스타트업 : https://coupa.ng/bES.. 2020. 10. 7.
이미지 해상도 분기대응 해상도에 맞춰 이미지를 분기대응해야 한다. .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} @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { .img_g {background-image:url(http://m1.daumcdn.net/svc/image/U03/common_icon/527B1A8D03540C0004);-web.. 2020. 10. 5.
[모바일 디자인] 디바이스별 픽셀 밀도 이해하기 Device Pixel Density 모바일을 포함한 반응형 웹 디자인과 밀접한 관련이 있는 장치 별 픽셀 밀도에 대해 알아보도록 하겠습니다. 오늘 날과 같은 발빠르게 다변화하고 있는 환경, 즉 수많은 디바이스를 접하는 시대에 디바이스마다 각각 픽셀을 어떻게 처리하고 있으며, 이에 대응하는 방법이 무엇인지를 알아야 합니다. 픽셀 밀도(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.