www world wide web

www 월드 와이드 웹 창시자 팀 버너스 리의 TED 강연영상 

http://www.ted.com/talks/tim_berners_lee_on_the_next_web.html



email and domains - Country codes
username@site.dom
http://en.wikipedia.org/wiki/Domain_name
Country codes

Newsgroups
Usernet(Unix User Network) 
starting or joining a 'thread'

Abbreviations and emoticons
http://netforbeginners.about.com/od/internetglossary/tp/The-Top-Text-Message-Acronyms-of-2011.htm
 BTW By the way
FYI for your information
IMHO in my humble opinion
LOL laugh out loud
RT*M read the * manual (clean version!)
http://en.wikipedia.org/wiki/List_of_emoticons

web standard 웹표준
http://zzomen.tistory.com/165
browser display
http://www.w3schools.com/browsers/browsers_display.asp

72 dpi
image format
http://www.1stwebdesigner.com/design/different-image-formats/

screen resizing
http://commandogroup.no/


Hosts and hosting
cafe24.com dothome
FTP: Uploading and downloading
file transfer protocol

domains 
who is http://who.is/
http://www.uniqlo.com/uk/

Milan-based design studio
http://graphicsafari.blogspot.kr/

browser capability
http://browsershots.org/

http://www.blinkart.co.uk/index.php#!artist_showall

나눔글꼴 웹폰트 적용하기
http://dr-choi.kr/archives/4615
http://fontface.kr/






닷홈의 무료호스팅

http://dothome.co.kr/web/free/index_3.php

워드프레스 설치를 선택


http://neofuture.dothome.co.kr/wordpress/wp-admin/


자신이 원하는 워드프레스 테마를 다운로드 받은 후 

/html/wordpress/wp-content/themes

ftp를 이용해서 위의 디렉토리 themes라는 폴더에 복사해 넣는다. 


http://www.dessign.net/simple-photo-responsive-theme/

오늘 수업시간에 보여줬던 워드프레스 테마


http://api.mobilis.co.kr/webfonts/font_usage.html?fontface=NanumGothicWeb

어드민 페이지의 스타일시트 (style.css) 에서 body 부분에 다음의 빨간색 부분만 추가해서 넣으면 됨


@import url('http://api.mobilis.co.kr/webfonts/css/?fontface=NanumGothicWeb');

