'HTML'에 해당되는 글 12건

  1. 2016.07.08 이미지에서 색상 추출 샘플
  2. 2015.12.22 window.open 팝업창 중앙에 보이기
  3. 2015.09.21 input text or textarea 한글 or 영어 기본 세팅하기
  4. 2015.09.09 터치슬라이드 참고2
  5. 2015.09.09 슬라이드 배너- 터치슬라이드 참고
  6. 2015.02.16 테이블 사이즈 고정
  7. 2014.09.12 웹표준에서 table height 100% 적용 안되는 경우 해결법 입니다.
  8. 2014.02.18 opacity IE 6 ~ 8 대비용
  9. 2014.02.13 자바스크립트로 class 지정 바꾸기
  10. 2013.12.06 readOnly 만 스타일적용
  11. 2011.10.12 웹인쇄 - 인쇄시 Page 나누기
  12. 2010.01.29 ASP 에서의 삼항 연산자.

이미지에서 색상 추출 샘플

|

이미지에서 색상 추출 샘플

 

http://lokeshdhakar.com/projects/color-thief/

 

And

window.open 팝업창 중앙에 보이기

|

전용뷰어 보기

window.open 팝업창 중앙에 보이기

 

window.open(
         팝업url,
        "팝업창이름",
        "width="+w+",height="+h+",top="+TopPosition+",left="+LeftPosition+", scrollbars=no");

 

 

var w = 880;
var h = 580;
  
var LeftPosition = (screen.width - w) / 2 ;
var TopPosition = (screen.height - h) / 2 ;
 
window.open("fileList.do?,"filePop","width="+w+",height="+h+",top="+TopPosition+",left="+LeftPosition+", scrollbars=yes");}

 

And

input text or textarea 한글 or 영어 기본 세팅하기

|

input text or textarea 에 입력시 style을 통해 간단하게 기본 입력 언어를 설정 할 수 있다.

 

============================================= Example ==========================================

input text : <input type="text" style="ime-mode:active" /> //한글 기본 세팅

textarea : <textarea style="ime-mode:active" ></textarea> //한글 기본 세팅

 

[ime-mode 속성]

1. auto : 한/영전화

2. active : 한글기본, 한/영전화

3. inactiva : 영문기본, 한/영전환

4. disabled : 영문기본, 한/영전화 안됨

 

And

터치슬라이드 참고2

|

http://dohoons.com/test/flick/

 

 

 

Flick Navigation_files.zip

 

 

 

 

And

슬라이드 배너- 터치슬라이드 참고

|

http://owlgraphic.com/owlcarousel/demos/images.html

 

  1.   <script type="text/javascript">
  2.   <!--
  3. $(document).ready(function() {
  4.  
  5.   $("#owl-demo").owlCarousel({
  6.  
  7.       autoPlay: 3000, //Set AutoPlay to 3 seconds
  8.  
  9.       items : 4,
  10.       itemsDesktop : [1199,3],
  11.       itemsDesktopSmall : [979,3]
  12.  
  13.   });
  14.  
  15. });
  16.   //-->
  17.   </script>
  18. <style>
  19. #owl-demo .item{
  20.   margin: 3px;
  21. }
  22. #owl-demo .item img{
  23.   display: block;
  24.   width: 100%;
  25.   height: auto;
  26. }
  27. </style>
  28. <div id="owl-demo">

     

     

  29.          
  30.   <div class="item"><img src="assets/owl1.jpg" alt="Owl Image"></div>
  31.   <div class="item"><img src="assets/owl2.jpg" alt="Owl Image"></div>
  32.   <div class="item"><img src="assets/owl3.jpg" alt="Owl Image"></div>
  33.   <div class="item"><img src="assets/owl4.jpg" alt="Owl Image"></div>
  34.   <div class="item"><img src="assets/owl5.jpg" alt="Owl Image"></div>
  35.   <div class="item"><img src="assets/owl6.jpg" alt="Owl Image"></div>
  36.   <div class="item"><img src="assets/owl7.jpg" alt="Owl Image"></div>
  37.   <div class="item"><img src="assets/owl8.jpg" alt="Owl Image"></div>
  38.  
  39. </div>

 

 

 

