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







●도구->옵션->고급에서 '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-

댓글을 달아 주세요

 

●<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-

댓글을 달아 주세요

 

 

 

 

●기본격자

- row안에 span을 추가한다. span*의 합은 항상 행마다 12가 되야한다.(열안의 열인 경우 감싼 열 숫자만큼 되야한다)

 

 

 

 

 

 

 

 

 

 

 

 

 

●열 위치이동

- offset*을 사용한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

●열안의 열

- span* 안에 새로운 row,span*을 추가한다. 안의 열들을 함하면 감싸는 열의 숫자가 되야한다.

 

 

 

 

 

 

 

 

 

 

●유동 격자

- 열의 폭을 고정정인 값대신 비율을 사용한다.

 

- 유동 격자 열안의 열인 경우 안의 열의 합은 항상 12가 되야한다.

 

 

 

 

 

 

 

 

 

●유동레이아웃

- container-fluid를 사용한다.

 

 

 

 

 

 

Posted by -현's-

댓글을 달아 주세요

 

●부트스트랩

- css, 자바스크립트에 관한 프레임워크이다.

 

- http://maczniak.github.io/bootstrap/index.html 에 들어가서 부트스트랩 파일을 다운받아 사용한다.

 

- 부트스트랩은 html5 로 작성해야한다. html5는 문서 앞에 '<!DOCTYPE html>' 를 붙인다.

(html4에서는 '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">' ,html5에서는 '<!DOCTYPE html>'가 끝)

 

ex)

 

 <!DOCTYPE html>

<html>

<head>

<body>

</boby>

</head>

</html>

 

 

 

 

 

●부트스트랩 기본 형식 

 ex)

 

 <!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>부트트랩 예제</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

부트트랩
</body>
</html>


 

 

 

 

 

 

 

 

 

 

 

 

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-

댓글을 달아 주세요

●웹표준 레이아웃

<!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">
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}

 

#wrap{margin:0; auto; width:900px;  }
#header{float:left; width:900px; height:145; margin-bottom:15px;}
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; margin-top:20px;}
</style>

 

</head>
<body>

 

<div id="wrap">
  <div id="header">a</div>
  <div id="sidebar">b</div>
  <div id="content">c</div>
  <div id="footer">d</div>
</div>

 

</body>
</html> 

 

 

●#wrap{margin:0 auto; width:900px;}

- table에서는 align="center"로 중앙 정렬을 했지만, 웹표준에서는 따로 중앙정렬은 없다. 그래서 중앙정렬을 하려면 가장 바깥 div에 'margin:0 auto'를 선언해 준다. 'margin:0'은 상하 0px라는 뜻이고 'auto'는 좌우를 중앙에 위치하게 한다.

 

 

 

●큰 div(wrap,header,sidebar,content,footer 등)를 만들고 그 안에 세부적인 div를 만든다. 큰 div는 height값을 주지 않고 세부적인 div에 height를 준다.

 

 

 

●width, margin, padding, height 수치를 정확히 계산해서 레이아웃을 만든다. 만들 레이아웃 디자인을 프린트하고 계산기로 위의 값을 계산하면서 하면 편하다.

 

 

 

●margin은 바깥쪽 여백, padding는 안쪽 여백이다.

 

 

 

●padding값은  width값에 포함하지 않는다. 계산할때 따로 더해주어야 한다.

ex)

<div style="padding:10px; width:80px; height:80px;"></div>

여기서 총 길이는 width값 80px와 양쪽 padding값 10px+10px인 100px이다.

 

 

 

●값에 숫자만 쓰면 안되고 px등 단위를 써주어야한다.

 

 

 

●div에 테두리를 사용하려면 'border:1px solid ;border-color:blue;' 를 css에 입력한다.

ex)

#header{float:left; width:900px; height:145px; border:1px solid ; border-color:blue; margin-bottom:15px; }

 

 

 

●연습 예

 <!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">
/* 공통 속성 */
body,div,ul,li,dl,dt,dd,ol,p,h1,h2,h3,h4,h5,h6,form{margin:0; padding:0}
body{font:normal dotum, '돋움';}
ul,il,dl{list-style:none}
img{border:0; vertical-align:top;}
ul{list-style:none; padding:0; margin:0;}
/* 큰 div */
#wrap{margin:20px auto; width:900px;  }
#header{float:left; width:900px; height:145px; background:green; margin-bottom:15px; }
#sidebar{float:left; width:245px;}
#content{float:right; width:645px;}
#footer{float:left; width:900px; height:80px; background:green; margin-top:15px; margin-bottom:30px;  }
/* sidebar 세부 div */
#sidebar_a{width:250px ;height:150px ;background:green; margin-bottom:10px;  }
#sidebar_b{width:250px ;height:160px ;background:green; margin-bottom:10px; }
#sidebar_c{width:230px ;height:300px ;background:green; padding:10px;  }
#sidebar_c_1{width:230px ;height:145px ;background:yellow; margin-bottom:10px; }
#sidebar_c_2{width:230px ;height:145px ;background:yellow; }
/* content 세부 div */
#content_a{width:625px ; background:green ;margin-bottom:10px; padding:10px;  }
#content_a_1{width:625px ;height:90px ;background:yellow ;margin-bottom:10px;  }
#content_a_2{width:625px ;height:90px ;background:yellow; ;margin-bottom:10px ; }
#content_a_3{width:625px ;height:100px ;background:yellow; ; }
#content_b{width:645px ;height:150px ;background:green ;margin-bottom:10px ; }
#content_c{width:645px ;height:160px ;background:green ; }

</style>

</head>
<body>

<div id="wrap">
 <div id="header"></div>
 <div id="sidebar">
  <div id="sidebar_a"></div>
  <div id="sidebar_b"></div>
  <div id="sidebar_c">
   <div id="sidebar_c_1"></div>
   <div id="sidebar_c_2"></div>  
  </div> 
 </div> 
 <div id="content">
  <div id="content_a">
   <div id="content_a_1"></div>
    <div id="content_a_2"></div>
    <div id="content_a_3"></div>
  </div> 
  <div id="content_b"></div>
  <div id="content_c"></div> 
 </div>
 <div id="footer"></div>
</div>

</body>
</html>

 

 

 

 

Posted by -현's-

댓글을 달아 주세요