body { font-size: 12px; font-family: verdana, arial, NanumGothicWeb ;  color: #444;  }


스타일 시트 쓰는 방법은 여기서 볼것 

http://www.w3schools.com/css/


http://filezilla-project.org/download.php?type=client


http://help.cafe24.com/cs/cs_faq_view.php?idx=467

구글에서 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 로 검색하면 됨

이미지 누르며 해당 윈도우에서 이미지창이 뜨면서 크게 볼수 있는것

http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/different-elements.html

http://webcssjquery.wordpress.com/2012/05/23/free-jquery-images-light-box-gallery/

 

풍선말이 뜨는것

http://www.maxvergelli.com/docs/jquery-bubble-popup-examples/different-elements.html

반응형 웹으로 만들어진 워드프레스 포트폴리오용 무료 테마들

free Responsive WordPress Themes 


http://www.dessign.net/

unique-theme-responsive-wp

어떤때 어떤 이미지 포맷 종류를 써야 할까?


GIF :

일러같은데서 단순한 색을 이용하여 일러스트를 그린경우

비교적 단순한 아이콘, 로고 텍스트를 그림으로 저장할때


JPG:

투명한 이미지가 없는 사진같은 화일을 저장할때 쓰임


PNG : 복잡한 이미지, 또는 그림자가 있는 형태의 이미지를 저장할때

알파채널(투명)을 전부 살릴때 이용 => 포토샵에서 PNG 24로 저장. 투명 옵션 체크

자동으로 video tag 를 생성해주는 빌더


캡션 기능을 넣을 수 있습니다.


HMTL5 Video Tag Builder

http://videojs.com/tag-builder/




http://speckyboy.com/2011/12/29/our-50-favorite-web-designs-from-2011/




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-wordpress-themes-2011-edition/
http://www.the-girl-store.org/


코딩을 하는데 완전 좋을 사이트를 찾았습니다.
이번 인터렉티브 미디어 수업에 활용할 예정입니다.

http://opentutorials.org/course/1

완전 좋습니다. 웹코딩을 체계적으로 배우실수 있는 아주 좋은 기회!
게다가 오픈교육 컨텐츠로 누구나 참여해서 함께 할수 있어서 더 좋은것 같습니다.

CCK 살롱 기획단의 메일을 읽다가 발견했습니다.
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/
이 박스를 라운드로 보이게 하려면  Firefox, Safari/Chrome, Opera,  IE9를 이용하여 보셔야 합니다.


http://www.cre8ivecommando.com/how-to-create-css-only-buttons-9243/

이건 HTML 부분에 들어가는 부분으로 그냥 링크만 거시면 됩니다.

<a href="#"  class="btn"><span>I'm a Button!</span></a>


이부분은 CSS로  head 부분이나 external css 화일에 삽입하시면 됩니다.
<style>

/* Button */
a.btn{text-decoration:none; border:#BBB 1px solid; color:#5f5e5e; display:block; float:left; padding:12px 15px; margin-right:10px; cursor:pointer;}
a:hover.btn{text-decoration:none; background:#FFF;}

/* Rounded Corners */
.rounded, a.btn{
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
-khtml-border-radius: 6px;
}
 
/* Drop Shadow */
.shadow, a.btn{
-moz-box-shadow: 0px 1px 3px #AAA;
-webkit-box-shadow: 0px 1px 3px #AAA;
box-shadow: 0px 1px 3px #AAA;
}

/* Default Grey Gradient */
.gradient, a.btn{
background: #FFF; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #FFF,  #DDD); /* for firefox 3.6+ */
}
</style>




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 corners are created with a similar rule, only using the :after pseudo element:


.rounded:after {
display: block;
line-height: 0.1;
font-size: 1px;
content: url(bottom-left.png);
margin: 0 0 -1px 0;
height: 30px;
background: white;
background: transparent url(bottom-right.png) scroll no-repeat bottom right ;
padding: 0;
------------------------------------------------------


http://www.devwebpro.com/25-rounded-corners-techniques-with-css/

ThrashBox – create rounded-corner boxes with visual flare and the absolute minimal amount of semantically correct markup.

http://www.vertexwerks.com/tests/sidebox/

Even More Rounded Corners With CSS – nice technique with fluid rounded corner dialogs and support for borders, alpha transparency throughout, gradients and patterns.
Even More Rounded Corners With CSS

DomCorners – a very simple technique for getting rounded corners.
DomCorners

virtuelvis.com Rounded corners in CSS – allow you to retrofit this to existing designs without altering any markup.
Rounded corners in CSS

Transparent custom corners and borders version 2 – a technique for creating custom corners and borders with optional alpha transparency.
Transparent custom corners and borders version 2

CSS Teaser Box with rounded corners – by Roger Johansson, the same author of Transparent custom corners and borders version 2.
CSS Teaser Box

News List – was designed to display links to recent news.
news list

CSS Liquid Round Corners – a re-usable rounded box, note that it needs total 6 images for wrap the corners.
CSS Liquid Round Corners

Anti-aliased Nifty Corners – based on Nifty Corners and modified by Steven Wittens.
Anti-aliased Nifty Corners

Simple Box by tedd – another simple rounded corners.
Simple Box by tedd

CSS and round corners making accessible menu tabs – decent rounded corners style menu tabs technique.
CSS and round corners Making accessible menu tabs

CSS and round corners borders with curves – make a rounded corners borders with curves.
CSS and round corners Borders with curves

Airtight Corners – produce a box with rounded corners using only one image, and off-setting that image for each corner.
Airtight Corners

Mountaintop Corners – easier way for creating decent rounded corners.
Mountaintop Corners

Editsite Rounded Corners – need a javascript to create the corners.
http://www.editsite.net/blog/rounded_corners.html

Create a rounded block or design with CSS and XHTML – easily create a rounded block.
Create a rounded block or design with CSS and XHTML

Resizable box with freely stylable corners and surface – re sizable rounded corners box.
Resizable box with freely stylable corners and surface

Smart Round Corners – a practical solution to uses small images for markup the corners.
Smart Round Corners

Lean and Clean CSS boxes – need 2 images to wrap the header and box.
http://www.tjkdesign.com/articles/roundbox.asp

Broader Border Corners – a quick and easy recipe for turning those single-pixel borders.
Broader Border Corners

Snazzy Borders – based on Nifty Corners By Alessandro Fulciniti
Snazzy Borders

Rounded corners in CSS by Adam Kalsey – requires 4 corners images.
Rounded corners in CSS by Adam Kalsey

curvyCorners – a free JavaScript program that will create on-the-fly rounded corners for any HTML DIV element, that look as good as any graphically created corners.
curvyCorners

Nifty Corners – a solution based on CSS and Javascript to get rounded corners.
Nifty Corners

quinncrowley.com – based upon a combination of pixy and Kalsey
http://www.quinncrowley.com/rounded.htm


  1. moncler outlet 2013.01.04 12:29

    Isra, http://www.moncleroutletespain.com/ moncler outlet?l disait en 2008 à des diplomates américains que son objectif était de maintenirl'économie de la bande de Gaza "au bord de l'effondrement", http://www.moncleroutletespain.com/ moncler chaquetas, selon un télégramme diplomatique américain que s'est procuré WikiLeaks, http://www.moncleroutletespain.com/ moncler españa.Related articles:


    http://sejin90.tistory.com/302 http://sejin90.tistory.com/302

    http://hokorea.tistory.com/580 http://hokorea.tistory.com/580


http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced



<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

 

Ex_Files_Adapt_Sites.zip
플래시 대신에 html 5, css, java script를 이용하여 에니메이션과 인터렉션을 만들어주는 툴
간단한 에니메이션에 쓸수 있습니다.
http://labs.adobe.com/technologies/edge/

초보자 가이드
http://www.adobe.com/devnet/edge/articles/guide-to-edge.html

린다닷컴 간단 투토리얼
http://www.lynda.com/Edge-Beta-tutorials/Edge-First-Look/89044-2.html




DIV 중앙정렬 완벽 해결법

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

<div id="align"> 
<div id="content"> 
내용  
</div> 
</div>

html에서 이렇게 하고 여기에 들어가는 css에서 다음과 같이 코딩합니다. 코드를 볼 때 이해가 가시면 이미 css초보는 면하신 것.
#align {  
width:100%;  
text-align:center;  
}   
 
#content {  
margin:0 auto; /*위에서 센터로 놨음에도 또 이걸 해 주는 건 IE외의 다른 브라우저에선 이게 없으면 다시 왼쪽으로 붙기 때문이에요*/ 
width:750px; /*이건 임의값입니다. 쓰실 데로 수정하세요*/ 
text-align:left;  
}

[출처] DIV 중앙정렬 완벽 해결법|작성자 zazac


 

OutLine이라는 클래스를 가진 DIV안에 Div가운데 정렬 시키기

 

- 소스

 <div class="OutLine">
   <div class="contents">
     <img src="http://static.naver.com/www/u/2010/0611/nmms_215646753.gif">
   </div>
</div>

 

 

 

CSS설정

 .OutLine{
 border:2px solid #ff6600;
 width:1000px;
 text-align:center;
 padding:50px;
}

.contents{
 border:2px solid #ff6600;
 width:500px;
 text-align:left;
 display:inline-block;

 _display:inline;
 _zoom:1;
}

 

IE6,7에서 inner DIv의 위치를 전달하기 위한 Hack 

 _display:inline;
 _zoom:1;

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 가로 사이즈에 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/
사용 설명 동영상


오픈지식강의 v23 드림위버 Dreamweaver CS5.5 활용기-1 ~ HTML5, CSS3, jQuery, Widget Browser from Jungle Communications Co.,Ltd. on Vimeo.



wire frame 완성해 올것 
http://www.vcarrer.com/2010/06/iphone-grid-system.html


파르소나, 시나리오 스토리보드 완성 못 한사람 완성할것

css div 에 대한 설명 
http://www.w3schools.com/css/css_grouping_nesting.asp

네비게이션 바 
http://www.w3schools.com/css/css_navbar.asp

 
  1. 이정민 2011.11.14 23:14

    0912968 이정민
    http://blog.naver.com/janice1023/110123991498

  2. 0912931 김다희 2011.11.15 10:05

    0912931 김다희
    wire frame
    http://blog.naver.com/kimdaahee/90128672466

    persona
    http://blog.naver.com/kimdaahee/90128677523

  3. 최예지 2011.11.15 14:03

    http://blog.naver.com/woobigirl76/110123976143

  4. 신혜윤 2011.11.15 14:12

    http://artgirin.egloos.com/1041335

  5. 김소정 2011.11.15 14:15

    http://visualsojeanne.wordpress.com/2011/11/14/personasscenariowireframe/

  6. 송지현 2011.11.15 14:23

    http://blog.naver.com/naym_naymi/100143394137

  7. 배민경 2011.11.15 14:32

    http://blog.naver.com/bmk1218/

  8. 문하윤 2011.11.15 14:47

    http://blog.naver.com/alessialuna/100143398232

  9. 김유경 2011.11.15 16:38

    http://kimyu217.blogspot.com/2011/11/wire-frame.html

  10. 유희경 2011.12.06 06:10

    http://blog.naver.com/medeiahk/40145262559

A new standard resolution: 240x320.

Article Source: http://EzineArticles.com/4150386

http://www.hongkiat.com/blog/mobile-web-design/
웨이백 머신
다는 아니더라도 어느 정도의 과거 사이트를 볼수 있습니다.
http://www.archive.org/web/web.php
자세한 내용은 아래 페이지에서 보시길...

:: Take me back - 옛날 홈페이지 검색해 보자



http://yoast.com/social-buttons/

+ Recent posts