지난 시간 복습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// 문서 준비
$(document).ready(function(){
//선택 액션
$("input").focus(function(){
$(this).css("background-color","yellow");
});
});
</script>
아이디 : <input type="text" name="name" />
</body>
</html>
textfield 에 focus 를 주면 노란색이 되고, 다른 곳에 focus 를 주면 다시 하얀색이 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button>Show It</button>
<br>
<img src="../img/penguin.png" width="120" height="100" style="display: none;" alt="">
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").toggle(3000);
});
});
</script>
</body>
</html>
버튼을 누르면 나타났다가 다시 버튼을 누르면 사라짐 (toggle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="fadein">fadein</button>
<button id="fadeout">fadeout</button>
<br>
<img id="lion" src="../img/lion.png" style="display: none;" alt="">
<script>
$(document).ready(function(){
$("#fadein").click(function(){
$("#lion").fadeIn(1000);
});
$("#fadeout").click(function(){
$("#lion").fadeOut(1000);
});
});
</script>
</body>
</html>
fade in 누르면 fadein
fade out 누르면 fadeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="out">
<p>마우스를 이곳으로 움직여 보세요</p>
<p>0</p>
</div>
<div>
<p>마우스를 이곳으로 움직여 보세요</p>
<p>0</p>
</div>
<style>
div.out{
border: 1px solid gold;
}
</style>
<script>
var i=0;
$(document).ready(function(){
$("div.out").mouseover(function(){
$("p:first",this).text("mouse over");
});
});
</script>
</body>
</html>
마우스를 올리면 text 가 바뀜
마우스가 왔다갔다한 횟수만큼 수가 증가함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="out">
<p>Click Click</p>
<p>0</p>
</div>
<style>
div.out{
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid gold;
}
</style>
<script>
var i=0;
$(document).ready(function(){
$("div.out").click(function(){
$("p:first",this).text("mouse click");
$("p:last",this).text(++i);
});
$("div.out").mouseout(function(){
$("p:first",this).text("Click Click");
$("p:last",this).text("0");
});
});
</script>
</body>
</html>
마우스 클릭하면 text 바뀜, 횟수 증가
마우스가 boundary 벗어나면 초기 text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="log">aaaaa</div>
<style>
div{
width: 500px;
height: 100px;
background-color: yellow;
border: 1px solid gold;
}
</style>
<script>
var i=0;
$(document).ready(function(){
$(document).mousemove(function(e){
$("#log").text("e.pageX:"+e.pageX+", e.pageY:"+e.pageY);
})
});
</script>
</body>
</html>
마우스 위치 좌표를 출력
오늘 JQuery 는 여기까지
앞으로는 닷홈에 올릴 내용 만들 예정
... Clone Coding ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/front.css">
<link rel="stylesheet" href="css/print.css">
</head>
<body>
<div id="wrap">
<header>
<div id="login"><a href="#">login</a> | <a href="#">join</a></div>
<div class="clear"></div>
<div id="logo">
<img src="images/logo.jpg" width="265" height="62" alt="googleimg">
</div>
<nav id="top_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">COMPANY</a></li>
<li><a href="#">SOLUTIONS</a></li>
<li><a href="#">CUSTOMER CENTER</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</nav>
</header>
<div class="clear"></div>
<!-- 메인이미지 -->
<div id="main_img">
<img src="images/main_img.jpg" width="971" height="282" alt="">
</div>
<article id="front">
<div id="solution">
<div id="hosting">
<h3>Web Hosting Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna,
fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend.
Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est </p>
</div>
<div id="security">
<h3>Web Security Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna,
fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend.
Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est </p>
</div>
<div id="payment">
<h3>Web payment Solution</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nunc urna,
fringilla non fringilla ut, lacinia eu urna. Aliquam nec urna at nisi pulvinar eleifend.
Duis commodo luctus leo vitae feugiat. Curabitur ac sodales ante. Ut vel est </p>
</div>
</div>
<div class="clear"></div>
<div id="sec_news">
<h3><span class="orange">Security</span> News</h3>
<dl>
<dt><a href="#">Vivamus id ligula velit, quis euismod nisi</a></dt>
<dd><a href="#">Proin quis ante eget arcu tempus tempus porta vel ipsum.
Quisque vitae nulla vel lorem cursus dignissim. Sed sit amet metus tortor.
In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam massa risus, </a></dd>
<dt><a href="#">Vivamus id ligula velit, quis euismod nisi</a></dt>
<dd><a href="#">Proin quis ante eget arcu tempus tempus porta vel ipsum.
Quisque vitae nulla vel lorem cursus dignissim. Sed sit amet metus tortor.
In hac habitasse platea dictumst. Aliquam erat volutpat. Aliquam massa risus, </a></dd>
</dl>
</div>
<div id="news_notice">
<h3 class="brown">News & Notice</h3>
<table>
<tr>
<td class="contxt"><a href="#">Vivamus id ligula velit, quis euismod nisi </a></td>
<td><a href="#">2011.07.31</a></td>
</tr>
<tr>
<td class="contxt"><a href="#">Fusce eros augue, tempus nec interdum eu </a></td>
<td>2011.06.11</td>
</tr>
<tr>
<td class="contxt"><a href="#">Donec eget tincidunt purus </a></td>
<td>2011.05.12</td>
</tr>
<tr>
<td class="contxt"><a href="#">Nam facilisis mauris in dui suscipit volutpat </a></td>
<td>2011.05.08</td>
</tr>
<tr>
<td class="contxt"><a href="#">Aenean in dui mollis leo ullamcorper fringilla </a></td>
<td>2011.04.25</td>
</tr>
</table>
</div>
</article>
<div class="clear"></div>
<footer>
<hr>
<div id="copy">
All contents Copyright 2011 ShopWeb Inc. all rights reserved<br>
Contact mail : master@shoptech.com Tel: +82 64 123 4315 Fax +82 64 123 4321
</div>
<div id="social">
<img src="images/facebook.gif" width="33" height="33" alt="facebook">
<img src="images/twitter.gif" width="33" height="33" alt="twitter">
</div>
</footer>
</div>
</body>
</html>index.html
#hosting h3, #security h3, #payment h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #333;
margin: 0 0 10px 80px;
}
#hosting p, #security p, #payment p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333;
margin: 0 0 10px 80px;
}
#hosting{
background-image: url(../images/icon1.png);
background-repeat: no-repeat;
background-position: left 15px;
border-right: 1px solid #ccc;
}
#security{
background-image: url(../images/icon2.png);
background-repeat: no-repeat;
background-position: left 15px;
border-right: 1px solid #ccc;
margin-left: 10px;
}
#payment{
background-image: url(../images/icon3.png);
background-repeat: no-repeat;
background-position: left 15px;
margin-left: 10px;
}
#sec_news, #news_notice{
float: left;
width: 420px;
margin: 15px 0 0 20px;
}
#sec_news h3, #news_notice h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
width: 420px;
height: 24px;
background-image: url(../images/h3_back.jpg);
background-repeat: no-repeat;
padding: 5px 0 0 22px;
}
#sec_news .orange{
color: #f26522;
}
#news_notice .brown{
color: #827b00;
}
#sec_news dl{
margin-left: 6px;
}
#sec_news dt{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 5px 0;
color: #f00;
}
#sec_news dd{
margin-left: 0;
color: #333;
}
#sec_news dt a{
color: #f00;
text-decoration: none;
}
#sec_news dt a:hover{
color: #f90;
text-decoration: underline;
}
#sec_news dd a{
color: #333;
text-decoration: none;
}
#sec_news dd a:hover{
color: #f90;
text-decoration: underline;
}
#news_notice table{
width: 400px;
border-collapse: collapse;
text-align: center;
}
#news_notice td{
padding: 6px 4px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #999;
}
#news_notice td.contxt{
background-image: url(../images/tr_back.gif);
background-repeat: no-repeat;
background-position: left center;
padding-left: 15px;
text-align: left;
color: #333;
}
#news_notice a{
color: #333;
text-decoration: none;
}
#news_notice a:hover{
color: #f90;
text-decoration: none;
}
footer{
margin: 50px 0 0 0;
height: 80px;
background-image: url(../images/under_logo.jpg);
background-repeat: no-repeat;
background-position: 40px center;
}
footer hr{
width: 900px;
margin: 0 0 0 30px;
}
footer #copy{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
width: 450px;
margin: 20px 0 0 190px;
float: left;
}
footer #social{
width: 130px;
margin: 20px 20px 0 0;
float: right;
}
footer #social img{
margin: 0 7px;
}print.css
body{
background-color: #898989;
margin: 0;
padding: 0;
font-size: 0.75em;
line-height: 1.2em;
color: #333;
}
#wrap{
width:971px;
text-align: left;
margin: 0;
margin-left: auto;
margin-right: auto;
background-image: url(../images/shadow.png);
background-repeat: repeat-y;
min-height: 860px;
}
nav#top_menu{
width: 600px;
margin: 50, 20, 0, 0;
float: right;
}
nav#top_menu ul{
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-weight: 100;
color: #333;
}
nav#top_menu ul li{
float: left;
margin: 0 5px;
}
nav#top_menu a{
display: block;
height: 20px;
padding: 10px;
text-decoration: none;
color: #333;
}
nav#top_menu a:hover{
background-image: url(../images/blue.gif);
background-repeat: repeat-x;
background-position: bottom;
}
#login{
float: right;
margin: 20px 64px 0 0;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
word-spacing: 5px;
}
#login a{
text-decoration: none;
color: #333;
}
#login a:hover{
color: #f90;
}
#logo{
float: left;
width: 265px;
margin: 40px 0 0 40px;
}
header{
height: 151px;
margin: 0;
padding: 0;
}
.clear{
clear: both;
}default.css
#main_img{
width: 971px;
height: 308px;
background-image: url(../images/img_back.png);
background-repeat: no-repeat;
background-position: center top;
}
#main_img img{
margin: 9px 0 0 0;
}
article#front{
border: 1px solid #ccc;
border-radius: 10px;
width: 910px;
min-height: 150px;
background: #ebebeb;
padding: 10px;
margin: 0 0 0 20px;
}
#hosting, #security, #payment{
width: 260px;
height: 30%;
float: left;
padding: 10px;
}front.css
filezila 통해서 domain 에 올리기
오전 수업 끝
개발자 준비의 준비준비중..