영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

--------------------------------------------------------------------------------------------------------


-> 아래에 링크되어 있는 예제는 모든 브라우저에서 작동합니다.

http://test.inpost.kr/HTML5/webforms/all/


-> 관련 강좌 링크

http://blog.naver.com/seogi1004/110095812775 - HTML5 Tip & Tech (1), 기초
http://blog.naver.com/seogi1004/110096142093 - HTML5 Tip & Tech (2), Drag & Drop
http://blog.naver.com/seogi1004/110096740941 - HTML5 Tip & Tech (3), Web Database
http://blog.naver.com/seogi1004/110098886402 - HTML5 Tip & Tech (4), Server Push
http://blog.naver.com/seogi1004/110102214238 - HTML5 Tip & Tech (5), Web Forms in Cross Browser


-> 그 밖에 강좌 링크

http://blog.naver.com/seogi1004/110076487990 - jQuery Tip & Tech (1), 로그인 관련
http://blog.naver.com/seogi1004/110077362488 - jQuery Tip & Tech (2), 게시판 관련
http://blog.naver.com/seogi1004/110078033946 - jQuery Tip & Tech (3), ColorPicker
http://blog.naver.com/seogi1004/110079860750 - jQuery Tip & Tech (4), 셀렉터 & 함수 정리
http://blog.naver.com/seogi1004/110082954783 - jQuery Tip & Tech (5), 이미지 뷰어 만들기, Event 정리
http://blog.naver.com/seogi1004/110083474040 - jQuery Tip & Tech (6), $.유틸리티 속성과 함수
http://blog.naver.com/seogi1004/110093166911 - jQuery Tip & Tech (7), 확장 메소드 구현하기
http://blog.naver.com/seogi1004/110092043282 - jQuery Tip & Tech, TableSort 플러그인 소개
http://blog.naver.com/seogi1004/110078561970 - jQuery Tip & Tech, 단일/다중 선택, 단일/다중 드래그 예제                                       

[스타일시스] 글자 줄바꿈과 줄바꿈 금지

테이블 안에 영문글을 쓸때 줄바꿈이 되지 않아 당황한 적이 있을 것입니다.
이때 간단히 스타일시스를 적용하면 됩니다.

1. 우선 강제로 줄바꿈(영문이 줄바꿈 되지 않을때)
글자하나하나를 인식하여 줄바꿈을 합니다.
<table width="300">
<tr>
<td width="50%" style="word-break:break-all">YesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForums</td>
<td width="50%">YesYo.comMintStateForumsYesYo.comMintStateForums</td>
</tr>
</table>

2. 줄바꿈 금지
<table width="300">
<tr>
<td width="50%" nowrap>YesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.com</td>
<td width="50%">YesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForumsYesYo.comMintStateForums</td>
</tr>
</table>

외국 사이트는 다들 한글이 깨지더군요..
열심히 찾다가 찾은 보배같은 사이트!
여기 정말 좋은 것 같아요. 자기 용도에 맞게 설정도 할 수 있고..
http://cleancss.com/

http://ikspres.com/pages/1463774

css 를 이용해 레이아웃을 잡기위한 삽질을 줄여주는 프레임워크들이 있습니다.
http://nettuts.com/html-css-techniques/which-css-grid-framework-should-you-use-for-web-design/

위 링크에 가보면 css 프레임워크 종류 및 소개가 있습니다.

http://www.blueprintcss.org/
그중 blueprintcss를 추천합니다.

자세한건 구글신께;;

http://www.google.co.kr/search?hl=ko&client=firefox-a&rls=org.mozilla%3Ako%3Aofficial&hs=52g&newwindow=1&q=blueprintcss&btnG=%EA%B2%80%EC%83%89&lr=lang_ko&aq=f&oq=

기본 사용법 링크1 참조

레이어를 화면 중앙으로 정렬시키는 간단한 소스,,


하지만, IE 전용이라는거;

많은 브라우져에서 CSS를 지원하고 있으나 아직 몇몇 완전히 지원되지 않는 브라우져가 있기 때문에 특정 CSS들은 브라우져에 따라 적용할 수 있도록 머리 단어가 붙는데 그 머리 단어는 다음과 같다.

• 모질라/파이어폭스/게코(Gekko) : -moz-
• Webkit(사파리/크롬) : -webkit- (주: 몇몇 기능들은 사파리에서만 작동하는 것도 있다. 크롬은 사파리보다 더 완전하게 지원하지 않는다)

 인터넷 익스플로러는 CSS3를 제대로 지원하지 않는다.

- 그림자 표시하기

box-shadow : #333 3px 3px 4px;
-moz-box-shadow : #333 3px 3px 4px;
-webkit-box-shadow : #333 3px 3px 4px;

요즘 부쩍 표준에 관심이 있으신거 같아서 팁으로 올려봅니다.

css를 초기화시켜주는 css입니다.

1. /* v1.0 | 20080212 */
2. html, body, div, span, applet, object, iframe,
3. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
4. a, abbr, acronym, address, big, cite, code,
5. del, dfn, em, font, img, ins, kbd, q, s, samp,
6. small, strike, strong, sub, sup, tt, var,
7. b, u, i, center,
8. dl, dt, dd, ol, ul, li,
9. fieldset, form, label, legend,
10. table, caption, tbody, tfoot, thead, tr, th, td {
11.     margin: 0;
12.     padding: 0;
13.     border: 0;
14.     outline: 0;
15.     font-size: 100%;
16.     vertical-align: baseline;
17.     background: transparent;
18. }
19. body {
20.     line-height: 1;
21. }
22. ol, ul {
23.     list-style: none;
24. }
25. blockquote, q {
26.     quotes: none;
27. }
28. blockquote:before, blockquote:after,
29. q:before, q:after {
30.     content: '';
31.     content: none;
32. }
33. /* remember to define focus styles! */
34. :focus {
35.     outline: 0;
36. }
37. /* remember to highlight inserts somehow! */
38. ins {
39.     text-decoration: none;
40. }
41. del {
42.     text-decoration: line-through;
43. }
44. /* tables still need 'cellspacing="0"' in the markup */
45. table {
46.     border-collapse: collapse;
47.     border-spacing: 0;
48. }
49. reset.css