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/






posted by jisunlee

닷홈의 무료호스팅

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

posted by jisunlee

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

구글에서 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

posted by jisunlee

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

free Responsive WordPress Themes 


http://www.dessign.net/

unique-theme-responsive-wp

posted by jisunlee

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


GIF :

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

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


JPG:

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


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

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

posted by jisunlee

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


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


HMTL5 Video Tag Builder

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




posted by jisunlee

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

posted by jisunlee


posted by jisunlee

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/
posted by jisunlee
http://www.the-girl-store.org/


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

http://opentutorials.org/course/1

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

CCK 살롱 기획단의 메일을 읽다가 발견했습니다.
posted by jisunlee
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/
posted by jisunlee
이 박스를 라운드로 보이게 하려면  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>




posted by jisunlee
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


posted by jisunlee


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>

 

posted by jisunlee

CSS core 투토리얼 화일

2011.11.29 17:49

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

Ex_Files_Adapt_Sites.zip
posted by jisunlee
플래시 대신에 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
posted by jisunlee

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.



posted by jisunlee

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;

posted by jisunlee

보호되어있는 글입니다.
내용을 보시려면 비밀번호를 입력해주세요.

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화일을 첨부하니 참고바랍니다.




posted by jisunlee
최근에는 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/
사용 설명 동영상


posted by jisunlee
posted by jisunlee
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

 
posted by jisunlee
A new standard resolution: 240x320.

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

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

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


posted by jisunlee

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

posted by jisunlee