쉬운 예제 중심의 HTML5 / CSS / MediaQuery / JQuery 강의

<!DOCTYPE html>
HTML5문서라는 선언
<html> …</html>
HTML을 시작하고, 끝낸다는 표시를 하는 태그
<head> …</head>
HTML의 정보를 담는 부분의 시작과 끝을 표시하는 태그. 이 태그는 <html></html> 안에 넣어야만 한다.
<title> … </title>
이 홈페이지의 제목을 쓰는 태그로 두 태그의 중간에 글을 넣는다. 이 태그 안에 쓴 내용이 브라우저 창의 왼쪽
상단에 나오게 된다. 이 태그는 <head></head> 안에 넣어야만 한다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta charset=“utf-8”>
<title> HTML5 기초</title>
</head>
<body>
Hello HTML5 안녕!
</body>
</html>

<body> …</body>
HTML 페이지의 내용을 담는 그릇인 태그로 내용은 <body>와 </body> 안에 모두 넣어야만 한다. 예에서 볼
수 있듯이 body 태그 안에는 다양한 속성을 넣을 수 있게 된다.
* 속성은 각각의 태그안에 위치하면서 태그의 특징을 추가로 넣어줄 때 사용하는 것이며, 각 태그마다 넣을 수 있는 속성
이 정해져 있다. body 같은 경우는 bgcolor, text, alink, link, vlink, background 등이 있고, table과 같은 태그의 경우
width, height, cellpadding, cellspacing, border 와 같은 속성을 추가해 줄 수 있다.
<body bgcolor="#FF8D5E" TEXT="#ff2020" LINK="#202020" VLINK="#202020" ALINK="#202020"></body>
bgcolor
바탕 화면의 컬러를 나타낸다. bgcolor 대신 혹
은 추가로 background라는 태그로 그림을 바
탕에 둘 수도 있다.
text
텍스트의 색을 나타내는 속성으로 뒤의 색은
RGB의 16진수 형태로 색을 넣는다. 이 컬러는
포토샵의 컬러팔레트에서 찾아낼 수 있다.
link
하이퍼링크가 적용된 텍스트의 컬러를 나타낸
다.
vlink와 alink
alink는 누르는 순간 텍스트의 컬러, vlink는 한
번 눌리고 나서의 텍스트 컬러를 나타낸다.
<body background="a.gif">

<center></center>
이 태그 안에 위치한 텍스트나 그림들은 중간으로 배치가 바뀐다.
<img>
이미지를 불러오는 태그이며, 사용은 예와 같이 한다. 다른 태그와 다르게 뒤에 </img>와 같이 태그를 닫지 않
는다. 하이퍼링크가 걸릴 경우에는 속성으로 border="0"을 추가해 준다.
<img src="b.jpg" border="0">
<a> …</a>
하이퍼링크를 사용하기 위해서 쓰는 태그로, 사용은 아래의 예와 같이 한다.
* 하이퍼링크는 페이지간의 이동을 용이하게 하기 위해 만들어진 기능으로, html이라는 언어는 이 기능으로 인하여 광
범위한 사용자를 가지게 되었다. 책에 있는 인덱스 기능을 모든 페이지에 넣을 수 있기 때문에 비선형적인 인터랙션이
가능하다는 장점이 있다.
<a href="b.html">b페이지로 가기</a>
<font> ...</font> <b> ...</b> <i> ...</i>
텍스트를 사용할 때 텍스트의 색이나 크기를 결정하기 위해서 각각의
텍스트 앞과 뒤에 쓰는 태그다. 이 태그의 경우 CSS(Cascading Style
Sheet)라는 속성과 섞이면 다양한 텍스트 효과를 낼 수 있다.
<b>는 볼드체를 쓸 때, <i>는 이탤릭체를 쓸때 텍스트 앞뒤를 태그로
열고 닫아주면 된다.
<font color="#ff1000" size="3">텍스트 일반 속성 정하기</font>
<font color="#3020a0" style="font-size: 9pt; font-family:돋움;">스타일 속성이 적용된 텍스트</font>

