'분류 전체보기' 카테고리의 글 목록

jQuery 이벤트 사용하기!

Programming/Java Script + jQuery 2015. 12. 16. 21:46

이벤트 란?

마우스를 움직이거나 키를 입력하고, 창 크기를 조절하는 등 이런 행동들을 보고 이벤트가 발생했다라고 인식합니니다.

<--이벤트 종류-->

<--마우스 이벤트-->

이벤트	설명
click	마우스 버튼을 클릭 하였을 때 발생
dblclick	마우스 버튼을 두 번클릭 하였을 때 발생
mousedown	마우스를 누른 뒤 때지 않고 아래로 드레그 할 때
mouseup	마우스를 누른 뒤 떄지 않고 위로 드레고 할 때
mouseover	마우스를 HTML요소 위에 올리면 발생
mouseout	마우스가 HTML요소가 벗어 날 때 마우스 아웃 이벤트가 발생
mousemove	마우스가 움직일 때 마다 발생

<--Document/WIndow 이벤트-->

이벤트	설명
load	웹 브라우저가 웹 페이지에 사용할 모든 파일의 다운로드를 완료 했을 때 발생
resize	최대화 버튼을 클릭하거나 브라우저 창의 크기를 조절하면 발생
srcoll	웹 페이지를 스크롤 할 때 발생(스크롤 바가 없으면 발생하지 않음)
unload	다른 페이지로 이동하거나 브라우저 탭을 닫거나 브라우저 창을 닫을 때 발생

<--폼 이벤트-->

이벤트	설명
submit	방문객이 폼을 전송할 떄 전송 이벤트 발생.
reset	작성 헀던 폼을 완전히 초기화 가능
change	상태가 변경 되었을 때 발생(체크박스를 예로 들 수 있다.)
focus	탭을 누르거나 텍스트 필드를 클릭하면 이벤트 발생
blur	탭을 누르거나 필드 바깥을 클릭해서 현재 포커스를 가진 필드에서 빠져나갈 때

<--키보드 이벤트-->

이벤트	설명
keypress	키를 누르는 순간 이벤트 발생(꾹 누르면 계속 발생)
keydown	키눌림 이벤트가 발생하기 직전에 발생.
keyup	키를 눌렀다 떼는 순간에 발생

<--이벤트 사용 방법-->

1. 이벤트를 할당 할 때.

$('menu').click();

△선택자 .click()형태로 추가해 줍니다.(click이 아닌 다른 이벤트 도)

2. 이벤트에 함수 전달 할 때.

$('menu').click(starthide());

△이벤트를 할당하고 이벤트의 ()안에 실행할 함수를 넣는는다.

3.익명함수로 사용할 때

$('menu').click(function(){

//code

});

▲ 선택자로 선택을한 뒤 이벤트를 할당해 주고, 이벤트의 괄호 안에 function을 넣는다.

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery CSS 속성 읽고 바꾸기 & 익명함수 (1)	2015.12.14
jQuery 콘텐츠 추가! (0)	2015.12.14
jQuery 선택자 & 필터 (0)	2015.12.11
jQuery 시작! (0)	2015.12.09

KimMinSung

,

jQuery CSS 속성 읽고 바꾸기 & 익명함수

Programming/Java Script + jQuery 2015. 12. 14. 20:19

CSS속성을 읽거나 바꾸는 함수드들을 알아봅시다.

<--CSS 읽기/바꾸기-->


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
	  $('#content').ready(function(){
	    var B_ground = $(".test").css("background-color");
	    $(".test").css("background-color", '#FE0037');
	    alert(B_ground);
	  });
	</script>

	<style type="text/css">
		.test{
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class = "test">
		Blue Text!
	</div>
</body>
</html>

▲위 코드는 간단히 CSS의 값을 받아와 출력하는 것과 CSS 변경 하는 것을 보여준다.

△위 스크립트 코드 2번째(CSS변경 코드)를 이용하면 CSS를 추가도 가능하다.


var baseFont = $('body').css('font-size');
baseFont = parseInt(baseFont,10);
$('body').css('font-size',baseFont);

△위의 또다른 예제는 font크기를 다른 폰트에도 똑같이 적용하는 것을 보여준다.

▲왜 복잡 하냐면 font-size를 변수에 넣을떄 XX px 의 꼴로들어 가게되는데 px부분을 제거하기 위해서 parseInt를 사용한다.

<--여러개의 CSS속성을 바꾸기-->

위의 예제 처럼 하나하나 바꿔줘야 할 때도 있지만 한번에 여려개를 바꿔야하는 경우도 있습니다. 한번 알아보자!


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
	  $('body').ready(function(){
	    $('.test .syntax').css({'background-color' : 'red',
				    'font-size' : '20px',
				    'border' : '10px'});
	  });
	</script>
</head>
<body>
	<div class = "test">
		<p class = "syntax">Test syntax!!</p>
	</div>
</body>
</html>

▲2개 이상의 CSS속성을 줄때는 위 처럼 사용한다.

△css({'CSS' : '값' , 'CSS' : '값' , ....});

<--HTML 속성 읽고 설정하고 제거하기-->

HTML 속성 읽고 설정하는데에는 두개의 함수가 있습니다.

바로 attr(), removeAttr() 함수이다.

<--attr() & removeAttr()-->


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
	  $('body').ready(function(){
	    var path = $('.test img').attr('src');
	    $('.test').append('<p>'+path+'</p>');
	    $('.test img').attr('src','http://postfiles6.naver.net/20150115_261/0314tnrud_1421325513038b1nCg_JPEG/%C4%AD%C4%DA%B7%B9_2%C8%AD_%289%29.jpg?type=w1');
	  });

	  $(function(){
	  $('.test #remove').click(function(){
	    $(".test img").removeAttr("src");
	  });
	});
	</script>
</head>
<body>
	<div class = "test">
		<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
		<input type = "button" value = "remov img" id = "remove">
	</div>
</body>
</html>

△처음 ready 함수는 append()로 원래 주소를 보여주고 attr()로 바꾼 이미지를 보여준다.

▲click()함수는 button을 클릭하면removeAttr()을 사용해 이미지가 사라지는 것을 보여준다.

<-- fadeOut() -->


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
	  $(function(){
	  $('.test #remove').click(function(){
	    $(".test img").fadeOut();
	  });
	});
	</script>
</head>
<body>
	<div class = "test">
		<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
		<input type = "button" value = "fade Out" id = "remove">
	</div>
</body>
</html>

△fadeOut()적용 예제이다. 서서히 사라지는 것을 볼 수있다.

<-- Each와 익명 함수 -->

$('   ').each(function(){
	  		//code
});
each는 함수의 시작을 알려주고, function()은 익명함수이다.

※책에 나오는 사용법으로는 주로 반복을 하는 코드일 때 사용한다고 나온다.


$('img').each(function(){
       alert("img!");
});

△이미지가 한 10개 정도 있는 페이지에 저렇게 쓰면 10번 출력될 것 이다...

사용예
	<script type="text/javascript">
	$(document).ready(function(){
	  	$('a[href^="http://"]').each(function(){
	  			var extLink = $(this).attr('href');
	  			alert(extLink);
	  	});
	});
	</script>
</head>
<body>
	<a href="http://www.naver.com/"></a>
	<a href="http://www.daum.net/"></a>
	<a href="https://www.google.co.kr/?gws_rd=ssl"></a>
</body>

▲위의 this는 $('a[href^="http://"]')를 가리키고 있다.

△순서 대로 찾으면서 하나씩 alert로 출력 해줄 것 이다.

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 이벤트 사용하기! (0)	2015.12.16
jQuery 콘텐츠 추가! (0)	2015.12.14
jQuery 선택자 & 필터 (0)	2015.12.11
jQuery 시작! (0)	2015.12.09

KimMinSung

,

jQuery 콘텐츠 추가!

Programming/Java Script + jQuery 2015. 12. 14. 19:43

<--페이지에 콘텐츠 추가-->

-페이지에 콘텐츠를 다루는 함수를 알아보자!

우리가 사용할 예제 코드를 봅시다.


<body>
<div id = "header">
	<div class = "Message">
		<h2>Error Message!</h2>
	</div>
</div>
</body>
▲이번 콘텐츠 추가에 우려먹을 코드

<-- .html() -->


<script type="text/javascript">
		$(document).ready(function(){
			alert($('.Message').html());
			$('.Message').html('<p>Wrong!!!</p>');
		});// 끝
</script>

＃alert부분 처럼 사용하면 특정 HTML 요소 내부의 HTML을 복사해 다른 HTML요소에 전달이 가능합니다

#두번째 처럼 문자열을 인수로 줄 경우에는 문자열이 치환 됩니다.

▲처음은 ErrorMessage라는 경고창이 뜨지만 확인을 누르면 문자열이 Wrong!!!으로 바뀐다.

<-- .text() -->


<script type="text/javascript">
		$(document).ready(function(){
			$(".Message h2").text("Hello World");
		});// 끝
</script>

#문자열을 " Hello Message "로 치환해 줍니다.

▲Error Message 가 Hello World로 치환된 것을 볼 수 있습니다.

<-- .append() & prepend() -->


<script type="text/javascript">
		$(document).ready(function(){
			$(".Message").append("<p>append Error</p>");                        $(".Message").prepend("<p>prepend Error</p>");		});// 끝
</script>

#HTML요소에 HTML을 추가할 떄 사용합니다.

▲위를 보면 prepend는 html 상단에 추가되고, append는 하단에 추가되는 것을 볼 수 있다!

<-- .before() & .after() -->

-선택한 HTML요소 바깥에 HTML을 추가하고 싶을 때 사용하는 명령어.

-befoer은 HTML요소 앞에 after은 뒤에 추가한다.

Ex)

