Search Results for '프로그래밍/css & html'


8 posts related to '프로그래밍/css & html'

  1. 2017/02/20 INPUT TYPE
  2. 2011/05/14 HTML5 Tip & Tech (5) - Web Forms in Cross Browser
  3. 2010/09/02 [스타일시스] 글자 줄바꿈과 줄바꿈 금지
  4. 2010/08/18 추천 css 압축기
  5. 2010/08/18 CSS 프레임워크를 이용한 홈페이지 디자인
  6. 2010/08/18 [CSS] 레이어 중앙으로 정렬
  7. 2010/03/30 몇몇 CSS3 테크닉
  8. 2009/05/13 Reset.css by Eric Meyer 1

 Type

 상태

 데이터 타입

 컨트롤 타입

 hidden

 숨김

 임의의 문자열 

 n/a 

 text 

 텍스트

 줄바꿈 없는 텍스트 

 텍스트 필드 

 search 

 검색 

 줄바꿈 없는 텍스트 

 검색 필드 

 tel  

 전화번호 

 줄바꿈 없는 텍스트  

 텍스트 필드 

 url  

 URL 

 절대 IRI

 텍스트 필드 

 email

 이메일 

 이메일 주소 or 이메일 주소 리스트 

 텍스트 필드

 password

 비밀번호 

 줄바꿈 없는 텍스트 

 데이터 입력이 나타나지 않는 텍스트 필드 

 datetime  

 날짜와 시각 

 UTC 날짜와 시각 

 날짜와 시각 컨트롤 

 date 

 날짜  

 시간대 없는 날짜 

 날짜 컨트롤 

 month 

 달 

 시간대 없는 년과 달 

 달 컨트롤

 week 

 주 

 시간대 없는 주 번호 

 주 컨트롤 

 time 

 시각 

 시간대 없는 시각 

 시각 컨트롤 

 datetimelocal 

 로컬 날짜와 시각 

 시간대 없는 날짜와 시각 

 날짜와 시각 컨트롤 

 number 

 숫자 

 숫자 값 

 텍스트 or 스피너 컨트롤 

 range 

 범위 

 숫자 값 or 정확한 숫자가 필요없는 의미상의 값

 슬라이더 컨트롤

 color 

 색 

 8-bit 적녹형 sRGB컬러  

 컬러 웰

 checkbox 

 체크박스 

 이미 설정된 리스트 값의 0 or 다른 값 

 체크박스 

 radio 

 라디오 버튼 

 지정된 값 

 라디오 버튼 

 file 

 파일 입력창 

 MIME type과 파일명이 있는 파일 목록 

 레이블과 버튼 

 submit  

 전송 버튼 

 폼 서식을 전송하는 지정된 값 

 버튼  

 image 

 이미지 버튼 

 폼 서식을 전송하는 이미지 좌표 값 

 클릭 가능한 이미지 or 버튼 

 reset 

 리셋 버튼  

-

 버튼  

 button 

 버튼 

 -  

 버튼 

 

출처: http://slreference.tistory.com/7 [reference]
2017/02/20 03:19 2017/02/20 03:19
--------------------------------------------------------------------------------------------------------


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

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, 단일/다중 선택, 단일/다중 드래그 예제                                       
2011/05/14 06:06 2011/05/14 06:06
[스타일시스] 글자 줄바꿈과 줄바꿈 금지

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

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>
2010/09/02 18:13 2010/09/02 18:13
외국 사이트는 다들 한글이 깨지더군요..
열심히 찾다가 찾은 보배같은 사이트!
여기 정말 좋은 것 같아요. 자기 용도에 맞게 설정도 할 수 있고..
http://cleancss.com/
2010/08/18 21:05 2010/08/18 21:05
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 참조
2010/08/18 21:04 2010/08/18 21:04
레이어를 화면 중앙으로 정렬시키는 간단한 소스,,

<div style="position: absolute; left: expression(document.body.clientWidth/2 - this.clientWidth/2);    top: expression(document.body.clientHeight/2 - this.clientHeight/2);">
</div>

하지만, IE 전용이라는거;
2010/08/18 20:56 2010/08/18 20:56
많은 브라우져에서 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;

2010/03/30 01:13 2010/03/30 01:13

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

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. }
2009/05/13 12:15 2009/05/13 12:15