반응형
*CSS 페이지 디자인
-
<<옛날에.. frame으로 디자인을 했었고, 잠깐 table로 디자인을 잡기도 했었다 (추가 삭제가 편리)잠깐~->그리고 지금까지는 div로 잡아 사용중
-
div로 다양한 영역을 잡아보자!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test1</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:300px; height:300px; position: relative; margin-top: 5px; border:1px solid #333;}
#a{background-color: #FF0099; width: 198px; height: 98px; float:left; border:1px solid #333;}
#b{background-color: #00FF99; width: 98px; height: 198px; float:right; border:1px solid #333;}
#c{background-color: #0099FF; width: 198px; height: 98px; float:center; position:absolute; top:200px; left:100px; border:1px solid #333;}
#d{background-color: #FFFF00; width: 98px; height: 198px; float:left; border:1px solid #333;}
#e{background-color: #FF9900; width: 98px; height: 98px; float:center; position:absolute; top:100px; left:100px; border:1px solid #333;}
</style>
</head>
<body>
<div id="wrap">
<div id="a">1
</div>
<div id="b">2
</div>
<div id="c">3
</div>
<div id="d">4
</div>
<div id="e">5
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test2</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:1060px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:310px; }
#headerLogo{position:absolute; top:38px; left:20px;}
#container{width:800px; height:800px; position: relative; background-color: #CECECE;}
#conAd1{background-color: #FFFFFF; width: 460px; height: 160px; float:left; position:absolute; top:20px; left: 20px;}
#conNews{background-color: #FFFFFF; width: 210px; height: 580px; float:left; position:absolute; top:200px; left: 20px;}
#conNotice{background-color: #FFFFFF; width: 230px; height: 280px; float:center; position:absolute; top:200px; left: 250px; }
#conp{background-color: #FFFFFF; width: 230px; height: 280px; float:center; position:absolute; top:500px; left: 250px; }
#conLogin{background-color: #FFFFFF; width: 280px; height: 240px; float:right; position:absolute; top:20px; left: 500px; }
#conAd2{background-color: #FFFFFF; width: 280px; height: 480px; float:right; position:absolute; top:300px; left: 500px; }
#footer{width:800px; height:120px; position: relative; background-color: #5E5E5E;}
#footerTitle{background-color: #FF0000; width: 400px; height: 50px ;float: right; font-size:15px; position:absolute; left: 200px; }
#footerLogo{background-color: #FF5500; width: 200px; height: 100px; float:left}
#footerInfo{background-color: #AAFF00; width: 400px; height: 50px; float:center; position:absolute; top:50px; left: 200px;}
#footerp{background-color: #FFAA00; width: 200px; height: 100px; float:right; position:absolute; left: 600px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerLogo"><img src="http://localhost:8080/html_prj/common/images/sist_logo.jpg"/></div>
<div id="headerTitle">연습 디자인</div>
</div>
<div id="container">
<div id="conAd1">AD1</div>
<div id="conNews">News1</div>
<div id="conNotice">공지</div>
<div id="conp">상품</div>
<div id="conLogin">login box</div>
<div id="conAd2">AD2</div>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
<div id="footerLogo">회사로고</div>
<div id="footerInfo">회사정보</div>
<div id="footerp">개인정보 보호정책</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
<!-- 템플릿으로 만들음 -->
*태그
-
그림자
-
문자열 그림자 <<지저분해보여 잘쓰지 않는다.& 그림자는 어디든 줄수있다 음수양수 조합으로>>
-
text-shadow : 그림자의 x좌표^ y좌표^ 번짐값^ 그림자색(RGB);
-
sapn{ text-shadow: 10px 5px 10px #333 } <<음수는 위 양수는 아래_번짐값을 주지 않으면 선명한 그림자!>>
-
<span>이름</span>
-
박스 그림자
-
box-shadow : x좌표^ y좌표^ 번짐값^ 그림자색(RGB);
-
radius
-
모서리를 둥글게 만들때
-
border-radius : 수치px; <-수치만 주면 모든 모서리가 깎여 나간다.
-
특정 모서리만도 깎는 것도 가능! 다 다르게 깎을 수 있다.
-
border-radius: 좌상px^ 우상px^ 우하px^ 좌하px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>shadow</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
.shadow{text-shadow: 7px -3px 8px #FF0000}
/* overflow: auto; 약관 만들때 자동으로 스크롤 바가 만들어지도록 하는 속성 */
.boxshadow{ border: 1px solid #333; width:200px; height:150px; box-shadow: 5px 10px 10px #333;
background-color:#FFEE55; border-radius: 0px 15px 0px 0px;}
/* border-radius: 모든방향에 적용
특정 위치만 호를 적용할 수 있다.
border-radius:좌상px 우상px 우하px 좌하px;
*/
.radius{border:1px solid #333; width: 300px; height: 100px; margin-top: 20px; border-radius: 10px 10px 0px 0px; }
.radius1{border:1px solid #578BBB; width: 200px; height: 200px; margin-top: 20px; border-radius: 100px 100px 100px 100px;
background-color: #7BA4CE; box-shadow: 10px 10px 10px #578BBB; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
오늘은 <span class="shadow">1월 31일</span> 입니다.<br/>
<div class="boxshadow">
공지사항<br/>
내일은 금요일 2월1일 입니다<br/>
즐거운 설 명절 되시고,<br/>
2월 7일 목요일에 뵙겠습니다.
</div>
<!-- radius -->
<div class="radius">
이번주는 SKY캐슬 막방입니다.<br/>
김주영 선생님은 과연 교도소에서 재소자들을 SKY를 보낼 수 있을 것인가....
</div>
<div class="radius1">
</div>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
-
디자인을 구분하기 위한 의미적 태그 (시멘틱태그_의미적으로 묶는것?)
-
<header> : 디자인의 header 부분
-
<nav> : 제공되는 서비스를 이용하기 위해 만들어 놓은 부분(menubar)
-
<footer> : 디자인의 footer부분
-
<section> : 구분되는 하나의 영역
-
<aside> : 부가적인 서비스를 구분하는 영역 <<주서비스 공간을 벗어나는 외부의 부분?사이드쪽 바 같은..>>
-
<article> : 게시물을 보여주는 영역
ex)
<body>
<div id="wrap">
<header>
<div id="header">
...
</div>
</header>
<div id="container">
<section> <aside>
...<article>
</section>
</div>
<footer>
<div id="footer">
...
</div>
</footer>
</div>
</body>
<!--일때 헤더와 컨테이너, 푸터를 구분해 보기 위해 만들어진 기능없는 의미적인 태그-->
<<html>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<header>
<div id="header">
<div id="headerTitle">SIST Class4</div>
<nav><a href="">메뉴1</a><a href="">메뉴2</a><a href="">메뉴3</a></nav> </div>
</header>
<div id="container">
<section>
<div>News1</div>
</section>
<section>
<div>Notice</div>
</section>
</div>
<footer>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</footer>
</div>
</body>
</html>
-
div크기보다 내용이 더 많을 때
-
(스크롤바를 생성할 때)
-
oberflow : auto <<약관만들때 좋음-옛날은 textarea로 줬음(ta는 편집이 가능해 readonly줘 막았음)>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
.agree{width: 800px; }
.agreeTitle{width: 800px; font-size: 20px; font-weight: bold; text-align: left; text-decoration: underline; }
.agreeContent{width:650px; height: 103px; border: 1px solid #333; overflow: auto;}
.agreeContent1{width:650px; height: 103px; margin-top: 10px}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<div class="agree">
<div class="agreeTitle">약관</div>
<div class="agreeContent">
1. 월드 홈페이지(이하 홈페이지라 함)는 (주)찬에서 운영하는 입시전문기관인 월드의 인터넷 서비스 사이트입니다. 홈페이지에 회원으로 가입하시는 분들은 회원 주체에 따라 개인회원 혹은 법인회원으로 가입하실 수 있으며, 가입하신 회원들께는 홈페이지에서 제공하는 정보 및 기능을 이용하실 수 있습니다. 약관에 동의함을 선택하시면 이 약관에 동의하는 것으로 간주하며 회원가입을 하실 수 있게 됩니다.
2. 회원의 종류 홈페이지의 회원은 개인회원으로 구성됩니다.
가. 개인회원 - 개인회원은 회원가입신청서를 작성한 개인 사용자로서 홈페이지의 서비스를 사용할 수 있습니다. - 개인회원도 교육신청시 고용보험적용을 선택하면 고용보험혜택을 받으실 수 있습니다. - 홈페이지는 통합회원으로 운영하던 기존의 회원정책을 변경하여 독립적인 회원체계를 시행합니다. - 따라서 월드를 이용하기 위해서는 월드를 통해서만 회원가입을 하여야 하며, 회원가입을 하시면 월드만의 회원으로 등록됩니다. - 다음의 기준에 의하여 회원 자격이 유지 또는 소멸됩니다.
3.회원등록정보
회원 가입 시 작성하는 모든 회원 정보들은 홈페이지의 서비스 제공에 필요한 경우를 제외하고, 다른 목적으로 사용되지 않습니다. 허위정보를 기재하였을 경우 발생하는 불이익은 책임지지 않으며, 홈페이지의 서비스 제한 조치를 받을 수 있습니다. 또한 회원정보는 언제든지 수정이 가능하지만, 이름과 ID, 주민등록번호, 사업자등록번호 등 고유의 정보는 변경은 원칙적으로 불가능하므로 작성시 주의해야 합니다.
4. 홈페이지의 대회원 서비스
가. 홈페이지의 회원은 다음의 서비스를 받으실 수 있습니다.
- 취업교육과정
- 재직자교육과정
- OCP과정
- 스마트폰교육과정
- 기업맞춤교육
- 인재추천의뢰
- 문의게시판
나. 위의 서비스를 받기 위해서는 사용자 로그인을 하셔야 합니다.
다. 홈페이지의 서비스는 지속적으로 추가 제공될 것이며, 불가피한 사정에 의해 서비스의 내용을 변경하거나 중단할 수 있습니다.
라. 서비스가 변경되거나 중단되는 경우 회원에게 홈페이지를 통해서 공지합니다.
5. 회사는 다음 각 호에 해당하는 이용계약 신청에 대하여는 이를 승낙하지 아니 합니다.
가. 다른 사람의 명의를 사용하여 신청하였을 때
나. 본인의 실명으로 신청하지 않았을 때
다. 이용 계약 신청서의 내용을 허위로 기재하였을 때
라. 사회의 안녕과 질서 혹은 미풍양속을 저해할 목적으로 신청하였을 때 6. ID와 비밀번호
가. ID와 비밀번호에 관한 모든 관리책임은 이용자에게 있습니다. 이용자에게 부여된 ID 및 비밀번호의 관리소홀, 부정사용에 의하여 발생하는 모든 결과에 대한 책임은 이용자에게 있습니다. 자신의 ID가 부정하게 사용된 경우 이용자는 반드시 홈페이지 웹마스터에게 전화나 이메일( 1588-3357 / webmaster@multicampus.co.kr)로 그 사실을 통보해야 합니다.
나. 비밀번호는 다음의 사항을 준수하여 신청하여야 합니다.
- 6자 이상으로 설정하셔야 합니다.
- 영문자와 숫자를 혼용하셔야 합니다.
- ID가 포함되거나 동일하지 않아야 합니다.
- 동일한 문자가 4회 이상 연속되어서는 안됩니다.
- 위 사항의 모든 사항에 부합되어야 정식으로 회원가입을 하실 수 있습니다.
7. 회원의 게시물 관리
홈페이지 서비스에 회원이 게시하거나 등록한 내용물이 다음 사항에 해당된다고 판단되는 경우에 사전 통지 없이 삭제할 수 있습니다. 가. 타인을 비방하거나 중상모략으로 개인 및 단체의 명예를 손상시키는 내용인 경우 나. 공공질서 및 미풍양속에 위반되는 내용인 경우 다. 범죄적 행위에 부합된다고 인정되는 내용인 경우 라. 타인의 저작권 등 기타의 권리를 침해하는 내용인 경우 마. 기타 관계 법령이나 회사에서 정한 규정에 위배되는 내용인 경우
8. 교육 및 시험신청
월드에서 실시하는 입시전문교육, 국제공인자격시험과 IT장기교육은 홈페이지를 통해서 온라인으로 신청할 수 있습니다. 각 신청서비스는 소정 양식의 신청서 작성을 통해서 이루어지며 신청서에 입력된 정보는 홈페이지의 신청 및 결제 시스템에 전송되어 처리됩니다.
9. 약관의 수정
월드는 이 약관을 변경할 수 있으며 변경된 약관은 서비스 화면에 게재하거나 기타 다른 방법으로 이용자에게 공지함으로써 효력을 발생합니다.
10. 약관 외 준칙
이 약관에 명시되지 않은 사항은 전기통신기본법, 전기통신사업법 및 기타 관련법령의 규정에 의합니다. 이 약관은 2002년 10월 22일부터 시행합니다
</div>
</div>
<textarea class="agreeContent1" readonly="readonly">
1. 월드 홈페이지(이하 홈페이지라 함)는 (주)찬에서 운영하는 입시전문기관인 월드의 인터넷 서비스 사이트입니다. 홈페이지에 회원으로 가입하시는 분들은 회원 주체에 따라 개인회원 혹은 법인회원으로 가입하실 수 있으며, 가입하신 회원들께는 홈페이지에서 제공하는 정보 및 기능을 이용하실 수 있습니다. 약관에 동의함을 선택하시면 이 약관에 동의하는 것으로 간주하며 회원가입을 하실 수 있게 됩니다.
2. 회원의 종류 홈페이지의 회원은 개인회원으로 구성됩니다.
가. 개인회원 - 개인회원은 회원가입신청서를 작성한 개인 사용자로서 홈페이지의 서비스를 사용할 수 있습니다. - 개인회원도 교육신청시 고용보험적용을 선택하면 고용보험혜택을 받으실 수 있습니다. - 홈페이지는 통합회원으로 운영하던 기존의 회원정책을 변경하여 독립적인 회원체계를 시행합니다. - 따라서 월드를 이용하기 위해서는 월드를 통해서만 회원가입을 하여야 하며, 회원가입을 하시면 월드만의 회원으로 등록됩니다. - 다음의 기준에 의하여 회원 자격이 유지 또는 소멸됩니다.
3.회원등록정보
회원 가입 시 작성하는 모든 회원 정보들은 홈페이지의 서비스 제공에 필요한 경우를 제외하고, 다른 목적으로 사용되지 않습니다. 허위정보를 기재하였을 경우 발생하는 불이익은 책임지지 않으며, 홈페이지의 서비스 제한 조치를 받을 수 있습니다. 또한 회원정보는 언제든지 수정이 가능하지만, 이름과 ID, 주민등록번호, 사업자등록번호 등 고유의 정보는 변경은 원칙적으로 불가능하므로 작성시 주의해야 합니다.
4. 홈페이지의 대회원 서비스
가. 홈페이지의 회원은 다음의 서비스를 받으실 수 있습니다.
- 취업교육과정
- 재직자교육과정
- OCP과정
- 스마트폰교육과정
- 기업맞춤교육
- 인재추천의뢰
- 문의게시판
나. 위의 서비스를 받기 위해서는 사용자 로그인을 하셔야 합니다.
다. 홈페이지의 서비스는 지속적으로 추가 제공될 것이며, 불가피한 사정에 의해 서비스의 내용을 변경하거나 중단할 수 있습니다.
라. 서비스가 변경되거나 중단되는 경우 회원에게 홈페이지를 통해서 공지합니다.
5. 회사는 다음 각 호에 해당하는 이용계약 신청에 대하여는 이를 승낙하지 아니 합니다.
가. 다른 사람의 명의를 사용하여 신청하였을 때
나. 본인의 실명으로 신청하지 않았을 때
다. 이용 계약 신청서의 내용을 허위로 기재하였을 때
라. 사회의 안녕과 질서 혹은 미풍양속을 저해할 목적으로 신청하였을 때 6. ID와 비밀번호
가. ID와 비밀번호에 관한 모든 관리책임은 이용자에게 있습니다. 이용자에게 부여된 ID 및 비밀번호의 관리소홀, 부정사용에 의하여 발생하는 모든 결과에 대한 책임은 이용자에게 있습니다. 자신의 ID가 부정하게 사용된 경우 이용자는 반드시 홈페이지 웹마스터에게 전화나 이메일( 1588-3357 / webmaster@multicampus.co.kr)로 그 사실을 통보해야 합니다.
나. 비밀번호는 다음의 사항을 준수하여 신청하여야 합니다.
- 6자 이상으로 설정하셔야 합니다.
- 영문자와 숫자를 혼용하셔야 합니다.
- ID가 포함되거나 동일하지 않아야 합니다.
- 동일한 문자가 4회 이상 연속되어서는 안됩니다.
- 위 사항의 모든 사항에 부합되어야 정식으로 회원가입을 하실 수 있습니다.
7. 회원의 게시물 관리
홈페이지 서비스에 회원이 게시하거나 등록한 내용물이 다음 사항에 해당된다고 판단되는 경우에 사전 통지 없이 삭제할 수 있습니다. 가. 타인을 비방하거나 중상모략으로 개인 및 단체의 명예를 손상시키는 내용인 경우 나. 공공질서 및 미풍양속에 위반되는 내용인 경우 다. 범죄적 행위에 부합된다고 인정되는 내용인 경우 라. 타인의 저작권 등 기타의 권리를 침해하는 내용인 경우 마. 기타 관계 법령이나 회사에서 정한 규정에 위배되는 내용인 경우
8. 교육 및 시험신청
월드에서 실시하는 입시전문교육, 국제공인자격시험과 IT장기교육은 홈페이지를 통해서 온라인으로 신청할 수 있습니다. 각 신청서비스는 소정 양식의 신청서 작성을 통해서 이루어지며 신청서에 입력된 정보는 홈페이지의 신청 및 결제 시스템에 전송되어 처리됩니다.
9. 약관의 수정
월드는 이 약관을 변경할 수 있으며 변경된 약관은 서비스 화면에 게재하거나 기타 다른 방법으로 이용자에게 공지함으로써 효력을 발생합니다.
10. 약관 외 준칙
이 약관에 명시되지 않은 사항은 전기통신기본법, 전기통신사업법 및 기타 관련법령의 규정에 의합니다. 이 약관은 2002년 10월 22일부터 시행합니다
</textarea>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
*JavaScript
-
1996년 brendan Eich 가 개발하여 발표한 Script언어(VB Script-VB기반, Java Script-c기반, Action Script-?flash에서?)-C로 10일만에 만든 언어
-
C언어로 만들어진 언어
-
HTML에 정의하여 사용하는 언어
-
Mocha->Live Script->JavaScript로 이름이 정해짐.
-
inline방식, embed방식, 외부파일(external File) 방식으로 사용할 수 있다.
-
줄단위로 실행(compile?)을 하여 Error가 발생하게 된다.
-
연산,제어,등 함.
-
<<브라우저의 인스펙터를가지고 에러를 잡게 된다?>>
-
library가 많이 개발되어 있다.(JQuery가 가장유명, NodeJS, AngularJS, VueJS,,,)
-
<<프로포셜안돼면..쓰기 불편 컨트롤+스페이스해서 뜨는것?>>
-
<<그때!까는게 tern이다 ! help에 마켓에 있는 tern을 깔고->다음->동의->설치후 재부팅창에 NO->다시이클립스만 껏다켜준다->프로젝트 설정->javascript->tern->Modules에 Cordova javascript를 체크해주면 사용가능해진다!>>
-사용방식
-
inline 방식
-
태그에 넣어 작성하는 방식
-
적용우선순위가 가장 높다. 대신 코드중복성이 제일 높다.
-
<태그명 onXxx~="코드"> =>jQuery쓸때부턴 안쓰게 된다/섞여서 애초에 잘 안쓰..?
-
embed 방식
-
html에 정의하는 방식
-
<html>
-
<head>
-
<title>타이틀</title>
-
<script type="text/Javascript">
-
코드작성
-
</script>
-
</head>
-
<body>
-
...
-
</body>
-
</html>
-
external file 방식
-
파일을 따로 정의하여 작성하는 방식
-
.js 파일을 생성하고 코드를 정의하는 방식
-
필요한 HTML에서
-
<script type="text/javascript" src="js URL"></script>
-
JQuery등 외부라이브러리를 사용할 때 많이 사용.
-
javascript는 객체기반언어 (프로그래머가 생성하기보다 생성된 객체들을 주로 사용하는 언어)
-
<<자바는 객체지향언어-지향oriented?class를 만들어 사용하는 언어......class 가급적 지향하는 언어?(class->객체)>>
-
<<class가 없고 비스으으읏하게 만들어 진게 있다.(자바는 없어서 만들어 쓰는거고 자바스크립트는 만들어져있어서 더 간편?)>>
-
동적인 데이터 형 (값이 할당 될때 데이터형이 정해지는 데이터형 )
-
=>개발자가 데이터형을 사용하지 않는다.
-
ver i;가 훗날 String이 될수도 int가 될수도!!편하당
-
대소문자를 가린다.
-
;를 사용하지 않아도 된다. (가급적 넣는게..?)
-
ECMA Script 262 Edition 인데 지금은 6까지 나옴
-
최상위 객체 : window(생략가능) <<자바는 object>>
-
이 window가 document, history, location을 갖는다.
-
문자가 없다 : 모두다 문자열! ''도, ""도 가능
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
<!--tag에 직접넣어 코드를 작성하는 방식 : onclick="for(var i=0; i<10; i++){alert('인라인 방식')}" 도 가능하다.-->
<input type="button" value="inline 방식" class="btn" onclick="alert('인라인 방식')"/>
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
<script type="text/javascript">
//embed 방식 : <script>태그를 정의하고 태그안에서 코드를 정의하는 방식
function test(){
alert("embed 방식");
}//test
test();
/*
*
주석
*/
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
/**external.js
* .js파일을 만들고 그 안에 JavaScript 코드를 정의하는 방식
* 이 코드가 필요한 HTML에서 <script type="text/javascript" src=".js파일" ></script>
* 태그를 정의하여 사용한다.
*/
function ext(){
alert("외부파일 방식");
}//ext
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
<script type="text/javascript" src="external.js"></script>
<script type="text/javascript">
ext();//외부파일에 있는 함수 호출
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
*출력
-
<body> 태그안 출력
-
window.document.write("출력할 내용");
-
=>생략가능
-
경고창 출력
-
<alert("출력할 내용"); //코드의 실행을 멈춘다.=>디버깅,에러잡을때 많이 사용한다.
-
console출력 <<주로 사용해야 사용자가 출력하는걸 못본다는 장점이 있다>>
-
출력을 숨겨서 하거나 debugging 할 때 사용
-
console.log("메세지"); <<사용자가 쓰는환경에서는 이걸 사용해서 찍는다=>사용자가 못보게>>
-
F12를 누르면 뜨는 창의 console 에서 메세지가 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#wrap{margin:0px auto;width:800px; height:860px;}
#header{width:800px; height:140px; background:#FFFFFF url(http://localhost:8080/html_prj/common/images/header_bg.png) repeat-x;
position: relative; }
#headerTitle{font-family: HY견고딕,고딕; font-size:35px; font-weight:bold; text-align:center;
/* padding-top: 35px */ position:absolute; top:40px; left:290px; }
#container{width:800px; height:600px; }
#footer{width:800px; height:120px; }
#footerTitle{float: right; font-size:15px; padding-top:20px; padding-right:20px; }
</style>
<script type="text/javascript">
//<script>태그 내의 영역은 javascript코드만 작성 할 수 있다. HTML코드를 직접 사용하면 Error
//HTML <body>에 출력.
window.document.write("안녕 자바 스크립트<br/>");//기존의 디자인을 싹 없앨 수도 있어 잘 쓰지 않는다.
//window는 생략가능 & 줄이 바뀌지 않는다.
document.write("앞 으로 잘부탁해");
//경고창 출력
window.alert("경고창 출력!\n경고경고!@!@@#!~!!@~!");//코드의 실행을 멈춘다
//console출력
console.log("사용자에게 보이지 않게 콘솔 출력");
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="headerTitle">SIST Class4</div>
</div>
<div id="container">
</div>
<div id="footer">
<div id="footerTitle">copyright© all right reserved. class 4.</div>
</div>
</div>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 73일차-JavaScript (0) | 2019.02.12 |
|---|---|
| 72일차-JavaScript (0) | 2019.02.02 |
| 70일차-CSS_정렬,디자인,배치 (0) | 2019.01.31 |
| 69일차-CSS (0) | 2019.01.30 |
| 68일차-HTML Form Control (0) | 2019.01.29 |