Id를 받는 폼이 있을 때 사용자가 Id를 입력 안했다면, "사용자 이름 입력"이라는 문구를 띄울 떄 사용한다.

<-- .remove() & .replace() -->


<script type="text/javascript">
		$(document).ready(function(){
				$('div.Message').remove();
				$('#header').append('<div class = "New"><p>New Div</p></div>');
		});// 끝
</script>

#remove로 삭제해보았습니다..

#replace는 잘 몰라서 .... 나중에 사용해 봐야것지..

▲삭제 된 뒤 새로운 DIV를 추가해 보았다

<-- .addclass() & .removeclass() -->


	<script type="text/javascript">
		$(document).ready(function(){
			$('#header .Message h2').addClass('add_h2');
		});// 끝
	</script>

#addClas()로 h2에 class를 추가시켜 보았다.


	<script type="text/javascript">
		$(document).ready(function(){
			$('#header .Message h2').addClass('add_h2');
			$('#header .Message .add_h2').removeClass('add_h2');
		});// 끝
	</script>

#removeClass를 사용하여 add_h2를 지워보았다.

<-- .toggleClass() -->


	<title>Meta tag</title>

	<script type="text/javascript">
	$(function(){
	  $('#content').click(function(){
	    $("body").toggleClass("change_body");
	  });
	});
	</script>

	<style type="text/css">
		body{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		.change_body{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<input type = "button" value="Button" id = "content">
</body>

▲toogle클래스를 사용하여 class를 생성했다가 버튼을 누르면 삭제되는 예제.

△toogle은 class가 없으면 class를 생성 있으면 삭제하는 역할을 한다.

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 이벤트 사용하기! (0)	2015.12.16
jQuery CSS 속성 읽고 바꾸기 & 익명함수 (1)	2015.12.14
jQuery 선택자 & 필터 (0)	2015.12.11
jQuery 시작! (0)	2015.12.09

KimMinSung

,

jQuery 선택자 & 필터

Programming/Java Script + jQuery 2015. 12. 11. 11:22

jQuery에서 Class , name이나 id 등을 선택하려면 어떻게 해야 할까요?

<선택자>

-아이디 선택자-

Ex)

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#message');
		});// 끝
	</script>
</head>
<body>
<p id = "message">Message !</p>
</body>
▲위 소스코드 처럼 $('#');을하고 아이디를 씁니다 (CSS와 같네요..)

-HTML요소 선택자-

Ex)

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$('p');
		});// 끝
	</script>
</head>
<body>
<p id = "message">Message !</p>
</body>
▲<p>태그를 모두 선택하고 싶을 때는 저렇게 태그이름을 주면 됩니다.

-클래스 선택자-

Ex)

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$('.message').hide();
		});// 끝
	</script>
</head>
<body>
<p class = "message">Message !</p>
</body>
▲아까 위에서 설명했던 대로 CSS처럼 $('.');을 주고 이름을 쓰면 됩니다.
▲위를 보면 .hide가 써져있는데 message를 모두 숨기라는 뚯입니다(한번 직접 해보세요^^).

-하위 선택자-

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#header p');
		});// 끝
	</script>
</head>
<body>
<div id = "header"><p>Message !</p></div>
</body>
▲CSS 처럼 안에있는 것을 선택할 때 위 예제 처럼 해주면 됩니다.

-자식 선택자-

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#header > p');
		});// 끝
	</script>
</head>
<body>
<div id = "header"><p>Message !</p></div>
</body>
▲자식을 선택할 떄는 '>'를 사용합니다. (header태그의 자식인 p를 선택해 보았다.)

<--인접 형제 선택자-->

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$('#header + p');
		});// 끝
	</script>
</head>
<body>
<div id = "header"><p>Message !</p></div>
</body>
▲바로 앞이나 바로 뒤에있는 태그를 선택한다.
△으.. 이 부분은 정확하지 않습니다!!(안 써봣기에..)

<--속성 선택자-->

