겉바속촉
[html] Jquery 사용하기 본문
이제 제이쿼리를 해보도록 합시다
두둥
test명을 가진 html파일 하나 생성해주었습니다
위와 같이 형광펜 칠해진 부분에
src="https://code.jquery.com/jquery-3.5.1.js"를 script에 넣어줍니다.
다운받지 않아도 직접 CDN을 넣어주는 방법이쥬:)
그리고 저는 bootstrap링크까지 추가해버렸습니다:)
이 상태에서 템플릿을 아예 만들어두고 시작할게요:)
매번 일일이 치려면 힘드니까요!
전체 선택 - 복사 하신 상태에서
우클릭 - new - html file - file name 지정 - next
꼭꼭꼭 next 눌러주셔야 합니다!!!
그래서 HTML Templates를 클릭 후 next 클릭해주세요
New 클릭
다음과 같이 name과 description 지어주신 후에 반드시 New HTML을 선택해주세요:)
그럼 우리가 새로 만든 TEMPLATE이 들어가있쥬?
다음처럼 각각 체크해주세요:)
그리고 위로 쭉 올리셔서 우리감 아까 만들어준
Name이랑 Description 찾아주세요:)
저는 myHtml이라고 만들었기 때문에 다음과 같아요!!
클릭 후 Finish!!!!
이제 다음과 같이 작성해주세요:)
document에 있는 전체 요소는 1px solid #ffcccc로 border를 주었습니다
그리고 아래에서 각각 span을 사용했습니다
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script type="text/javascript">
$(document).ready(function(){
//document에 있는 전체요소 선택함
$("*").css("border","1px solid #ffcccc");
});
</script>
</head>
<body>
<h2>jQuery에서 셀렉터를 사용해 처리</h2>
<div>
<div id="content">id값이 content인 divtag</div>
</div>
<b>b1</b>
<span>span 1</span>
<span class="my">span 2</span>
</body>
</html>
그럼 이제는 span에 대한 css를 만들어줄게요
우리는 위에서 span1, span2가 span블럭 안에 있쥬?
그 두개에만 3px solid red로 border가 적용되는 것입니다:)
$(document).ready(function(){
//document에 있는 전체요소 선택함
$("*").css("border","1px solid #ffcccc");
$('span').css("border","3px solid red");
});
컴파일 해보시면 다음과 같이 나옵니다!!
이번에는 추가로 다음과 같이 작성해줄게요
<script type="text/javascript">
$(document).ready(function(){
//document에 있는 전체요소 선택함
$("*").css("border","1px solid #ffcccc");
$('span').css("border","3px solid blue");
//jQuery('#content').css('background-color','cyan');
$('#content').css('background-color','magenta');
$('.my').css('border','5px solid red');
});
</script>
컴파일 하신 후에 코드를 살펴보면서 확인해주세요:)
아무것도 안쓰고 span이라고 한 곳은 span태그를 의미하기 때문에 span은 모두 3px solid blue
#을 붙여준 content는 id를 의미하기 때문에 id가 content인 곳에 background-color가 magenta
.을 붙여준 my는 class를 의미하기 때문에 class가 my인 곳에 border가 5px solid red
'IT일기(하반기) > HTML' 카테고리의 다른 글
| [html] jquery로 eventimage만들기 (0) | 2020.06.16 |
|---|---|
| [html] jquery로 select 연습하기 (0) | 2020.06.16 |
| [html] text css 연습하기 (0) | 2020.06.16 |
| [html] table에 css적용해보기 (0) | 2020.06.16 |
| [html] table 행, 열 합치기 (0) | 2020.06.16 |
