반응형
반응형
반응형

Request 샘플.

 

 

POST /upload HTTP/1.1
content-type: multipart/form-data; boundary=--------------------------968146443668612378265595
content-length: 201783

----------------------------968146443668612378265595
Content-Disposition: form-data; name="upload_file"; filename="test.png"
Content-Type: image/png

[Binary Data]
----------------------------968146443668612378265595
Content-Disposition: form-data; name="userName"

myName
----------------------------968146443668612378265595
Content-Disposition: form-data; name="userAge"

25
----------------------------968146443668612378265595--

 

반응형

'프로그래밍 > Html' 카테고리의 다른 글

찾아보기 버튼 바꾸기  (0) 2016.08.05
simple table (아래 글의 css 적용)  (0) 2015.10.30
simple table css  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
반응형

참조 : http://tiagoe.blogspot.kr/2010/01/css-style-typefile-tags.html



//css

.file_input_textbox

{

 float: left

}


.file_input_div

{

 position: relative; 

 width: 100px; 

 height: 23px; 

 overflow: hidden;

}


.file_input_button

{

 width: 100px; 

 position: absolute; 

 top: 0px;

 background-color: #33BB00;

 color: #FFFFFF;

 border-style: solid;

}


.file_input_hidden

{

 font-size: 45px; 

 position: absolute; 

 right: 0px; 

 top: 0px; 

 opacity: 0; 

 

 filter: alpha(opacity=0); 

 -ms-filter: "alpha(opacity=0)"; 

 -khtml-opacity: 0; 

 -moz-opacity: 0;

}





// html

<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">

 

<div class="file_input_div">

  <input type="button" value="Search files" class="file_input_button" />

  <input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />

</div>



반응형

'프로그래밍 > Html' 카테고리의 다른 글

multipart form data  (0) 2019.08.13
simple table (아래 글의 css 적용)  (0) 2015.10.30
simple table css  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
반응형



<html>

<head>

<title>Simple Table</title>

<LINK href="./simple.css" rel="stylesheet" type="text/css">

</head>

<body>


<div id="body_content">

<h1>

Title.

</h1>


<table class="reference">

<tr>

<td>col1</td>

<td>col2</td>

<td>col3</td>

<td>col4</td>

<td>md5</td>

<td>col5</td>

<td>col6</td>

</tr>


<tr>

<td>1111</td>

<td>2222</td>

<td>3333</td>

<td>4444</td>

<td>5555</td>

<td>6666</td>

<td>7777</td>

<tr>

</table>


</div>


</body>

</html>



반응형

'프로그래밍 > Html' 카테고리의 다른 글