<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			$(a[herf]);
			$(a[herf^="http://"]);
			$(a[herf$=".com"]);
			$(a[herf*="naver.com"]);
		});// 끝
	</script>
</head>
<body>
<a href="http://www.naver.com"></a>
</body>
▲a[herf]는 herf기능이 있는 <a>태그를 모두 포함 시킨다.
▲a[herf^="http//"]는 http://로 시작하는 <a>태그를 포함 시킨다.
△a[herf$=".com"]은 .com으로 끝나는 <a>태그를 포함시킨다.
△a[herf*="naver.com"]은 herf안에 naver.com이 포함되어 있으면 전부 포함시킨다.

=====================

필터는 선택자를 사용할 떄 보다 정교하게 선택을 가능하게 해줍니다.

<--jQuery 필터-->

<-- :even & :odd -->

- ":even" 필터는 선택한 HTML요소 중에서 짝수 번째 선택자를 선택해 줍니다. (odd는 홀수)

$('tr:even');

▲ 짝수번째에 있는 tr태그만 선택

<-- .striped -->

- .striped는 class를 가진 테이블로 한정 시키는 필터입니다.

$('.striped tr:even');

▲class를 가진 테이블에있는 짝수 번째를 선택

<-- :first & :last -->

- first는 HTML요소중 첫 번째 HTML요소를 선택한다(last는 마지막 요소)

$('tr:first');

▲HTML요소 중 첫번째 tr태그를 선택

<-- :not -->

-not은 특정 선택자에 해당하지 않는 HTML요소를 찾을 떄 사용한다.

$('a:not(.navButton)');

▲.navButton클래스를 가지지않은 a태그를 찾을 떄

<-- :has -->

- has는 또 다른 선택자를 포함하고 있는 HTML요소를 찾을 떄 사용.

$('li:has(a)');

▲a를 포함하고 있는 li태그를 찾아라

<-- :contains -->

-contains태그는 특정 텍스트를 포함하고 있는 HTML요소를 찾을 때 사용합니다.

$('a:contains("Message")');

▲Message라는 텍스트가 a안에 있으면 선택!

<-- :hidden -->

- hidden은 숨겨진 HTML요소를 찾는다. 숨겨진 요소의 기준은 display가 none일때 .hide()함수 라던가 넓이/높이가 둘다 0인 요소 type = hidden인 필드등이 있다.

$('div:hidden').show;

▲숨겨져 있는 div를 찾아서 보여줍니다.

<--함수 체이닝-->

HTML요소에 여러 함수를 한번에 적용하고 싶을 때 사용하는 기술 입니다.

$('#popUp').width(300).height(300).text("Hi!!").fadeIn(1000);

▲#popUp인 것에 width(300)이고 height(300) ...을 한번에 적용이 가능합니다.

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 이벤트 사용하기! (0)	2015.12.16
jQuery CSS 속성 읽고 바꾸기 & 익명함수 (1)	2015.12.14
jQuery 콘텐츠 추가! (0)	2015.12.14
jQuery 시작! (0)	2015.12.09

KimMinSung

,

jQuery 시작!

Programming/Java Script + jQuery 2015. 12. 9. 10:38

<jQuery를 배우는 이유.>

Html과 CSS만하면 웹이 딱딱해지기 때문에 jQuery를 사용해서 유연성 있게 하려고 jQuery를 배웁니다.

<jQuery 다운로드>

http://jquery.com/download/ 에 들어갑니다.

▲위에서 다운받으시면 됩니다.

-다운을 안받고 사용하는 법으로는 소스에 그냥 추가하는 법도 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="js/jquery-1.11.2.js"></script>
	<title>Meta tag</title>

	<script type="text/javascript">
		$(document).ready(function(){
			//여기에 코드 입력
		});
	</script>
</head>
<body>

</body>
</html>

△저것 처럼 google에서 다운받아 온뒤 script로 링크시키는 방법이 있습니다.

▲(document).ready는 페이지를 다 읽은 뒤 스크립트를 실행하라는 뜻 입니다.

<기억해야할 사항 들>

-jQuery파일 연결을 jQuery사용하는 프로그래밍보다 앞에있어야한다.

-CSS뒤에 자바스트립트 프로그래밍을 추가하기!

-주석을 추가하여 함수가 끝나는 지점 표시!

<jQuery의 동작>

1. HTML요소를 얻는다.

Ex)

<body>, <h1>, <div>등을 얻어서 사용한다.

2. HTML요소로 무언가를 한다.

-HTML요소의 속성변경

-새 콘텐츠 추가

-HTML 요소 제거

-HTML요소 정보추출

-클래스 속성 추가/제거

->이렇게 2가지가 jQuery의 흐름 입니다.

<문서 객체 모델>

옛날에 사용하던 방식으로 DOM(Document Object Model)이 있습니다.

DOM방식과 jQuery방식의 다른점을 봅시다.

var id = document.getElmentById('xxx'); << DOM

var id = $('xxx'); << jQuery

딱 봐도 jquery가 더 편해보입니다.

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 이벤트 사용하기! (0)	2015.12.16
jQuery CSS 속성 읽고 바꾸기 & 익명함수 (1)	2015.12.14
jQuery 콘텐츠 추가! (0)	2015.12.14
jQuery 선택자 & 필터 (0)	2015.12.11

KimMinSung

,

CSS3 여러 스타일 시트

Programming/Html5 + CSS 2015. 12. 3. 15:41

앞에서는 스타일 시트가 무엇인지 어떻게 사용하는지 기본적인 사용법을 보았다!

이번에는 여러 스타일 시트를 알아볼 것 이다@_@!

<--Background style site-->

Background style site는 백그라운드를 건드릴 수 있는 site이다.

<--종류-->

Site	옵션	값	설명
background	-color	색상 값	백그라운드 색상 저장
	-image	URL	백그라운드 이미지
	-repeat	repeat	백그라운드 이미지가 반복된다.
		no-repeat	반복되지 않고 한번만 나타난다.
		repeat-x	배경 그림이 가로방향으로 반복
		repeat-y	배경 그림이 세로방향으로 반복
	-attachment	scroll	스크롤 되면 배경그림도 같이 스크롤 됨.
	-attachment	fixed	스크롤이 될 때배경그림은 스크롤 되지 않음.
	-position	left,center,right % (가로)	백그라운드 위치를 지정해 준다.
	-position	top, center,bottom, % (세로)	백그라운드 위치를 지정해 준다.

Ex)


