[2021.07.28] 인턴 +149 HTML class Attribute? - 12 (+@ How to use class attributes in javascript?)
HTML 클래스 속성 사용 방법
- class 속성은 .css class 이름에 포인트로 사용
- ★★★ style 태그에 정의해줄 때, 클래스이기 때문에 .class명으로 선언해줘야 함 ★★★
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>welcome</h2>
<p>Welcome to the tistory.</p>
</div>
<div class="city">
<h2>injekim97</h2>
<p>this is injekim97 web study</p>
</div>
</body>
</html>-> 해당 코드를 보면 알다 시피, <div class="위에서 선언한 클래스명(city)">
<출력 결과>
<h1/p 등등> <span> 태그에서도 클래스 사용 가능
- <span style class="??"> 사용 가능
e.g <h1>My <span class="????">Important</span> Heading</h1>
<p>This is some <span class="????">important</span> text.</p>
<위와 같은 클래스 사용 예시>
---------------------------------------------------------------------------------------------------------------------------------
★★★★★ Multiple Classes (여러 클래스 사용 및 접근 방법) ★★★★★
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
- 위의 코드를 보면 알다시피, 클래스가 2개로 선언되어 있다.(city, main)
★★★★★ 멀티 클래스를 사용하기 위해선 공백(띄어쓰기)로 주어주면 사용이 가능하다. ★★★★★
<h2 class="city main">London</h2>
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
.main {
text-align: center;
}
</style>
</head>
<body>
<h2>Multiple Classes</h2>
<h2 class="city main">London</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
<출력 결과>
-> 2개의 클래스가 적용이 되어 London의 글씨가 하얀색(style = city) 이면서, 가운데 정렬(style = main)된 모습을 볼 수 있다.
---------------------------------------------------------------------------------------------------------------------------------
+@ ★★★★★ JavaScript에서 클래스 사용하는 방법 ★★★★★
- getElementsByClassName() 메소드를 사용하여 특정 클래스 이름을 가진 요소에 액세스 가능
- 해당 설명을 보고, 출력결과를 보면 이해하기 매우 쉬울 것이다. 꼭 이 내용을 보고 출력 결과 화면을 보자
<button onclick="myFunction()">Hide elements</button>
-> 출력 결과 화면을 보면 알다 시피, 요소들을 숨길 수 있게 하는 버튼을 만듬
-> 여기서 onclick= "js함수()" 으로 선언해줬는데, ★ 버튼을 클릭할 때마다 js함수()에 선언한 기능을 수행한다는 뜻 ★
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
- javascript에서 함수를 사용하기 위해선 <script> 태그를 사용해야함
- 그런다음에 var(변수) x 에 document.getElementsByClassName("city");
=> 요소를 가져올 클래스명을 적어줌. 여기선 city가 클래스 명이 된다.
- 그런 다음에 for문으로, 0 부터 위에 가져온 요소들의 개수 길이 만큼 반복 하여,
x[i].style.display = "none"; 로 화면에 안보이게 숨겨주는 것이다.
이해가 안 가면 출력 결과 화면을 띄우면서, 한 줄씩 이해 해보는 것을 추천 한다.
<!DOCTYPE html>
<html>
<body>
<h2>Use of The class Attribute in JavaScript</h2>
<p>Click the button to hide all elements with class name "city":</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
</body>
</html>
<출력 결과>
'Web' 카테고리의 다른 글
| [2021.07.28] 인턴 +149 HTML JavaScript - 14 (HTML 자바스크립트) (0) | 2021.07.28 |
|---|---|
| [2021.07.28] 인턴 +149 HTML id & iframes - 13 (0) | 2021.07.28 |
| [2021.07.28] 인턴 +149 HTML Block and Inline Elements - 11 (블록 및 인라인 요소) (0) | 2021.07.28 |
| [2021.07.28] 인턴 +149 HTML List(리스트) - 10 (0) | 2021.07.28 |
| [2021.07.27] 인턴 +148 HTML Tables(테이블) - 9 (0) | 2021.07.27 |
댓글