▼ HTML, CSS, JavaScript 문서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Documnet</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div>
<h1 class="title">오늘 할 일</h1>
<ol id="today" class="list today">
<li class="item">자바스크립트 공부</li>
<li class="item">고양이 화장실 청소</li>
<li class="item">고양이 장난감 쇼핑</li>
</ol>
<h1 class="title">내일 할 일</h1>
<ol id="tomorrow" class="list tomorrow">
<li class="item">자바스크립트 공부</li>
<li class="item">뮤지컬 공연 예매</li>
<li class="item">유튜브 시청</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>.done {
opacity: 0.5;
text-decoration: line-through;
}// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
style 프로퍼티
▼ style 프로퍼티를 활용하여 글자에 취소선 및 배경 적용하기
//style 프로퍼티
today.children[0].style.textDecoration = 'line-through'
'오늘 할 일' 의 자식 요소들 중에서 0번 인덱스를 먼저 선택한 다음에 style 프로퍼티에 접근하고
'text-decoration'을 'line-through'로 적용한다.
'text-decoration'를 그대로 작성하면 오류가 난다. 그렇기에 style 프로퍼티를 통해서 CSS 속성을 다룰 때
여러 단어를 이어서 만든 속성은 카멜 표기법을 사용해야한다. (textDecoration)
마찬가지로 배경색을 적용하려면 카멜 표기법을 사용하여 backgroundColor 로 작성한다.
// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
//style 프로퍼티
today.children[0].style.textDecoration = 'line-through' //취소선
today.children[0].style.backgroundColor = '#DDDDDD' // 배경색
그런데 이렇게 style 프로퍼티를 활용하면 몇 가지 문제가 있다.
실제로 해당하는 태그를 살펴보면 style 속성에 작성한게 추가된 것을 확인할 수있는데
이렇게 직접적으로 태그에 값이 적용되어 버리기 때문에
스타일 우선순위가 높아져서 코드가 꼬여버리고
같은 스타일을 다른 여러 태그에 적용해야 될 때는
비슷한 코드를 불필요하게 많이 작성해야하는 문제가 생긴다.
의도된 상황이 아니라면 일반적으로 JavaScript를 활용해서 스타일을 입힐 때
style 프로퍼티를 사용하는 것보다 태그의 클래스를 변경하는 방식을 권장한다.
자바스크립트로 HTML 태그의 클래스를 다루는 방식은 크게 두 가지가 있다.
className 프로퍼티
지난 글에 봤던 그 className이 맞다.
클래스 속성은 프로퍼티 이름으로 접근할 때는 'className' 이라고 할 때,
// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
//elem.className
today.children[1].className = 'done'이렇게 className 프로퍼티에 새로운 값을 할당해서
done 클래스에 미리 작성해둔 스타일이 적용되는 방식이다.
즉 CSS파일의 done 클래스에 미리 작성해둔 투명도와 텍스트 취소선이 적용된 것을 학인할 수 있다.
그런데 className 프로퍼티로 값을 변경하게 되면
클래스 속성값 전체가 바뀌게 된다.
결과를 보면 item 클래스는 사라지고 done 클래스로 변경된 것을 확인할 수 있다.
원하는 결과를 얻기위해 원래 있던 item 클래스를 그대로 두고 done 클래스를 추가해야 할 때,
className 보다 더 나은 'classList' 프로퍼티를 활용한다.
classList : add, remove, toggle
classList는 클래스의 속성값을 유사배열로 다루는 프로퍼티이다.
//elem.classList
console.log(today.classList);
console.log(today.children[1].classList);
classList를 활용하면 클래스 속성을 하나씩 다를 수 있을 뿐만 아니라
클래스를 좀 더 편하게 다룰 수 있는 add, remove, toggle 이라는 메소드도 활용할 수 있다.
▼classList.add
add는 말 그대로 클래스를 추가한다.
코드를 보면 내일 할일의 자식 요소들 중에서 1번 인덱스이므로 '뮤지컬 공연 예매'가 선택 되었고
classList.add로 done 클래스를 추가하였다.
//elem.classList : add, remove, toggle
const item = tomorrow.children[1]
item.classList.add('done')
참고로 여러개의 클래스를 넣고 싶을 때는 쉼표로 구분해서 여러개의 파리미터로 전달하면 된다. ▽
// 스타일 다루기
const today = document.querySelector('#today');
const tomorrow = document.querySelector('#tomorrow');
//elem.classList : add, remove, toggle
const item = tomorrow.children[1]
item.classList.add('done', 'other')
(참고로 똑같은 이름의 클래스를 중복해서 추가하더라도 문제없이 하나만 추가된다.)
▼ classList.remove
remove는 클래스를 제거하는 메소드이다.
파라미터로 클래스 이름을 문자열로 전달하면 클래스가 삭제되며
add와 마찬가지로 여러 개의 파라미터를 전달하게 되면 여러 개의 클래스를 삭제할 수 있다.
//elem.classList : add, remove, toggle
const item = tomorrow.children[1]
item.classList.add('done', 'other')
item.classList.remove('done' , 'other')
▼ classList.toggle
toggle은 있으면 제거하고 없으면 추가하는 메소드이다.
//elem.classList : add, remove, toggle
const item = tomorrow.children[1]
item.classList.toggle('done')
add와 마찬가지로 done 클래스를 추가할 수 있는데
add와 remove처럼 여러 개의 파라미터를 입력 할 수 있지만 여러 개의 클래스를 toggle 하지 않는다.
그말은 즉 toggle의 두 번째 파라미터에는 다른 기능이 존재한다.
▼ classList.toggle(' parameter ',' boolen ')
toogle의 두 번째 파라미터는 boolean 형태의 값을 전달 받아서
만약 true를 전달하게 되면 add의 기능만 실행되고
false를 전달하면 remove의 기능만 실행되며, 은근 병맛이다..
즉 두 번째 파라미터는 toggle의 기능을 강제하는 역할을 한다.
예시로 true기능 실행하여 done 클래스를 추가하였다.
//elem.classList : add, remove, toggle
const item = tomorrow.children[1]
item.classList.toggle('done', true)
자주 사용하지 않기 때문에 toggle은 그냥 '있으면 제거하고 없으면 추가하는 메소드' 라고 보면 된다.
이렇게 자바스크립트로 HTML 태그의 스타일을 다뤄봤다.
기본적으로 style 프로퍼티를 활용해서 요소에 직접 스타일을 수정하는 방식도 있지만
CSS 파일에 원하는 스타일의 클래스를 미리 만들어두고
자바스크립트로는 클래스 속성을 다루는 방식을 권장한다.
▷ 클래스 속성의 값을 통쨰로 바꿀 때는 'className'
▷ 클래스 속성의 값을 부분적으로 수정할 때는 'classList'
이렇게 className과 classList를 활용하였다.
▶ GitHub
JavaScript_soloPlay/interactive_JS/11.스타일적용 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (13) Interactive JavaScript (Event) - 이벤트 핸들러 등록하기 (0) | 2024.11.06 |
|---|---|
| (12) Interactive JavaScript - 비표준 속성 (0) | 2024.11.05 |
| (10) Interactive JavaScript - HTML 속성 다루기 (0) | 2024.10.15 |
| (9) Interactive JavaScript - 요소 노드 삭제 및 이동 (0) | 2024.10.14 |
| (8) Interactive JavaScript - 요소 노드 추가 (0) | 2024.10.11 |