<!DOCTYPE html>
<html>
<head>
	<title>Meta tag</title>
	<style type="text/css">
		body {background-image: url(https://t1.daumcdn.net/cfile/blog/2278414F532114D212);
			  background-attachment: fixed;
			  background-position: 100% 20%;

		}
		.blue p {background-color: #3366cc}
		.red p {background-color: #FF0000}
	</style>
</head>
<body>
	<div class = "red"><p>red color<br></p></div>
	<div class = "blue"><p>blue color<br></p></div>
</body>
</html>

▲위 사진처럼 .red p, .blue p 는 백그라운드에 색깔이 생겼고 배경화면은 움직여서 달이 가운데로 오게 되었다.

<--border style site-->

border은 테두리를 꾸며주는 site이다.

<--종류-->

site	종류	옵션	설명
border	-style	none	테두리를 지정하지 않는다.
		dotted	테두리가 점으로 나타난다.
		dashed	테두리가 점선으로 나타난다.
		solid	테두리가 1줄 선으로 나타난다.
		double	테두리가 2줄 선으로 나타난다.
		groove	테두리가 입체감 있게 나타난다.
		ridge	테두리가 볼록하게 나타난다.
		inset	테두리 전체가 보이는 형태.
		outset	테두리 전체가 튀어나고에 보임.
	-color	색깔	테두리에 색깔이 들어감
	-방향-width	크기	지정한 방향을 크기만큼 늘림.

Ex)


<!DOCTYPE html>
<html>
<head>
	<title>Meta tag</title>
	<style type="text/css">
		.none {border-style: none;}
		.dotted{border-style: dotted; border-color: #FFBB00}
		.dashed{border-style: dashed; border-color: #FF5E00 #FFBB00}
		.solid{border-style: solid; border-color: #1DDB16 #FFBB00 #002266 #FF5E00}
		.double{border-style: double;padding: 40px 8px 6px 4px;}
		.groove{border-style: ridge; margin: 40px 8px 6px 4px}
		.inset{border-style: inset; width: 50px; height: 30px}
		.outset{border-style: outset;}
	</style>
</head>
<body>
	<p class = "none">none</p>
	<p class = "dotted">dotted</p>
	<p class = "dashed">dsahed</p>
	<p class = "solid">solid</p>
	<p class = "double">double</p>
	<p class = "groove">groove</p>
	<p class = "ridge">ridge</p>
	<p class = "inset">inset</p>
	<p class = "outset">outset</p>
</body>
</html>

△보이는대로 선이 생기었다.

▲효과들은 써보긴 했는데 하나하나 기술하려면 너무 길어 직접 해보아라@_@

<--margin & padding style site-->

site	옵션	값	설명
margin	-top	크기	바깥 쪽 여백
	-bottom
	-left
	-right
padding	-top		안 쪽 여백
	-bottom
	-left
	-right

Ex)


<!DOCTYPE html>
<html>
<head>
	<title>Meta tag</title>
	<style type="text/css">
		.padding {background-color: #FF9900 ; padding: 40px 30px 10px 50px;}
		.margin {background-color: #F9F900 ; margin: 40px 30px 10px 50px;}
	</style>
</head>
<body>
	<p class = "padding">HTML5+CSS3 padding tset</p>
	<p class = "margin">HTML5+CSS3 margin test</p>
</body>
</html>

▲padding은 안의 여백을 나타내고 margin은 바깥쪽 여백을 나타내는 것을 볼 수 있다.

<--color & font style site-->

site	옵션	값	설명
color	X	색깔	색깔 지정
font	-family	글꼴 이름	글꼴 지정
	-style	normal, italic...	글자 형태 지정
	-weight	normal, bold,100~900	굵기 지정
	-size	크기	글자 크기 지정

Ex)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Meta tag</title>
	<style type="text/css">
		.font {font-size: 15pt; font-family: 궁서; font-weight: bold; color : red;}
	</style>
</head>
<body>
	<p class = "font">HTML5+CSS3 padding tset 궁서?</p>
</body>
</html>

▲위를 보면 잘 적용이 된 것을 볼 수 있다.

△위의 meta는 한글이 깨지지않도록 해준 것이다.

<--문단과 문자를 꾸미는 CSS-->

site	옵션	값	설명
letter	-spacing	크기	글자와 글자 사이의 간격을 조정
word	-spacing	크기	단어와 단어 사이의 간격을 조정
line	-height	크기	줄 간격 지정
white	-space	normal, pre, nowrap	공백과 줄바꿈 지정

Ex)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Meta tag</title>
	<style type="text/css">
		#normal {font-size: 15px}
		.letter {letter-spacing: 10px}
		.word {word-spacing: 10px}
		.line {line-height: 80px; color: blue;}
		.white{white-space: pre;} 
	</style>
</head>
<body>
	<p id = "normal">normal style</p>
	<p class="letter">letter space is very good</p>
	<p class = "word">word space is very good</p>
	<p class = "line">line space is very good<br> Why?</p>
	<p class = "white">white space is very good</p>
</body>
</html>

▲위를 보면 보기 편하라고 드레그 해서 캡쳐했다.

<--text style stie-->

site	옵션	값	설명
text	-indent	크기	문단 들여쓰기
	-decoration	underline, none, overline,line-through	글자에 밑줄 긋기
	-transform	none, uppercase,lowercase,capitalize	대/소문자 속성

Ex)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Meta tag</title>
	<style type="text/css">
		.Tap {text-indent: 30px}
		.decoration {text-decoration: underline;}
		.trans {text-transform: uppercase;}
	</style>
</head>
<body>
<p class = "Tap" >들여 쓰기</p>
<p class = "decoration">밑줄</p>
<p class = "trans">Abc</p>
</body>
</html>

▲들여쓰기와 밑줄 및 소문자-> 대문자 변환이 잘 된것을 볼 수 있다.

<--list style type & <a>를 꾸미는style site-->

site	옵션	값	설명
list-style	-type	none,circle,disc,square.lower-roman, lower-alpha, decimal, upper-roman, upper-alpha	목록의 머리기호 바꾸기
	-image	url(그림파일)	머리기호 만들기
	-position	inside, ouside	목록의 머리기호 들여쓰기 여부

Ex)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Meta tag</title>
	<style type="text/css">
		.circle{list-style:circle;}
		.disc{list-style:disc;}
		.square{list-style:square;}
		.decimal{list-style:decimal;}
		.a_roma{list-style:lower-roman;}
		.A_roma{list-style:upper-roman;}
		.a{list-style:lower-alpha;}
		.A{list-style:upper-alpha;}
		.no{list-style:none;}
	</style>
</head>
<body>
<li class = "circle">흰 원</li>
<li class = "disc">검은 원</li>
<li class = "square">사각형</li>
<li class = "decimal">10진수</li>
<li class = "a_roma">소문자</li>
<li class = "A_roma">대문자</li>
<li class = "a">소문자</li>
<li class = "A">대문자</li>
<li class = "no">지정 안함</li>
</body>
</html>

<--<a> Style site-->

태그	옵션	설명
a	:link	기본
	:hover	마우스 포인터 올리면 상태
	:active	클릭하였을 때 상태
	:visited	방문한 뒤에 하이퍼링크 상태

Ex)


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Meta tag</title>
	<style type="text/css">
			a:link{color: #3366CC; text-decoration: none;}
			a:hover{color: #cc0000; text-decoration: underline;}
			a:active{color: #ff9900; text-decoration: none;}
			a:visited{color: #009966; text-decoration: none;}
	</style>
</head>
<body>
<a href="#">www.naver.com</a>
</body>
</html>

▲가만히 있을 때 파란색, 마우스를 올리면 빨간색, 실행 후는 초록색인 것을 볼 수 있다.

<--CSS의 꽃 <display>를 알아보자!-->

※엄청 중요하다고 해도 과언이 아님!..

태그	속성	설명
display	:inline	요소를 inline요소로 표현. 앞뒤로 줄바꿈.
	:block	요소를 block요소처럼 표시. 앞뒤 줄바꿈.
	:none	박스가 생성되지 않는다.
	:inline-block	요소는 inline인데 내부는 block처럼 표시.박스모양이 inline처럼 옆으로 늘어섬

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초 (1)	2015.12.02
여러 태그03 (0)	2015.12.02
여러 태그02 (0)	2015.11.29
HTML5 시멘틱 구조 및 여러 태그 (0)	2015.11.25
HTML5기본 구조 & Meta 테그 (0)	2015.11.25

KimMinSung

,

CSS3 기초

Programming/Html5 + CSS 2015. 12. 2. 17:26

<--CSS란?-->

CSS는 HTML을 꾸미기 위한 언어이다.

CSS를 이용하면 HTML만 이용했을 때 보다 훨씬 멋지게 웹을 만들 수 있다.

Ex)


<body>
<h2><font color="blue">CSS is nice!</font></h2>
<p>
	<h4><font color="#ff9900">Hello CSS3 World</font></h4>
	CSS3 can change the color, size , background , etc. taeduri !!!
</p>	
<p>
	<h4><font color="#ff9900">CSS3 very good!</font></h4>
	CSS3 is very good and amazing!!!!!
</p>	
</body>

=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=ㅁ=

<head>
	<title>Meta tag</title>
	<style type="text/css">
		h2 {color: blue;}
		h4 {color: #ff9900;}
	</style>
</head>
<body>
<h2><font>CSS is nice!</font></h2>
<p>
	<h4><font>Hello CSS3 World</font></h4>
	CSS3 can change the color, size , background , etc. taeduri !!!
</p>	
<p>
	<h4><font>CSS3 very good!</font></h4>
	CSS3 is very good and amazing!!!!!
</p>

CSS is nice!

Hello CSS3 World

CSS3 can change the color, size , background , etc. taeduri !!!

CSS3 very good!

CSS3 can change the color, size , background , etc. taeduri !!!

▲위 code 2개는 똑같은 효과를 냅니다.

△하지만 CSS를 사용하면, HTML만 사용할 때 보다 간결하게 사용가능합니다.

<--CSS의 이점-->

-웹 문서를 자유롭게 편집이 가능하다.

-문서를 통일감 있게 만들 수 있다.

-문서를 관리하기가 편하다.

<--CSS를 적용하는 여러 가지 방법-->

1. <link rel= "stylesheet" type = "text/css" herf="CSS_FILE_NAME.css"

>첫번째 방법인 link를 사용해서 .css파일을 불러오는 방법입니다.

2. 두번째 방식은 위 코드에있는 <style>태그를 이용하는 것 입니다.

<--style방식 2가지-->

1. Embedded style )

웹 문서의 내부 보통 <head>영역에 스타일 시트를 정의하여 문서 전체에 특정한 효과를 주고자 할 때 사용한다.

Ex)

<head>

<stlye type = "text/css">
태그 이름 & 클래스 명 { 스타일 속성 : 값 ; }

</stlye>

</head>

2. inline style )

특정 태그에만 스타일 시트를 정의하고 싶을 때 사용한다.

Ex)


<태그 style =  "스타일 속성" : 값>
>> <body style = "font-size:15pt; color:blue;">

※inline, Emebedded, inked방식 중 어느 것이 많이 사용되냐면, 바로 linked방식이다. 왜냐하면 CSS만들어 사용하면 여러 웹문서에 동일한 스타일을 적용하기가 쉽기 때문이다.

<--CSS3의 기본 형식-->


(스타일을 적용하려는 대상){스타일 속성 : 값;}
>>doby {color : blue; font-size : 12pt;}

특정 태그에 지정하기
태그{스타일 속성:값....}

>>body{font-size:15pt;color:blue;};
->body태그 전체에 저 스타일 시드가 적용된다.

Ex)


