반응형
목차
1. 개요
2. 예제
3. 실행 화면
1. 개요
기본적인 css문법과 JQuery 문법의 간단한 사용법을 복습하기 위해 li태그 클릭 시 글자색과 배경색이 바뀌도록 하는 예제를 작성해보았다.
2. 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>?</title>
<style>
ul{
float:left;
list-style: none;
}
.change_back{
background-color: red;
color:white;
}
</style>
</head>
<body>
<ul class = 'lang_list'>
<li>HTML</li>
<li>CSS</li>
<li>bootstrap</li>
<li>Javascript</li>
<li>JQuery</li>
</ul>
<script>
$('ul.lang_list li').click(function(){
$(this).addClass('change_back');
});
</script>
</body>
</html>
|
css를 적용시키려면 <style>태그를 사용해야 한다.
css를 적용시키려는 대상에 따라 그 문법이 약간 달라진다.
1) 대상이 태그(< >)일 경우
태그명{
속성 : 속성값;
}
2) 대상이 클래스일 경우
.클래스명{
속성 : 속성값;
}
3) 대상이 태그의 클래스일 경우
태그명.클래스명{
속성 : 속성값;
}
4) 태그의 클래스의 태그일 경우
태그명.클래스명 태그명{
속성 : 속성값;
}
클래스는 하나의 객체이기 때문에 .을 붙이는 것이라고 생각하면 편하다.
7번 라인은 ul에 대한 css를, 11번 라인은 change_back 클래스에 대한 css를 정의하였다.
19번 라인에 ul의 class를 lang_list로 정의하였고
27번 라인에 ul 태그 중 lang_list라는 클래스를 찾고 해당클래스의 li 태그를 클릭하면, 클릭한 li 태그에 대한 클래스를 change_back으로 정의하였다.
11번 라인에 change_back은 배경을 빨간색, 색을 흰색으로 만드는 것으로 정의하였기 때문에 그에 맞게 색이 변하게 된다.
그 외 사용한 속성은 아래와 같다
| 속성 | 설명 |
| float : left | 공백을 제거하고 좌측정렬 |
| list-style : none | <li> 태그의 기호를 제거 |
| background-color | 배경색 |
| color | 글자색 |
3. 실행 화면
반응형
'프론트엔드 > Jquery' 카테고리의 다른 글
| [JQuery] $('document').ready(function(){}) 을 쓰는 이유 (1) | 2019.07.22 |
|---|---|
| [JQuery] click 이벤트 사용하기 (0) | 2019.07.22 |
| [JQuery] JQuery의 정의, 사용법, CDN, 문법, 예제 (0) | 2019.07.19 |