쉬운 예제 중심의 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)

<table cellpadding="1" cellspacing="1" border="0" width="300" height="200" bgcolor="#404040"> <tr><td width="100" height="100" align="right" valign="middle" bgcolor="#ff0000">우측중간</td> <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은 세로로 몇칸을 합칠지를 결정하는 기능이다.

<table cellpadding="0" cellspacing="0" border="0" width="300" height="200" bgcolor="#404040"> <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)

<table cellpadding="0" cellspacing="0" border="0" width="300" height="300" bgcolor="#404040"> <tr><td width="100" height="100" align="right" valign="middle" bgcolor="#ff0000">우측중간</td> <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 – responsive-web

반응형 웹 반응형 웹은 간단히 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

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 src="jquery-1.9.1.min.js">

</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 src="jquery-1.9.1.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ 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; left:50px; top:350px; width:500px; height:100px; background-color:#ff0; } #text03 { position:absolute; left:50px; top:480px; width:500px; height:100px; 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</font> <div id="text01"><font class="b01">TEXT01 BOX</font></div> <div id="text02"><font class="b01">TEXT02 SLIDE</font></div> <div id="text03"><font class="b01">TEXT03 FADE</font></div> </body> </html>

JQuery 전체 예시)

쉬운 예제 중심의 html5 / css / mediaquery / jquery 강의

Design