<head>
	<title>Meta tag</title>
	<style type="text/css">
		body{font-size: 40pt ; color: #3366CC}
		img{border : 10px solid #D8D8D8; }
		h1{color: #FF9900}
		td{font-size: 12pt; color: #FF9900}
	</style>
</head>
<body>
LITTELE BEAUTY
<tr>
	<td>
		<h1>LITTLE BEAUTY</h1>
		<img src="https://t1.daumcdn.net/cfile/tistory/207BDE244A409AAE2B" width="100" align="left">
		<p>Littele gorealra is very cute!<br></p>
	</td>
</tr>

▲위 처럼 적용이 된다.

<--한번에 지정하기-->


<head>
	<title>Meta tag</title>
	<style type="text/css">
		body h1, h2, h3, h4{font-size: 15pt ; color: #FF9900}
	</style>
</head>
<body>
	<h1>Hello h1</h1>
	<h2>Hello h2</h2>
	<h3>Hello h3</h3>
	<h4>Hello h4</h4>
	<h5>Oh... h5</h5>
</body>

◀옆을 보면 h1-h4까지는 CSS가 동일하게 적용된 것을 볼 수 있다.

<--태그안에 있는 태그 지정하기-->

-위 예제를 <style>을 보면, <body>안에 있는 h1-h4를 선택하라는 뜻 이다.

-다른 예제를 하나 더 보자.

<head>
	<title>Meta tag</title>
	<style type="text/css">
		body nav li{font-size: 15pt ; background-color: #FF9900 ;}
	</style>
</head>
<body>
	<nav>
		<li>Menu01</li>
		<li>Menu02</li>
		<li>Menu03</li>
	</nav>
</body>

▲Background는 오렌지색, 폰트 사이즈는 15pt로 수정되었다.

△위치는 body->nav->li에만 적용된다. 만약 body->nav->li->li라면 적용되지 않는다.

<--Class & id 사용하기-->

Class&id는 이름이라고 생각하면 간단하다. 일단 사용하는 법을 보자!


<div class = "nav"></div>
<div id = "nav"></div>
	<style type="text/css">
		.nav {padding: 10px;}
		#nav {padding: 10px;}		
	</style>

▲Class는 .을 사용해서 표현을하고 id는 #을 사용해서 표현을 합니다.

id와 class의 차이점 )

클래스와 아이디의 차이점은 클래스는 여러개를 사용할 수 있지만 아이디는 고유성을 가지므로 한 문서에 한번만 사용할 수 있습니다.

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 여러 스타일 시트 (0)	2015.12.03
여러 태그03 (0)	2015.12.02
여러 태그02 (0)	2015.11.29
HTML5 시멘틱 구조 및 여러 태그 (0)	2015.11.25
HTML5기본 구조 & Meta 테그 (0)	2015.11.25

KimMinSung

,

여러 태그03

Programming/Html5 + CSS 2015. 12. 2. 01:07

<--<table> 태그-->

웹 문서를 시각적으로 정돈되어 보이게 하는 방법 중 하나는 테이블을 사용하는 것 이다,

표 안에는 이미지, 내용 등을 넣을 수 있다.

<태그 형식>


<table border="1">
	<tr>
		<td>1-1</td>
		<td>1-2</td>
		<td>1-3</td>
	</tr>
	<tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	</tr>
</table>

Ex)

1-1	1-2	1-3
2-1	2-2	2-3

△저렇게 표가 만들어 진다.

<태그 이해하기>

태그	설명
table	태이블의 시작과 끝을 나타낸다.
tr	테이블의 한줄을 정의할 때 사용하는 태그
th	이 태그를 사용하면 테이블 셀의 그랒가 굵은 글씨로 표현되며 가운데 정렬된다.
td	셀은 <td>라고 정의한다. 반드시 <tr>태그 안에 사용해 한다.

<태그 속성>

태그	속성	값	설명
th/td	colspan	숫자	칸을 합칠 떄 , 합치고자 하는 칸의 수를 지정한다.
th/td	rowspan	숫자	줄을 합칠 때 합치고자 하는 줄의 수를 지정

Ex)

<table>
	<tr width="50%" border="1">
		<td colspan="3">1-1</td>
	</tr>
	<tr>
		<td>2-1</td>
		<td>2-2</td>
		<td>2-3</td>
	</tr>

</table>
<table width="50%" border="1">
	<tr>
		<td rowspan="2">1-1</td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td>2-2</td>
		<td>2-3</td>
	</tr>
</table>

1-1
2-1	2-2	2-3

1-1	1-2	1-3
1-1	2-2	2-3

▲위의 표처럼 나오게 된다.

<--<a> 태그-->

<a>태그는 문서에 URL을 삽입하는 역할을 한다.

Ex)

<a href = "http://www.naver.com">네이버</a><br/>
<a href = "http://www.naver.com'><img src = "http://img.naver.net/static/www/u/2013/0731/nmms_224940510.gif"></a>

네이버

△"naver img"에 링크를 걸어본 것과 그냥 "네이버" 글자에 링크를 걸어보 았다.

<<a>좀더 자세히 알아보기>

위 예제는 다른 링크로 이동하는 방법이 기술되어있다.

하지만 다른 문서의 특정 위치로도 이동이 가능하다는 사실.

1.<a href="#이름"></a> //같은 문서의 특정 위치로 이동하는 방법

name이 "이름"인 곳으로 이동한다.

2.<a herf="파일명#이름"></a> //다른 문서의 특정위치로 이동하는 방법

file의 "이름"으로 이동

<target속성 자세히 알아보기>

target은 하이퍼링크를 클릭했을 때 내용이 보이게 될 대상의 위치를 정한다. 보일 내용이 창을 새로 띄워 나타낼 것인가 아니면, 현재 창에서 나타낼 것인가를 말이다.

o_blank : 하이퍼링크를 클릭했을 때 보일 내용이 새 창에서 나타난다.

o_parent : 프레임이 나누어진 페이지의 프레임 안에 또 하나의 프레임이 들어가 있을 때 안쪽의 프레임에서 적용한다. 하이퍼링크를 클릭했을 때 현재 부모 프레임에 로딩할 페이지가 나타난다.

o_self : 자기 자신의 창을 가리킨다. 링크를 클릭했을 때 표시될 내용이 링크가 있는 현재 프레임 페이지에서 그대로 나타난다.

o_top : 하이퍼링크를 클릭했을 때 프레임 설정에 관계없이 최상위 화면에 내용이 나타난다. 프레임 페이지가 사라지고 전체 화면으로 표시된다.

<--<form>태그-->

웹 사이트를 방문한 사람이 입력한 정보를 서버로 전달하기 위해 <form>태그를 사용한다.

이 태그는 서버에 전달하는 방식이나 서버에서 가동될 프로그램 등을 지정해야 한다.

<태그 형식>


<form name="폼을 구분하기 위한 이름" action="서버 CGI프로그램 URL" method="POST or Get" target="결과물을 보여줄 창 이름 지정" enctype="CGI프로그램으로 전송될 데이터 타입을 지정">
...
</form>

<<form>안에서 사용할 수 있는 태그>

태그	설명
input	텍스트,라디오 등의 입력 양식을 나타낸다.
textarea	텍스트 입력 양식을 나타낸다.
button	폼을 서버로 전송하는 버튼을 나타낸다.
select	여러 개 중 선택할 수 있는 선택상자를 나타낸다.

Ex)


<form>
	<input type="text"><br>
	<textarea></textarea><br>
	<button>button</button><br>
	<select>
		<option>select</option>
	</select>
</form>

▲웹 문서에 <form>태그안에 사용할 수 있는 기본적인 태그가 표현 된다.

<--<input> 태그 속성-->

속성	값	설명
type	button	버튼을 나타낸다.
	checkbox	선택 양식을 나타낸다.
	color	컬러 선택 입력 양식을 나타낸다.
	date	날짜 입력 양식을 나타낸다.
	datetime	날짜와 시간 입력 양식을 나타낸다
	datetime-local	지역 날짜와 시간 입력 양식을 나타낸다.
	email	이메일 입력 양식을 나타낸다.
	file	파일 선택 양식을 나타낸다.
	hidden	숨은 <input>태그를 나타낸다.
	image	이미지 버튼을 나타낸다.
	month	월 입력 양식을 나타낸다.
	number	숫자 입력 양식을 나타낸다.
	password	비밀번호 입력 양식을 나타낸다.
	radio	라디오 선택 양식을 나타낸다.
	range	범위 선택 양식을 나타낸다.
	search	검색 입력 양식을 나타낸다.
	submit	전송 버튼을 나타낸다.
	tel	전화번호 입력 양식을 나타낸다.
	text	텍스트 입력 양식을 나타낸다.
	time	시간 입력 양식을 나타낸다.
	url	URL입력 양식을 나타낸다.
	week	주 입력 양식을 나타낸다.

Ex)


