interactive_design/web_design 89

웹사이트 디자인을 위한 이미지최적화 & 화일 포맷

https://help.behance.net/hc/en-us/articles/204484614-Guide-Formatting-Images-For-Display-On-Behance 비핸스 사이트에서 제공하는 이미지 업로드에 대한 가이드 페이지 입니다. 중요사항 1! 한페이지에 전체 들어가는 이미지를 50M로 제한해 주세요. 이 이상이되면 페이지가 로딩되지 않거나 에러가 발생됩니다. 물론 더 적은 용량의 이미지 페이지가 빨리 뜨게 됩니다. " 3초 안에 콘텐츠를 불러오지 않으면 모바일 사용자의 53%는 사이트를 닫습니다." 중요사항2! 한 개의 이미지가 1M가 넘지 않도록 해주세요. 이런 경우 비핸스 업로드시 에러가 발생할수 있다고 합니다. (에러가 발생하지 않으면 그냥 업로드해도된다는…) 이미지를 그냥 저..

[인터렉티브 미디어2]웹디자인 인트로 강의

www world wide webwww 월드 와이드 웹 창시자 팀 버너스 리의 TED 강연영상 http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html email and domains - Country codesusername@site.domhttp://en.wikipedia.org/wiki/Domain_nameCountry codes NewsgroupsUsernet(Unix User Network) starting or joining a 'thread' Abbreviations and emoticonshttp://netforbeginners.about.com/od/internetglossary/tp/The-Top-Text-Message-Acronym..

ftp 설치 : fileZilla 다운로드 설치

닷홈의 무료호스팅http://dothome.co.kr/web/free/index_3.php워드프레스 설치를 선택 http://neofuture.dothome.co.kr/wordpress/wp-admin/ 자신이 원하는 워드프레스 테마를 다운로드 받은 후 /html/wordpress/wp-content/themesftp를 이용해서 위의 디렉토리 themes라는 폴더에 복사해 넣는다. http://www.dessign.net/simple-photo-responsive-theme/오늘 수업시간에 보여줬던 워드프레스 테마 http://api.mobilis.co.kr/webfonts/font_usage.html?fontface=NanumGothicWeb어드민 페이지의 스타일시트 (style.css) 에서 body..

무료 jQuery 플러그인 : 슬라이드

구글에서 free jQuery plug-in이라고 검색하면 됨 다양한 트렌지션 효과의 무료 슬라이드 플러그인 http://www.pixedelic.com/plugins/camera/ 다양한 무료 플러그인 있는곳 http://www.instantshift.com/2012/03/26/80-useful-jquery-plugins-to-enrich-your-sites-user-experience/ http://codeknows.com/jquery-plugins/useful-jquery-plugins/ 박스형태로 썸네일을 구성하고 썸네일을 누르면 큰 이미지를 볼수 있도록 한것 http://tympanus.net/codrops/2011/10/07/draggable-image-boxes-grid/ Light box ..

웹코딩 이미지 포맷 종류 : GIF, JPG, PNG

어떤때 어떤 이미지 포맷 종류를 써야 할까? GIF : 일러같은데서 단순한 색을 이용하여 일러스트를 그린경우비교적 단순한 아이콘, 로고 텍스트를 그림으로 저장할때 JPG:투명한 이미지가 없는 사진같은 화일을 저장할때 쓰임 PNG : 복잡한 이미지, 또는 그림자가 있는 형태의 이미지를 저장할때 알파채널(투명)을 전부 살릴때 이용 => 포토샵에서 PNG 24로 저장. 투명 옵션 체크

인터렉티브 미디어 디자인1: 워드프레스로 자신의 웹사이트 만들기

http://www.cafe24.com/?controller=product_basic_autoban 카페24에서 설치방법 http://blog.naver.com/PostView.nhn?blogId=s2une&logNo=140152519594 닷홈에서 워드프레스 공짜설치방법 http://dothome.co.kr/web/free/index_3.php http://dothome.co.kr/my/manual/zeroboard/13.php#01 멋진 워드프레스 테마 찾기 google에서 best design wordpress theme 또는 smashing magazine에서 wordpress라고 찾을것 공짜 테마들 http://wp.smashingmagazine.com/2011/07/05/free-wordpre..