owl.carousel.zip

 

     

     

    And

    테이블 사이즈 고정

    |

    ## 테이블 고정

    width=500 style="table-layout: fixed"

     

    ## TD 고정

    width=100 style="word-break:break-all"

    And

    웹표준에서 table height 100% 적용 안되는 경우 해결법 입니다.

    |

    퍼옴 : http://gameqa.tistory.com/171

     

    웹표준에 맞춰 작업을 하다가 

    table 에서 height 100% 적용안되는 경우가 있어 해결법을 올려둡니다.




    원인은... 웹표준에서 table 사용시 height 값을 바로 가져오지 못하기 때문입니다.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


    쉬운 방법은, 위 문장을 아래와 같이 변경하는 것입니다. (XHTML 1.0 을 HTML 4.01 로 변경하는게 핵심)


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




    그런데, 이 방법은 XHTML 1.0 을 HTML 4.01 로 바꾸는 것이기 때문에,

    XHTML 을 사용하고자 하는 경우에는 다른 방법을 사용해야 합니다.



    우선, CSS 에 다음 내용을 추가 합니다.


    html, body, #fullheight {

    height:100%;

    }



    그리고, table 에서 사용할 때는, 아래와 같이 div 안에 넣어주면 됩니다.


    <div id="fullheight">

    <table width=100% id="fullheight">

    <tr><td>...</td></tr>

    </table>

    </div>



    이렇게 하면, body 와 div 를 거쳐 height 값을 가져올 수 있기 때문에,

    table 에서 height 100% 를 적용할 수 있게 됩니다.



    html 4.01 관련한 설명은 아래 링크를 참고하세요. (링크에 div 관련 설명은 안나옵니다)

    http://www.apptools.com/examples/tableheight.php

     

    And

    opacity IE 6 ~ 8 대비용

    |

    <!--[if lte IE 8]>
    .target {background:transparent; filter: progid:DXImageTransform.Microsoft.gradient(starColorstr=#80FFFFFF,endColorstr=#80FFFFFF); zoom:1;}
    <![endif]-->

     

    *opacity 는 IE 9, 크롬, 사파리, 오페라, 파이어폭스에서 적용 가능하다.

    IE6~8버전에서는 이를 지원하지 않으나 filter를 통해서 비슷한 스타일 적용이 가능하다.


    transparent8{zoom:1; /* ie 6,7,8 bug fix */ filter:alpha(opacity=80); opacity:0.8; }
    filter의 값은 0 ~ 100 값을 가지며 opacity는 0 ~ 1 까지의 값을 가진다.

     

    [출처] opacity IE 6 ~ 8 대비용 |작성자 써니

    And

    자바스크립트로 class 지정 바꾸기

    |

     document.all.Divsubmenu[i].className='menuclick';

    And

    readOnly 만 스타일적용

    |
    background-color:expression((this.readOnly)?'#EAEAEA':'');
    And

    웹인쇄 - 인쇄시 Page 나누기

    |

    1.데모
    http://www.ihelpers.co.kr/programming/css/print.html

    2.소스

    <STYLE TYPE="text/css">
    <!-- .break {page-break-before: always;} -->
    </STYLE>
    And

    ASP 에서의 삼항 연산자.

    |


    ASP 에서의 삼항 연산자.
    Dim str = [비교조건식] ? [비교조건식이 true 일 경우 값] : [비교조건식이 false일 경우 값]
    삼항 연산자는 다음과 같은 형태로 if~ then을 사용하지 않고 비교해서 값을 넣어 줄 수 있는
    편리한 도구이다.
     
    하지만 VBscript 에서는 작동하지 않고 Jscript 에서만 작동이 된다.
     
    <%@ codepage="65001" language="VBScript" %> (X)
    <%@ codepage="65001" language="JScript" %> (O)
     
    language 부분을 JScript로 바꾸어 주어야 ASP 에서도 사용 할 수 있다
    [출처] 각종 연산자.|작성자 마력의돌
    And
    prev | 1 | next