<form>
	<input type = "button" ><br>
	<input type = "checkbox" ><br>
	<input type = "color" ><br>
	<input type = "date" ><br>
	<input type = "datetime" ><br>
	<input type = "datetime-local" ><br>
	<input type = "email" ><br>
	<input type = "file" ><br>
	<input type = "hidden" ><br>
	<input type = "image" ><br>
	<input type = "month" ><br>
	<input type = "number" ><br>
	<input type = "password" ><br>
	<input type = "radio" ><br>
	<input type = "range" ><br>
	<input type = "reset" ><br>
	<input type = "search" ><br>
	<input type = "submit" ><br>
	<input type = "tel" ><br>
	<input type = "text" ><br>
	<input type = "time" ><br>
	<input type = "url" ><br>
	<input type = "week" ><br>
</body>

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 여러 스타일 시트 (0)	2015.12.03
CSS3 기초 (1)	2015.12.02
여러 태그02 (0)	2015.11.29
HTML5 시멘틱 구조 및 여러 태그 (0)	2015.11.25
HTML5기본 구조 & Meta 테그 (0)	2015.11.25

KimMinSung

,

여러 태그02

Programming/Html5 + CSS 2015. 11. 29. 21:53

전 포스팅에 이어서 HTML5 태그를 더 알아봅시다.