생활 코딩 : HTML, CSS, JAVA Script, PHP 등

코딩을 하는데 완전 좋을 사이트를 찾았습니다. 이번 인터렉티브 미디어 수업에 활용할 예정입니다. http://opentutorials.org/course/1 완전 좋습니다. 웹코딩을 체계적으로 배우실수 있는 아주 좋은 기회! 게다가 오픈교육 컨텐츠로 누구나 참여해서 함께 할수 있어서 더 좋은것 같습니다. CCK 살롱 기획단의 메일을 읽다가 발견했습니다.

2011년도 웹개발자 리소스와 툴 50

http://speckyboy.com/2011/12/14/our-50-favorite-web-developers-resources-and-tools-from-2011/ 웹하고 관련해서는 역시 그리드 시스템을 쉽게 할수 있는 CSS 소스들이 대세 1280 모니터 사이즈를 위한 1140 px CSS Grid 5 http://cssgrid.net/ 다양한 기기에서 구현가능한 프로토타입을 도와주는 Foundation. 다양한 사이즈와 형태의 그리드 구현가능 http://foundation.zurb.com/ 앱 에니메이션을 쉽게 구현해 주는 센차 CSS3 Animator & HTML5 Animations http://www.sencha.com/products/animator/

둥근 모서리 텍스트박스 웹사이트에 만들기

http://virtuelvis.com/gallery/css/rounded/ The CSS The top left and top right corners are created using the following CSS rule: .rounded:before { background: transparent url(top-right.png) scroll no-repeat top right; margin-bottom: -20px; height: 30px; display: block; border: none; content: url(top-left.png); padding: 0; line-height: 0.1; font-size: 1px; } The bottom left, and the bottom right c..

CSS에서 DIV 중앙정렬

DIV 중앙정렬 완벽 해결법 지금 소개해드리는 코딩은 IE7과 FF2와 Opera9.25와 Safari3.0.4에서 모두 구현됩니다. 지식iN의 어떤 웹 디자이너가 답변한 것을 보고 배웠어요. 우리가 div를 배울 때 div의 스타일을 margin-left:auto; margin-right:auto;로 하거나, 좀 쉽게 하려면 margin:0 auto;로 놓으면 div가 브라우저의 가운데에 놓이게 된다고 배웠습니다. 제로보드 메뉴얼도 그렇고 팁 공유에 올라온 글들에도 그렇게 나오죠? 제 경우엔 IE에서 먹히지 않더군요. 나머지 브라우저들은 다 잘 보이더만. 그래서 찾다가 아래 방법을 찾았어요. 코딩은 직접 했습니다. 내용 html에서 이렇게 하고 여기에 들어가는 css에서 다음과 같이 코딩합니다. 코드를..

웹 표준 코딩 : 모바일 적용 기준

http://sinbd.com/index/hompy/study.php?mid=69&r=view&uid=22625 css이용한 웹표준 코딩의 예. http://ugpapa.tistory.com/176 http://ugpapa.tistory.com/177 http://ugpapa.tistory.com/179 http://ugpapa.tistory.com/180 http://ugpapa.tistory.com/184 여기의 예제를 참고하시면 보다 명확하게 알수 있음 위의 웹표준코딩에 모바일의 값들을 넣어서 적용한 css화일을 첨부하니 참고바랍니다.

웹 디자인 : 978 & 960 가로사이즈 그리드 적용

최근에는 978 가로 사이즈에 12 칼럼을 적용하는게 가장 인기라고 합니다. http://978.gs/ 다운로드에 가시면 템플릿을 다운로드 받아 이용하실수 있습니다. 960 가로사이즈 그리드 적용 http://960.gs/ 하단에 각 사이트 예제에서 show grid 버튼을 눌러보면 어떻게 그리드를 적용했는지 볼수 있습니다. 소스코드 다운로드 css 화일로 간단하게 본인이 디자인하고자 하는 사이트에 적용가능 http://net.tutsplus.com/articles/news/a-detailed-look-at-the-960-css-framework/ 사용 설명 동영상