<br>
html에서 엔터를 한번 넣어주는 기능으로 그대로 <br>이라고 쓴다. 이미지 뒤에 엔터를 넣어주기 위해서 <br
clear="all">의 형식을 사용하기도 한다.
<table><tr><td> …</td></tr></table>
<table>태그는 HTML에서 가장 중요한 태그로, 페이지의 레이아웃을 결정하는 가장 큰 기능을 한다. 페이지의
편집 그리드를 만들기 위해서 대부분의 웹페이지에서 수차례 겹친 형태로 사용한다.
<table width="100" height="100" border="1"><tr><td></td></tr></table>
<table>은 표를 만들겠다는 의미다. 여기에 width="100"
height="100"이라고 기입하면 가로 세로 100픽셀 크기의
표가 된다는 의미가 된다. 또 border=“1”이라고 쓰면 1픽
셀의 테두리를 그어주겠다는 뜻도 된다.
<tr>은 표안에 한줄을 만들겠다는 뜻이다. 만약 <tr>을
써주지 않고 <table>만 만들어주면 표가 만들어지지 않
는 문제가 생긴다.
<td>는 표의 <tr>안에만 위치 할 수 있으며, 동시에 한
칸을 의미한다. 쓰여있는 한줄을 그대로 보면 100*100 픽
셀의 표에 한줄, 한칸만 넣어주게 된다.
<table width="100" height="100" border="0" cellpadding="0" cellspacing="0"
bgcolor="#ff0000">
cellpadding은 표의 매 칸마다 몇 픽셀의 여분 공간을 두
겠는지에 대한 정의를 해준다.
cellspacing은 표의 테두리 공간을 몇 픽셀로 하겠는지에
대한 정의를 하는 곳이다.

<tr height="100" width="100" bgcolor="#0000ff">
tr 안에는 세로와 가로 크기를 픽셀 기준으로 정할 수 있고, 동시에 한 줄의 색도 정할 수
있는 속성을 넣을 수 있다.
<td width="100" height="100" bgcolor="#ffff00" align="center" valign= "bottom">
td 안에는 정렬에 대한 속성을 넣어 줄 수 있다. align은
가로 정렬로 left, center, right의 값을 통해 가로로 왼쪽에
둘지 중간에 배치할지, 그리고 오른쪽에 배치할지를 넣어
줄 수 있고, valign을 통해서 top, middle, bottom의 값을
통해 상단, 중간, 하단 배치를 결정할 수 있다.
<table cellpadding="10" cellspacing="5" border="0" width="300" height="100" bgcolor="#404040">
<tr><td width="150" height="100" align="right" valign="middle" bgcolor="#ff0000">우측중간</td>
<td width="150" height="100" align="left" valign="top" bgcolor="#ffff00">좌측상단</td></tr>
</table>
예시 1)

<td width="200" height="100" align="left" valign="top" bgcolor="#ffff00">좌측상단</td></tr>
<tr><td width="100" height="100" align="left" valign="bottom" bgcolor="#ffffff"> 좌측하단</td>
<td width="200" height="100" align="center" valign="middle" bgcolor="#ffff00">정중앙</td></tr>
</table>
예시 2)

<td colspan="2" width="300" height="100" bgcolor="#ffff00" align="center" valign=
"bottom">
엑셀이나 워드의 표에서는 두칸이상의 공간을 하나로 합치는 기능이 있다. html에서도 이런
기능이 있는데 rowspan과 colspan이 이런 기능이다. colspan은 가로로 몇칸을 합칠지 결정
하는 속성이고, rowspan은 세로로 몇칸을 합칠지를 결정하는 기능이다.
<tr><td colspan="2" width="300" height="100" align="right" valign="middle" bgcolor="#ff0000">가로로두
칸</td></tr>
<tr><td width="100" height="100" align="left" valign="bottom" bgcolor="#ffffff"> 좌측하단</td>
<td width="200" height="100" align="center" valign="middle" bgcolor="#ffff00">정중앙</td></tr>
</table>
예시 1)