<--<img>태그-->

<img>태그는 웹 문서에 이미지를 삽입할 때 쓰이는 태그이다.

태그	속성	값	설명
img	alt	설명	이미지를 대체할 설명을 입력합니다.
	crossorigin	anonymous/ use-credentials	다른 사이트의 이미지를 이용할 수 있게 해준다.
	height	픽셀	이미지의 높이를 픽셀 단위로 지정한다.
	ismap	ismap	서버 측의 이미지맵을 지정한다.
	src	URL	삽입하려는 이미지의 경로와 파일 이름 지정.
	usemap	맵이름	사용자 측의 이미지맵을 지정합니다.
	witdh	픽셀	이미지의 폭을 픽셀 단위로 지정.

Ex)

<body>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSBjR5_BavmJOTFrdKMFgi4xPZmbbY1gavKJO9UjNehmypOEI0I" width = "300" height="300">
</body>

▲ <img>태그를 사용해서 google이미지를 가져와 보았습니다.

△ 크기는 300*300 입니다.

구분	표현방법	설명
상대 경로	../images or ./images	HTML문서의 위치와 객체와의 상대적인 위치를 표현합니다.
절대 경로	C:/HTML5CSS3/imgages	HTML문서와 상관없이 객체의 절대적인 위치를 표현합니다.

<--<iframe> 태그-->

<iframe>태그는 웹문서에 다른 웹 문서를 삽입 가능하게 해주는 태그이다.