multipart form data  (0) 2019.08.13
찾아보기 버튼 바꾸기  (0) 2016.08.05
simple table css  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
반응형



        body{

                background: #eee url(https://t1.daumcdn.net/cfile/tistory/246AE03C56E663212D"s2">;

                font: 13px 'trebuchet MS', Arial, Helvetica;

        }


        h2, p {

                text-align: center;

                color: #444;

                text-shadow: 0 1px 0 #fff;

        }


        #body_content {

                width: 960px;

                margin: auto;

        }


        table {

                font-size:100%;

                border-spacing: 0;

                width: 960;

                background-color:#f5f5f5;

        }


        table.reference {

                border: solid #ccc 1px;

                -moz-border-radius: 6px;

                -webkit-border-radius: 6px;

                border-radius: 6px;

                -webkit-box-shadow: 0 1px 1px #ccc;

                -moz-box-shadow: 0 1px 1px #ccc;

                box-shadow: 0 1px 1px #ccc;

        }


        .reference td, .reference th {

                border-left: 1px solid #ccc;

                border-top: 1px solid #ccc;

        }


        .reference td {

                padding: 3px;

                text-align: left;

        }


        .reference td:first-child, .reference th:first-child {

                border-left: none;

        }


        .reference th {

                padding: 5px;

                text-align: center;

                background-color: #eee;

                background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));

                background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);

                background-image:    -moz-linear-gradient(top, #f5f5f5, #eee);

                background-image:     -ms-linear-gradient(top, #f5f5f5, #eee);

                background-image:      -o-linear-gradient(top, #f5f5f5, #eee);

                background-image:         linear-gradient(top, #f5f5f5, #eee);

                -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

                -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;

                box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;

                border-top: none;

                text-shadow: 0 1px 0 rgba(255,255,255,.5);

        }


        .reference th:first-child {

                -moz-border-radius: 6px 0 0 0;

                -webkit-border-radius: 6px 0 0 0;

                border-radius: 6px 0 0 0;

        }


        .reference th:last-child {

                -moz-border-radius: 0 6px 0 0;

                -webkit-border-radius: 0 6px 0 0;

                border-radius: 0 6px 0 0;

        }


        .reference th:only-child {

                -moz-border-radius: 6px 6px 0 0;

                -webkit-border-radius: 6px 6px 0 0;

                border-radius: 6px 6px 0 0;

        }


        .reference tr:last-child td:first-child {

                -moz-border-radius: 0 0 0 6px;

                -webkit-border-radius: 0 0 0 6px;

                border-radius: 0 0 0 6px;

        }


        .reference tr:last-child td:last-child {

                -moz-border-radius: 0 0 6px 0;

                -webkit-border-radius: 0 0 6px 0;

                border-radius: 0 0 6px 0;

        }



반응형

'프로그래밍 > Html' 카테고리의 다른 글

찾아보기 버튼 바꾸기  (0) 2016.08.05
simple table (아래 글의 css 적용)  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
태그의 attribute 값 가져오기, 설정하기.  (0) 2013.02.25
반응형



<!doctype html> 

<html lang="ko">

<head>

<meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi" />


<script type="text/javascript" src="/resources/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript">

//<![CDATA[


var isIPHONE = (navigator.userAgent.match('iPhone') != null || navigator.userAgent.match('iPod') != null);

var isIPAD = (navigator.userAgent.match('iPad') != null);

var isANDROID = (navigator.userAgent.match('Android') != null);


var _APP_INSTALL_URL_IOS = "http://itunes.apple.com/kr/app/id393499958?mt=8";

var _APP_INSTALL_URL_ANDROID = "http://m.androidapp.naver.com/naverapp";

var _APP_INSTALL_CONFIRM = "네이버앱을 설치하거나\n업데이트하시면\n이용할 수 있습니다.\n설치 하시겠습니까?";


function executeApp(url) {

        installApp();


        if (isIPHONE || isIPAD) {

                window.location.href = url;

        } else if (isANDROID) {

                $('applinkDiv').innerHTML = '<iframe src="' + url + '" width="0" height="0" frameborder="0"></iframe>';

                setTimeout(function(){

                        var b = $('applinkDiv');

                        var c = b.getElementsByTagName('iframe');

                        if (c.length > 0) { b.removeChild(c[0]); }

                }, 1000);

        }

}


 


function installApp() {

        var b = new Date();

        setTimeout(function(){

                if (new Date() - b < 1500) {

                        if (isIPHONE || isIPAD) {

                                if (confirm(_APP_INSTALL_CONFIRM)) { window.location.href = _APP_INSTALL_URL_IOS; }

                        } else if (isANDROID) {

                                if (confirm(_APP_INSTALL_CONFIRM)) { window.location.href = _APP_INSTALL_URL_ADROID; }

                        }

                }

        }, 500);

}


//]]>

</script>

</head>

<body>


 


<a href="naversearchapp://" onclick="executeApp(this.href);return false;">네이버앱 실행</a><br />


<div id="applinkDiv"></div>


</body>

</html>



반응형

'프로그래밍 > Html' 카테고리의 다른 글

simple table (아래 글의 css 적용)  (0) 2015.10.30
simple table css  (0) 2015.10.30
모바일 웹  (0) 2014.03.24
태그의 attribute 값 가져오기, 설정하기.  (0) 2013.02.25
html 특수 문자.  (2) 2011.05.30
반응형


아이폰4가 DPI 가 300 이 넘는다.

아이폰4와 아이폰3GS그 이전단계는 해상도가 차이는 나지만 뷰포트는 width 320px로 같다

같은 이미지를 출력해도 3GS에서는 가로기준 이미지 1px당 디스플레이 1px로 일치하지만 아이폰4에서는 이미지에서 1px당 디스플레이에서는 2px이 보여지게 되므로 흐릿한 이미지로 보여지게 된다.

이를 해결하기 위해선 더 높은 해상도의 이미지를 줄여서 보여주면 된다.






<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width, height=device-height" />


 - user-scalable : 사용자가 두손가락으로 확대/축소 가능 여부.

 - 모든 스케일은 1.0으로 맞추고 width값을 device-width로 할경우에 모바일 브라우져의 너비값으로 자동으로 인식




<link rel="apple-touch-icon" href="apple-touch-icon.png" />



 - 홈화면에 추가시 아이콘과 홈화면에서 접속시 로딩화면 이미지

 - PNG파일 사용하면 투명은 검은색으로 처리되고, opacity까지 정확하게 먹는다.

 - 57*57의 아이콘을 권장하나 114px x 114px정도 만들어줘야 아이폰4에서도 선명하게 나온다

 - 반사광을 원하지 않을경우 <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png" />



<meta name="apple-mobile-web-app-capable" content="yes">

 - 홈 화면에 추가 후 실행 시킬 때

 - 사파리툴바 없애기



<link rel="apple-touch-startup-image" href="startup.png" />

 - 처음 구동시 로딩화면

 - startup.png는 320px x 460px이 정확해야 하며 사이즈가 맞지 않으면 저장되지 않는다.



<a href="#" onclick="location.href='http://ojtiger.com/'">오중호랑이의 비밀로긔</a>


 - 앵커태그 사용시 사파리로 점프한다. (온클릭이벤트로 전환)



if (navigator.userAgent.indexOf('iPhone') != -1) {

//if (navigator.userAgent.indexOf('Linux') != -1) {

    addEventListener("load", function() {

    setTimeout(hideURLbar, 0);

    }, false);

}


function hideURLbar() {

    window.scrollTo(0, 1);



 - 주소 표시줄 없애기

 - 로딩이 완료되면 주소표시줄이 숨어버리는것인데 이는 스크롤을 1px내려서 주소표시줄을 숨기는 원리

 - 위 자바스크립트로 구현이 가능하나, 이는 IE에서 스크립트 오류

 - 안드로이드의 브라우져의 navigator.userAgent는 Linux를 포함

 - 내용이 짧아서 주소표시줄이 제대로 올라가지 않으면 메타태그에 height=device-height




var mobileKeyWords = new Array('iPhone', 'iPod', 'BlackBerry', 'Android', 'Windows CE', 'LG', 'MOT', 'SAMSUNG', 'SonyEricsson');

    for (var word in mobileKeyWords){

        if (navigator.userAgent.match(mobileKeyWords[word]) != null){

            location.href = "#";

            break;

            }

    }


 - 모바일 기기 인식 후 모바일 페이지로 이동.




<input type="email" value="email">

<input type="number" value="number">

<input type="url" value="url">

<input type="tel" value="tel">


 - 가상 키보드 종류

 - tel의 경우가 굉장히 편리한 경우이긴 하지만 HTML5와 파이어폭스4이상에 따르면 강제성이 부여 되므로, 두가지 속성을 입력받아야 한다면 반드시 클라이언트별로 분리해 놓는것이 좋겠다.



var slope = 0;

var supportsOrientationChange = "onorientationchange" in window,

orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

    window.addEventListener(orientationEvent, function() {

        if (slope!=window.orientation){

            slope = window.orientation;

                if(slope == 90 || slope == -90) {

                    location.href('#');

                }

        }

}, false);

 - slope변수를 직접 찍어봐두 알겠지만, 정상일때0, 회전일때90, 혹은 반대방향일 경우-90이다.

   (아이폰과 안드로이드가 방향이 다르다)



.loading_div {

    position:absolute;

    top: 50%;

    left: 50%;

    width: 140px;

    height: 180px;

    color:#fff;

    border: 1px solid #ccc;

    background: #162344;

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border: 1px solid #b2b7c2;

    opacity:0.9;

    }


<div class="loading_div" align="center">

        <br />

        <img src="/test/Untitled-1.gif" width="130" height="101" alt="오중호랑이" />

        라운드박스'-'

</div>



 - 라운드 div CSS

 - 웹킷계열(모바일사파리, 안드로이드브라우져 등)과 모질라 파이어폭스에서 지원하는 css를 사용하면 손쉽게 라운드 div를 만들 수 있다



.gra{

-webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255,255,255,0.5))); 

}

<img src="#" class="gra" alt="#" />


 - 이미지 반사 그라데이션 효과도 있다. 아이폰은 완벽히 지원하나 안드로이드(일단은 모토로이)의 경우에는 반사 길이 및 투명효과를 제대로 지원하지 않기에 안드로이드에 대한 처리를 따로해줘야 한다.


반응형

'프로그래밍 > Html' 카테고리의 다른 글

simple table css  (0) 2015.10.30
모바일웹에서 app 설치 확인  (0) 2014.03.24
태그의 attribute 값 가져오기, 설정하기.  (0) 2013.02.25
html 특수 문자.  (2) 2011.05.30
[링크] html 태그 정리.  (0) 2011.05.13
반응형


특정 태그의 class 등의 attribute 변경할 때 사용.


------------------------- 스크립트 -------------------

<script>

                function change_li_class(idx) {

                        var el = document.getElementsByName("user_li");

                        var len = el.length;

                        for(var i=0; i < len; i++) {

                                el[i].setAttribute("class", "off");

                        }


                        el[idx].setAttribute("class", "on");

                }

</script>



---------------------------- html 본문 -----------------------

<li name="user_li">

  <a href="#" onmouseover="change_li_class(0)">

</li>

<li name="user_li">

  <a href="#" onmouseover="change_li_class(1)">

</li>

<li name="user_li">

  <a href="#" onmouseover="change_li_class(2)">

</li>

<li name="user_li">

  <a href="#" onmouseover="change_li_class(3)">

</li>

<li name="user_li">

  <a href="#" onmouseover="change_li_class(4)">

</li>

반응형

'프로그래밍 > Html' 카테고리의 다른 글

모바일웹에서 app 설치 확인  (0) 2014.03.24
모바일 웹  (0) 2014.03.24
html 특수 문자.  (2) 2011.05.30
[링크] html 태그 정리.  (0) 2011.05.13
input file 에 value 이용하기.  (0) 2010.12.02
반응형
Character Entity Decimal Hex Rendering in Your Browser
Entity Decimal Hex
quotation mark = APL quote &quot; &#34; &#x22; " " "
ampersand &amp; &#38; &#x26; & & &
less-than sign &lt; &#60; &#x3C; < < <
greater-than sign &gt; &#62; &#x3E; > > >
Latin capital ligature OE &OElig; &#338; &#x152; Œ Œ Œ
Latin small ligature oe &oelig; &#339; &#x153; œ œ œ
Latin capital letter S with caron &Scaron; &#352; &#x160; Š Š Š
Latin small letter s with caron &scaron; &#353; &#x161; š š š
Latin capital letter Y with diaeresis &Yuml; &#376; &#x178; Ÿ Ÿ Ÿ
modifier letter circumflex accent &circ; &#710; &#x2C6; ˆ ˆ ˆ
small tilde &tilde; &#732; &#x2DC; ˜ ˜ ˜
en space &ensp; &#8194; &#x2002;
em space &emsp; &#8195; &#x2003;
thin space &thinsp; &#8201; &#x2009;
zero width non-joiner &zwnj; &#8204; &#x200C;
zero width joiner &zwj; &#8205; &#x200D;
left-to-right mark &lrm; &#8206; &#x200E;
right-to-left mark &rlm; &#8207; &#x200F;
en dash &ndash; &#8211; &#x2013;
em dash &mdash; &#8212; &#x2014;
left single quotation mark &lsquo; &#8216; &#x2018;
right single quotation mark &rsquo; &#8217; &#x2019;
single low-9 quotation mark &sbquo; &#8218; &#x201A;
left double quotation mark &ldquo; &#8220; &#x201C;
right double quotation mark &rdquo; &#8221; &#x201D;
double low-9 quotation mark &bdquo; &#8222; &#x201E;
dagger &dagger; &#8224; &#x2020;
double dagger &Dagger; &#8225; &#x2021;
per mille sign &permil; &#8240; &#x2030;
single left-pointing angle quotation mark &lsaquo; &#8249; &#x2039;
single right-pointing angle quotation mark &rsaquo; &#8250; &#x203A;
euro sign &euro; &#8364; &#x20AC;

출처 : http://htmlhelp.com/reference/html40/entities/special.html
반응형

'프로그래밍 > Html' 카테고리의 다른 글

모바일 웹  (0) 2014.03.24
태그의 attribute 값 가져오기, 설정하기.  (0) 2013.02.25
[링크] html 태그 정리.  (0) 2011.05.13
input file 에 value 이용하기.  (0) 2010.12.02
textarea style  (0) 2010.02.25
반응형
반응형

'프로그래밍 > Html' 카테고리의 다른 글

태그의 attribute 값 가져오기, 설정하기.  (0) 2013.02.25
html 특수 문자.  (2) 2011.05.30
input file 에 value 이용하기.  (0) 2010.12.02
textarea style  (0) 2010.02.25
Frame 에서 가로 스크롤 없애기.  (0) 2010.02.23
반응형
<input type=text name=file value=c:/test.jpg>
<input type=button
style="font-style:veranda; font-size:12px; font-weight:bold;text-transform:lowercase;color:white;background-color:#A2C382;height:22px;border-

style:ridge;text-align:center;"
onClick="browse.click();file.value=browse.value;"
value="Select a File..."> 
반응형

'프로그래밍 > Html' 카테고리의 다른 글

html 특수 문자.  (2) 2011.05.30
[링크] html 태그 정리.  (0) 2011.05.13
textarea style  (0) 2010.02.25
Frame 에서 가로 스크롤 없애기.  (0) 2010.02.23
select 태그의 option 값들..  (0) 2009.07.14

+ Recent posts