<td rowspan="2" width="200" height="200" align="left" valign="top" bgcolor="#ffff00">세로로두칸
</td></tr>
<tr><td width="100" height="100" align="left" valign="bottom" bgcolor="#ffffff"> 좌측하단</td></tr>
<tr><td width="100" height="100" align="center" valign="top" bgcolor="#efefef"> 중앙상단</td>
<td width="200" height="100" align="center" valign="bottom" bgcolor="#3905ef">중앙하단</td></tr>
</table>
예시 2)

body { ... }
body 태그안에 들어가 있는 속성들을 수정하기 위해서 body { ..속성 내용들.. } 이런 형태의 구성을 사용한다.
만약 <h1> 이라는 태그 안에 들어가 있는 정보의 속성을 수정하려면 h1 { .... } 이렇게 작성한다.
body {
font-family : 돋움, Dotum, Sans-Serief;
font-size : 15px;
line-height : 18px;
background-size : cover;
background : url('./image/bg.gif');
color : #ff0000;
background-color:#ffff00;
}

<a class=“hyper” href=“http://google.co.kr”> class 속성
HTML5 코드
CSS 코드
<a class="hyper" href="http://google.co.kr">
<img class="logo" src="css/image/logo. gif" alt="google.co.kr"
width="150" height="60">
</a>
body {
font-family : 돋움, Dotum, Sans-Serief;
font-size : 15px;
line-height : 18px;
background-color : #ffff00;
}
a.hyper {
position : absolute;
top : 15px;
left : 10px;
display : block;
width : 300px;
height : 170px;
border : 1px solid #000000;
background : url('./image/bg. gif') no-repeat 1px 1px;
}
a.hyper .logo {
position : relative;
top : 20px;
left : 110px;
}
a.hyper:hover {
border : 3px solid #ff0000;
}
a.hyper:active, a.hyper:focus {
background-color:#0000ff;
}

반응형 웹
반응형 웹은 간단히 mediaquery라는 CSS코드만으로도 제작이 가능하다.
<!DOCTYPE html><html lang="kr">
<head>
<meta charset="utf-8" />
<title>안녕 반응형 웹</title>
<link rel="stylesheet" type="text/css" href="mediaquery.css" />
</head>
<body>
<center>
<img class="headline" src="headline.jpg" border="0“>
<div class="boxes">
<div class="navi"> ... </div>
<div class="contents"> ... </div>
<div class="contents2"> ... </div>
</div>
</center>
</body>
</html>
HTML5 코드

반응형 웹
CSS 코드
@media all and (min-width:784px) { … }
@media all and (min-width:480px) and (max-width:784px) { … }
@media all and (max-width: 480px) { … }
화면 가로 사이즈가 최소 784px 일 때. 즉 화면 사이즈가 784보다 커졌을 때는 중괄호 { } 안에 있
는 스타일을 적용하라는 의미
화면 가로 사이즈가 480보다 크고 784보다 작은 사이즈일 때 중괄호 { } 안에 있는 스타일을 적용
하라는 의미
화면 가로 사이즈가 480보다 작은 사이즈일 때 중괄호 { } 안에 있는 스타일을 적용하라는 의미
화면 가로 사이즈가 최소 784px 일 때. 즉 화면 사이즈가 784보다 커졌을 때는 중괄호 { } 안에 있
는 스타일을 적용하라는 의미
아래의 코드 세 세트를 mediaquery.css에 넣어주고 중괄호 안의 내용만 바꿔주면 responsive-web
을 구현할 수 있다.