태그	속성	값	` 설명
iframe	height	픽셀 / %	<iframe>의 높이 지정 .
	name	이름	<iframe>의 이름을 지정.
	sandbox	"/allow-forms/allow-same-origin/allow-scripts/allow-top-navigation	<iframe>의 내용 제한 설정.
	src	URL	웹 문서의 주소 지정.
	srcdoc	HTML cdoe	<iframe>에 보여줄 HTML코드 지정.
	width	픽섹 / %	크기 지정.
	seamless	seamless	문서의 일부처럼 보이도록 지정.

Ex)

<body>
<iframe src="http://www.daum.net/" width="100%" height="50" ></iframe> 
</body>

▲위 처럼 다른 웹 문서를 불러 올 수 있다.

△왠지 모르겠는데 naver하려다 안됨.

<--<embed>태그-->

<edbed>태그는 HTML5가 생기면서 생긴 태그이며, 웹 문서에 플래시, 동영상, 음악 파일등을 삽입할 수 있는 태그이다.

태그	속성	값	설명
embed	height	픽셀	재생 매체의 높이 지정.
	src	URL	삽입하려는 파일의 경로나 파일이름 지정.
	type	MIME type	삽입하려는 파일의 MIME 타입 지정
	width	픽셀	재생 매체의 폭 지정.

Ex)

<body>
<embed src="http://player.music.naver.com/naverPlayer/posting/12693974/BA" width = "400" height = "300"></embed>
</body>

▲위 처럼 여러 플래시,동영상,음악 파일들을 불러 올 수 있다.

△~~잘 안되네..~~

<--<video> & <audio> 태그-->

웹에 오디오나 동영상을 삽입하려면 <embed>태그 이외에 <video> & <audio>태그를 사용할 수있고, <audio>는 MP3, WAV, OGG파일 형식을 지원하고, <video>는 MP4, WebM, OGG 파일 형식을 지원한다.

<-- 태그 형식 -->

<audio autoplay controls src="파일 경로"></audio>
<video autiplay controls src="파일 경로" width="가로 폭"></video>

<--태그 속성-->


태그 
속성 
값 
설명 

 audio
 autoplay
 autoplay 
 자동 플레이 되도록 지정 


 controls
 controls 
 오디오의 컨트롤 기능이 나타나도록 지정. 


 loop
 loop
 반복 재생.


 muted
 muted 
 재생 시 소리가 나지 않도록 지정 


 preload
 auto/metadata/none 
 오디오 로드 전 해야 할 것 지정.


 src
 URL 
 파일의 경로와 파일 이름 지정 

 video
 autoplay
 autoplay 
 자동 플레이 되도록 지정 


 controls
 controls 
 동영상의 컨트롤 기능이 나타나도록 지정 


 height
 픽셀 
 동영상의 높이 지정 


 loop
 loop 
 동영상을 반복하여 재쟁. 


 muted
 muted 
 동영상 재생시 소리가 안나도록 지정. 


 poster
 URL 
 동영상의 이미지 지정 


 preload
 auto/metadata/none
 동영상 로드 전 해야 할 것 지정. 


 src
 URL 
 삽입하려는 파일의 경로와 피일이름 지정 


 width
 픽셀 
 동영상의 폭을 픽셀 단위로 지정. 

Ex)<audio autoplay controls src = "demo.mp3"></audio>
<video autoplay controls src = "demo.mp4"></video>
△웹에서 mp4, mp3파일을 못 찾아서 이 예제 밖에 못보여주네요..

<--<map> & <area> 태그-->
<map> 태그는 웹 문서에 사용자 이미지맵을 삽입하고, <area>태그는 이미지맵의 클릭할 수 있는 영역을 지정할 때 사용한다.
 태그
속성 
값 
 설명 

 map
 name 
 이름  
 이미지맵의 이름을 입력합니다. 

 area
 alt 
 설명 
 영역을 대체할 설명을 입력한다. 


 coords 
 coordinates   
 영역의 좌표를 지정한다. 


 download 
 파일명  
 하이퍼링크를 클릭하면 다운로드 되도록 지정. 


 hreflang 
 languge_code 
 하이퍼링크 대상의 언어를 지정합니다. 


 media
 media query 
 대상 URL에 최정화된 미디어나 디바이스를 지정. 


 nohref 
 value 
 하이퍼링크가 없음을 지정한다. 

 ret  aliternate/author
/bookmark/help/
license/next/... 현재 문서와 대상 URL간의 관계를 지정한다.
 shape  default/rect/
circle/poly   영역의 모양을 저정합니다. 
 target  _blank/ _parent/
_self/_top/ ...   대상 URL의 열 위치를 지정한다.
 type  MIME type   대상URL의 MINE타입을 지정한다. 



<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRwIJfxVtADUJ8Q-Nlbsr2uE_fU0hT_Y14a84xZirMzUnh3LtjSAg" width="300" usemap="#sitemap">

<map name="sitemap">
	<area shape="rect" coords="50,60,160,160" href="http://www.ggtour.or.kr" alt="Hello!"></area>

▲이미지에서 마우스를 휘젓다 보면 클릭이 가능한 부분을 발견할 수 있을 것 이다.

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초 (1)	2015.12.02
여러 태그03 (0)	2015.12.02
HTML5 시멘틱 구조 및 여러 태그 (0)	2015.11.25
HTML5기본 구조 & Meta 테그 (0)	2015.11.25
Html5+CSS3 시작! (0)	2015.11.25

KimMinSung

,

HTML5 시멘틱 구조 및 여러 태그

Programming/Html5 + CSS 2015. 11. 25. 16:55

<--시멘틱 웹 이란?-->

웹 문서를 쉽고 의미 있게 검색하기 위해 시멘틱 웹이라는 개념이 만들어 졌다. 시멘틱 웹이란, 사용자가 정보를 따라 검색하면 컴퓨터가 정보를 찾아 정보의 뜻을 이해하고, 추론까지 하는 차세대 지능형 웹 기술을 말한다.

<--구획 정의를 위한 태그-->

태그	설명
article	여러개의 내용으로 나누는 구분을 의미한다. 본문 내의 세부 절 등에 사용 된다.
aside	주요 내용 이외의 문서 내용을 의미한다. 블로그의 사이드 바 등에 사용된다.
footer	문서의 푸처를 의미한다. 저작자나 저작권 정보 등에 사용된다.
header	문서의 헤더를 의미한다. 사이트소개나 로고 등에 사용된다.
nav	내비게이션을 의미한다. 웹 문서 내의 메뉴 등에 사용된다.
section	문서의 내용을 의미한다. 웹 문서의 본문 등에 사용된다.

▲위 그림 처럼 만들어 지는게 보통이다.(저기서 바뀔 수 도있다.)

<--의미를 명확하게 하는 태그-->

태그	설명
figure	이미지 등의 캡션 그룹을 지정한다.
figurecaption	이미지 등의 캡션을 지정합니다.
time	문서 작성 날짜와 시간을 의미한다.
mark	강조를 의미한다.

<--정리 태그-->

Ex)

<p> Hello. <br> My name is Ms_Kim.

<hr>My name is luc3773.

</p>

-출력 결과-

Hello.

My name is Ms_Kim.

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

My name is luck3773.

<--<div>와 <span>태그-->

<div>와 <span>태그는 웹의 내용을 나누거나 그룹을 지정한느 용도로 사용한다. 여러 그룹을 묶는 용도로 사용한다.

태그	설명
div	웹 문서의 블록을 지정한다.
span	웹 문서의 인라인 블록을 지정한다.

Ex)

▲이렇게 <div class or id로 각 문단을 나누는 것을 볼 수 있다.>

△다른 것도 보고 싶다면 자신이 원하는 웹에 들어가서 F12키를 눌러보아라.

<--목록을 만드는 태그-->

태그	설명
ul	번호 없는 목록을 만든다.
ol	번호 있는 목록을 만든다.
li	<ul>과 <ol>태그의 항목을 만든다.
속성
	속성	값	설명
ol	reversed	reversed	항목의 숫자를 역순으로 표시.
	start	숫자	항목의 시작 줏자를 지정.
	type	1/A/a/l/i	항목에 사용할 번호 종류 설정.
li	value	숫자	번호 있는 목록에서 항목의 번호 지정.


<!DOCTYPE html>
<html>
<head>
	<title>Meta tag</title>
</head>
<body>
	<li>HTML5</li>
	<li>CSS3</li>
	<li>JavaScript</li>
</ul>
<ol>
	<li>Backgraund</li>
	<li>Border</li>
	<li>Animation</li>	
</ol>
 </body>
</html>

<--계층 구조를 만드는 태그-->

태그	설명
dl	정의돈 내용을 설명하거나 계층 구조 목록은 만든다.
dt	설명 리스트의 이름을 표시한다.
dd	설명리스트에 대한 세부 내용을 표시한다.

<--글씨를 꾸며주는 태그-->

태그	설명
b	문자를 굵게 표시한다.
u	문자에 밑줄을 표시한다.
i	문자를 이텔릭체로 표시한다.
sub	아랫첨자로 표시한다.
sup	윗 첨자로 표시한다.
small	문자를 조금 작게 표시한다.
kbd	키보드 입력으로 표시한다.
code	컴퓨터의 코드로 표시한다.

Ex)


<b>test</b><br />
<u>test</u><br />
<i>test</i><br />
hello 1<sub>test</sub><br />
hello 2<sup>test</sup><br />
<small>test</small></p>
<p><br /></p>
<p><br /></p>

test
test
test
hello 1_test
hello 2^test
test

▲이렇게 위 처럼 나오게 된다.

※<kbd>와 <code>는 잘 쓸줄 몰라서 쓰지는 않았다.

<--글자 위의 주석 태그-->

태그	설명
ruby	문자 및 단어에 대한 루비 주석을 표현.
rt	문자에 대한 설명이나 발음을 표현
rp	<ruby>태그를 지원하지 않을 경우 표시 형태를 정의 한다.


<ruby>
	Korean
	<rt>코리아</rt>
</ruby>

Korean 코리아

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초 (1)	2015.12.02
여러 태그03 (0)	2015.12.02
여러 태그02 (0)	2015.11.29
HTML5기본 구조 & Meta 테그 (0)	2015.11.25
Html5+CSS3 시작! (0)	2015.11.25

KimMinSung

,

'분류 전체보기'에 해당되는 글 12건

jQuery 이벤트 사용하기!

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery CSS 속성 읽고 바꾸기 & 익명함수

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 콘텐츠 추가!

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 선택자 & 필터

'Programming > Java Script + jQuery' 카테고리의 다른 글

jQuery 시작!

'Programming > Java Script + jQuery' 카테고리의 다른 글

CSS3 여러 스타일 시트

'Programming > Html5 + CSS' 카테고리의 다른 글

CSS3 기초

CSS is nice!

Hello CSS3 World

CSS3 very good!

'Programming > Html5 + CSS' 카테고리의 다른 글

여러 태그03

'Programming > Html5 + CSS' 카테고리의 다른 글

여러 태그02

'Programming > Html5 + CSS' 카테고리의 다른 글

HTML5 시멘틱 구조 및 여러 태그

'Programming > Html5 + CSS' 카테고리의 다른 글

공지사항

카테고리

태그목록

최근에 받은 트랙백

글 보관함

달력

링크

KimMinSung

LATEST FROM OUR BLOG

LATEST COMMENTS

BLOG VISITORS

티스토리툴바