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를 배우는 이유.>

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

,

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

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


<--Background style site-->

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


<--종류-->

 Site

 옵션

 값

설명

 background

 -color

 색상 값

 백그라운드 색상 저장

 -image

 URL

 백그라운드 이미지  

 -repeat

 repeat

 백그라운드 이미지가 반복된다. 

 no-repeat

 반복되지 않고 한번만 나타난다.

 repeat-x

 배경 그림이 가로방향으로 반복

 repeat-y

 배경 그림이 세로방향으로 반복

 -attachment

 scroll

 스크롤 되면 배경그림도 같이 스크롤 됨. 

 fixed

 스크롤이 될 때배경그림은 스크롤 되지 않음.

 -position

 left,center,right % (가로)

 백그라운드 위치를 지정해 준다.

 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

 단어와 단어 사이의 간격을 조정 

 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

,