●웹프로그래밍 테스트 할때는 크롬보다는 익스플로어에서 먼저 하는게 좋다.







●도구->옵션->고급에서 'HTTP오류메시지표시' 체크해제하고 '모든 스크립트 오류에 관련된 알림 표시' 체크 한다.









●js, css 수정 후 바로 적용 안되면 아래 경로에서 파일보기에서 파일 삭제한다.


인터넷옵션->일반->검색지록->설정->임시 인터넷파일->파일보기









Posted by -현's-

댓글을 달아 주세요


●<!--[if 영어기호 IE 버전]>내용<![endif]-->



●초과,미만,이상,이하


> : greater than (gt)
< : less than  (lt)
>= : greater than or equals (gte)
<= : less than or equals (lte)



● ie9에서만 표시

<!--[if IE 9]>


<![endif]-->


ie9이상에서만 표시

<!--[if gte IE 9]>


<![endif]-->


ie9초과에서만 표시

<!--[if gt IE 9]>


<![endif]-->


ie9이하에서만 표시

<!--[if lte IE 9]>


<![endif]-->


ie9미만에서만 표시

<!--[if lt IE 9]>


<![endif]-->



Posted by -현's-

댓글을 달아 주세요


●예제

- select 에서 값을 선택하면 우측 select에 값이 출력됨


<html>

<head>

</head>

<body>

<script type="text/javascript">

function chg() {

var val1=val2=val3="";

val1 = document.frm.select1.value;

val2 = document.frm.select2.value;

val3 = document.frm.select3.value;

for (i=0; i<document.frm.result.options.length; i++) {

document.frm.result.options[i].text = eval("val"+(i+1));

}

}

</script>


<form name="frm">

<select name="select1" size="5" onchange="chg();">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

</select>

<select name="select2" size="5" onchange="chg();">

<option value="A">A</option>

<option value="B">B</option>

<option value="C">C</option>

<option value="D">D</option>

<option value="E">E</option>

</select>

<select name="select3" size="5" onchange="chg();">

<option value="A1">A1</option>

<option value="A2">A2</option>

<option value="A3">A3</option>

<option value="A4">A4</option>

<option value="A5">A5</option>

</select>

<select name="result" size="3">

<option value=""></option>

<option value=""></option>

<option value=""></option>

</select>

</form>



</body>

</html>

 












Posted by -현's-

댓글을 달아 주세요


●자바스크립트와 html로 만든 차트 솔루션이다. 비상업용으로 사용할땐 무료이고 상업적으로 사용할땐 비용이 든다.(최소 90달러이상)


http://www.highcharts.com






●예제

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>하이차트 라인 기본</title>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

  $('#chart1').highcharts({

  title: {

   text: '제목',

x: -20 //center

  },

          subtitle: {

             text: '부제목',

                x: -20

          },

  xAxis: {  //x축

           categories: ['가로1', '가로2', '가로3', '가로4', '가로5', '가로6']

},

      yAxis: {  //y축

           title: {

                   text: '단위 (°C)'

               },

               plotLines: [{   //선

                   value: 0,

                   width: 1,

                   color: '#808080'

               }]

           },

           tooltip: {

               valueSuffix: '°Cas'

           },

           legend: {  //범례

               layout: 'vertical',

               align: 'right',

               verticalAlign: 'middle',

               borderWidth: 0

           },

           series: [{   //값

               name: 'Tokyo',

               data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5]

           }, {

               name: 'New York',

               data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0]

           },{

               name: 'New York2',

               data: [1, 2, 7, 3, 4, 10]

           }, {

               name: 'Berlin',

               data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0]

           }, {

               name: 'London',

               data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2]

           }]

       });

   });

    


</script>

</head>

<body>

<script src="../../js/highcharts.js"></script>

<script src="../../js/modules/exporting.js"></script>  <!--우측상단에 차트를 이미지로 출력할 수 있게하는 버튼을 넣는다.-->


<div id="chart1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


</body>

</html>






Posted by -현's-

댓글을 달아 주세요



●체크박스 하나만 선택되게 하기


<html>

<head>

<title>체크박스 하나만 선택하기</title>

<script type="text/javascript">

    function oneCheckbox(a){

        var obj = document.getElementsByName("checkbox1");

        for(var i=0; i<obj.length; i++){

            if(obj[i] != a){

                obj[i].checked = false;

            }

        }

    }

</script>

</head>


<body>

<form name="sendForm" method="get" >

    <input type="checkbox" name="checkbox1" value="a1" onclick="oneCheckbox(this)">a1

    <input type="checkbox" name="checkbox1" value="a2" onclick="oneCheckbox(this)">a2

    <input type="checkbox" name="checkbox1" value="a3" onclick="oneCheckbox(this)">a3

</form>

</body>

</html>










●체크박스 모두 선택, 해제


<html>

<head>

<title>체크박스 하나만 선택하기</title>

<script language="JavaScript">

<!-- 