반응형 웹
@media all and (min-width:784px) {
img.headline { width: 784px; }
div.boxes { background-color:#ddd; width:784px; }
div.navi{ background-color:#000; float:left; width:100px; height:500px; margin-right:10px; }
div.contents{ background-color:#f00; float:left; width:330px; height:500px; margin-right:7px; }
div.contents2{ background-color:#0f0; float:right; width:330px; height:500px; margin-right:7px; }
}
@media all and (min-width:480px) and (max-width:784px) {
img.headline { width: 100%; }
div.boxes { background-color:#ddd; width:100%; }
div.navi{ background-color:#000; float:top; height:60px; width:98%; }
div.contents{ background-color:#f00; float:middle; height:200px; width:98%; }
div.contents2{ background-color:#0f0; float:bottom; height:200px; width:98%; }
}
@media all and (max-width: 480px) {
img.headline { width: 100%; }
div.boxes { background-color:#ddd; width:100%; }
div.navi{ background-color:#000; float:top; height:60px; width:98%; }
div.contents{ background-color:#f00; float:bottom; height:300px; width:98%; }
div.contents2{ display:none; }
}
mediaquery.css

jQuery란?
JavaScript와 CSS를 이용한 다이나믹한 웹사이트를 쉽게 제작할 수 있도록 도와주는 스크립트 라이브러리로
http://jquery.com/에서 다운로드 받아 제작하는 웹사이트에 바로 JQuery기능들을 적용할 수 있다. jQuery는
MIT License하에 배포되고 있는 오픈소스 프로젝트이며, 카피라이트 헤더를 삽입하는한 상업적 / 비상업적 사
용이 모두 허용된다.
jQuery Install
http://jquery.com/에서 jquery-1.9.1.min.js (버전이 다를 수 있음)을 다운로드 받아 본인의 개발 디렉토리 안에
위치시킨다. 물론 자유롭게 배치해도 무방하다.
<head>
<script src="jquery-1.9.1.min.js"></script>
</head>
만약 다운로드가 어렵거나 네트워크에 언제나 연결된 상태라면 아래와 같이 직접 연결도 무방하다
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
</head>

jQuery 기본 문법
$( A ).action( B )
"A 라는 HTML 문서의 특정 요소가 action이라는 행동을 했을 때 B 를 행하라"의 기본 형식을 따른다.
$(this).hide() - 현재 요소를 화면에서 없애버려라
$("p").hide() - <p> 요소를 화면에서 몽땅 없애버려라
$(".test").hide() - class="test"라는 속성을 가진 요소를 찾아 화면에서 몽땅 없애버려라
$("#test").hide() - id="test"인 요소를 찾아 화면에서 없애버려라
문서가 준비되었는지 확인한 후, 이제 스크립트를 활성화시킬 때
$(document).ready(function(){
// jQuery 함수와 문법들이 이곳에 들어갑니다.
});
$(document)는 현재의 창에 떠있는(있을 예정인) 문서를 의미한다.
문서가 준비되면, "function() { ... } 아래의 ... 부분에 있는 내용을 실행(준비)하시오"라는 의미다.
어떤 형식이든 뭔가 작동하길 바란다면 function () { ... } 부분을 소괄호 안에 집어 넣어야 한다. 소괄호 안에서
엔터를 쳐도 아무 문제없이 작동하니 작동시 혼동하지 않으려면 글줄 정리를 잘해야만 한다.

이벤트
click : 마우스가 클릭되었을 때
dblclick : 마우스 더블클릭 시
scroll : 마우스 스크롤이 움직이면
mouseenter : 마우스가 HTML화면안으로 들어왔을 때
mouseleave : 마우스가 HTML화면에서 떠났을 때
keypress : 키가 눌렸을 때
keydown : 키가 눌리는 순간
keyup : 키를 눌렀다 떼었을 때
submit : 문서의 form에서 확인버튼을 눌렀을 때
change : 변화가 있을 때
resize : 크기가 바뀌었을 때
focus : 어떤 개체가 선택된 상태일 때
blur : 어떤 개체가 선택이 풀린상태일 때
$("p").click(function(){
$(this).hide();
});
$("p").dblclick(function(){
$(this).hide();
});
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

JQuery Effect
1. show / hide
show() Shows the selected elements
hide() Hides the selected elements
toggle() Toggles between the hide() and show() methods
2. fadeIn / fadeOut / fadeTo
fadeIn() Fades in the selected elements
fadeOut() Fades out the selected elements
fadeTo() Fades in/out the selected elements to a given opacity
fadeToggle() Toggles between the fadeIn() and fadeOut() methods
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js">
</script>
<script>
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-
color:red;"></div><br>
color:green;"></div><br>
color:blue;"></div>
</body>
</html>

3. slideUp / slideDown
slideUp() Slides-up (hides) the selected elements
slideDown() Slides-down (shows) the selected elements
slideToggle() Toggles between the slideUp() and slideDown() methods
4. animate
animate()
$( A ).animate({ B },speed,callback);
A라는 요소는 B 위치에 위치와 크기, 투명도 등의 css코드를 넣어주게 되면 해당 크기와 위치, 투명도로
애니메이션이 된다. 만약 speed를 넣어주면 속도가 결정된다.
$("div").animate({left:'250px'});
});
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
$("div").animate({
height:'toggle'
});
});

<!DOCTYPE html>
<html>
<head>
</script>
<script>
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and
cannot be moved. To manipulate the position, remember to first
set the CSS position property of the element to relative, fixed, or
absolute!</p>
<div
style="background:#98bf21;height:100px;width:100px;position:
absolute;">
</div>
</body>
</html>
animate 예시 1)

<!DOCTYPE html>
<html>
<head>
</script>
<script>
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position,
remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
animate 예시 2)

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$("#buttonRight").click(function () {
var text01 = $("#text01");
text01.animate({left:'300px', height:'200px', opacity:'0.7'});
text01.animate({ top:'300px', width:'200px', opacity:'0.2'});
});
$("#buttonLeft").click(function () {
var text01 = $("#text01");
text01.animate({top:'80px', width:'100px', opacity:'0.7'});
text01.animate({left:'50px', height:'100px', opacity:'1.0'});
});
$("#buttonSlideUp").click(function () {
$("#text02").slideUp(300);
});
$("#buttonSlideDown").click(function () {
$("#text02").slideDown(300);
});
$("#buttonFadeIn").click(function () {
$("#text03").fadeIn(1000);
});
$("#buttonFadeOut").click(function () {
$("#text03").fadeOut(1000);
});
$("#buttonFadeToggle").click(function () {
$("#text03").fadeToggle(1000);
});
});
</script>
<style>
#text01 {
position:absolute;
left:50px; top:80px;
width:100px; height:100px;
background-color:#f00;
}
#text02 {
position:absolute;
background-color:#ff0;
}
#text03 {
position:absolute;
background-color:#0ff;
}
font {
color:#00f;
font-size:11px;
}
.b01 {
color:#000;
font-weight:bold;
font-size:11px;
}
</style>
</head>
<body>
<font id="buttonRight">to Right</font> |
<font id="buttonLeft">to
Left</font><br>
<font
id="buttonSlideUp">slideUp</font> |
<font
id="buttonSlideDown">slideDown</font>
<br>
<font id="buttonFadeIn">fadeIn</font> |
<font
id="buttonFadeOut">fadeOut</font> |
<font
id="buttonFadeToggle">fadeToggle</fon
t>
<div id="text01"><font
class="b01">TEXT01 BOX</font></div>
class="b01">TEXT02 SLIDE</font></div>
class="b01">TEXT03 FADE</font></div>
</body>
</html>
JQuery 전체 예시)

쉬운 예제 중심의 HTML5 / CSS / MediaQuery / JQuery 강의

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to 쉬운 예제 중심의 HTML5 / CSS / MediaQuery / JQuery 강의 (20)

쉬운 예제 중심의 HTML5 / CSS / MediaQuery / JQuery 강의