function selectAll(checkFlag) { 

       var f = document.sendForm; 

       for(var i=0; i<f.elements.length; i++) { 

               if(f.elements[i].name == 'checkbox2'){ 

                       f.elements[i].checked = checkFlag; 

               } 

       } 

//--> 

</script>

</head>


<body>

<form name='sendForm'>

  <input type='checkbox' onclick='selectAll(this.checked);'>모두선택/해제

  <input type='checkbox' name='checkbox2' value='value1'>a1

  <input type='checkbox' name='checkbox2' value='value2'>a2

  <input type='checkbox' name='checkbox2' value='value3'>a3

  <input type='checkbox' name='checkbox2' value='value4'>a4

</form>



</body>

</html>





Posted by -현's-

댓글을 달아 주세요

 

●<body>안에 아래 태그를 입력한다.

- oncontextmenu='return false' - 우클릭방지
- onselectstart='return false' - 블럭선택방지
- ondragstart='return false' - 드래그방지

 

 

ex)

<body oncontextmenu='return false' onselectstart='return false' ondragstart='return false'>

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

 

●버튼에 링크를 걸려면 <a href="#">을 쓰면 안되고 버튼 태그 안에 onclick="location.href='#' "을 넣어줘야한다.

ex)


<input type="button" value="버튼" onclick="location.href='#' ">



<button type="button" onclick="location.href='javascript:jsFunction();' " >버튼 누르면 자바스크립트 실행</button>

Posted by -현's-

댓글을 달아 주세요

●로고는 h1태그를 써서 그 안에 넣어준다. h1은 페이지 내에서 가장 중요한 것을 나타내는 태그이다.

ex)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

<style type="text/css">
img{border:0;}

#logo{width:900px; height:200px; margin:10px auto; border:1px solid;}
</style>

</head>
<body>


<h1 id="logo"><img src="image/logo.png" width="900" height="200"/></h1>

</body>
</html>

Posted by -현's-

댓글을 달아 주세요

●마우스 롤 오버 태그, 속성

 <img src="이미지 주소" onmouseover="this.src='마우스 오버시 이미지 주소'"

                                 onmouseout="this.src='이미지 주소'" alt="alt이름"/> 

 

 

●웹표준 준수 위해서 이미지의 alt속성을 꼭 넣어주고, <img src=""/>처럼 태그 마지막 부분을 꼭 막아줘야한다.

별 의미 없는 그냥 화면을 꾸미기 위한 이미지의 경우는 alt속성에 값을 넣지 않고 alt=""처럼 빈 속성값을 설정한다.

 

 

 

●이미지 링크 테두리 없애기

- 이미지에 링크를 걸면 테두리가 생긴다. 개별적으로 border값을 설정하는 것 보다 css를 이용하여 테두리를 제거한다.

  img {border:"0"}

 

 

 

●가로 메뉴 예

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
img{border:0;}
#menu{width:800px; margin:10px auto; padding-left:200px;}
#menu ul{margin:0 ;padding: 0; }
#menu li{display:inline; float:left; }
</style>

 

</head>
<body>

 

<div id="menu">
 <ul>
     <li><a href="#"><img width=200 height=50 src="image/menu1.png" onmouseover="this.src='image/menu1_on.png'"
       onmouseout="this.src='image/menu1.png'" alt="메뉴1"/></a></li>
     <li><a href="#"><img width=200 height=50 src="image/menu2.png" onmouseover="this.src='image/menu2_on.png'"
       onmouseout="this.src='image/menu2.png'" alt="메뉴2"/></a></li>
     <li><a href="#"><img width=200 height=50 src="image/menu3.png" onmouseover="this.src='image/menu2_on.png'"
       onmouseout="this.src='image/menu3.png'" alt="메뉴31"/></a></li>
 </ul>
</div>

 

</body>
</html>

Posted by -현's-

댓글을 달아 주세요

 

세로 메뉴

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#menu1{width:100px; }
#menu1 ul{list-style:none; margin: 0;padding: 0; }
</style>

 

</head>
<body>

 

<div id="menu1">
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
  </ul>
</div>

 

</body>
</html>

결과

1111

2222

3333

4444

 

 

 

 

●li안에 이미지를 세로로 나열할 때 이미지 사이에 여백이 생길경우, img속성에 'vertical-align:top;'로 설정한다.

 

 

 

 

●가로 메뉴

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>

 

<style type="text/css">
#menu2{width:400px; }
#menu2 ul{margin:0 ;padding: 0; }
#menu2 li{display:inline;}
</style>

 

</head>
<body>

 

<div id="menu2">
 <ul>
   <li>1111</li>
   <li>2222</li>
   <li>3333</li>
   <li>4444</li>
 </ul>
</div>

 

</body>
</html>

 

결과

1111 2222 3333 4444

 

 

 

●li안에 'display:inline;'를 적용하면 가로로 배열이 된다.

 

 

 

●li안에 이미지를 가로로 나열할 때 이미지 사이에 여백이 생기는 경우, li안에 'float:left;'로 설정한다.

 

 

 

 

Posted by -현's-

댓글을 달아 주세요