본문 바로가기
개발 공부 일지/JavaScript

자바스크립트 - 스타일 다루기

by yelimu 2024. 7. 16. 
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
	<link rel="stylesheet" href="style.css">
  <title>JS with Codeit</title>
</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>

 

자바스크립트로 스타일 적용하기 

 

먼저 변수를 선언한다

const today = document.querySelector('#today');

const tomorrow = document.querySelector('#tomorrow');

 

적용할 스타일 : 취소선

 

1. DOM의 style 프로퍼티 활용하기 - 카멜 표기법으로 작성한다. 

today.children[0].style.textDecoration = 'line-through';

문제점:

1) html 코드 내 태그에 스타일 속성이 추가됨 -> 스타일 우선순위가 높아짐 (혼란 생길수 ㅇ)

2) 같은 스타일을 여러 요소에 적용할때 코드를 반복해서 작성해야함 

2. 태그의 클래스를 변경해서 스타일 적용하기 

 

스타일 시트에 미리 .done 클래스에 적용할 스타일 작성

.done{...}

 

1) elem.className 

클래스 프로퍼티에 새로운 값(done)을 할당

today.children[1].className = 'done';

특징: 기존의 class 속성값 전체가 바뀜 (기존의 클래스가 없어짐) 

 

2) elem.classList  (클래스 속성값을 다루는 유사배열)

add, remove, toggle 메소드 사용 가능

const item = tomorrow.children[1];

 

(1) add 

item.classList.add('done');

item.classList.add('done', 'other'); 여러 개의 클래스를 한번에 추가 - 쉼표로 구분해서 여러개의 파라미터로 

 

(2) remove

item.classList.remove('done');

item.classList.remove('done', 'other'); 

 

(3) toggle (on - off : 파라미터가 이미 있으면 remove 없으면 add)

item.classList.toggle('done');

클래스는 한개씩만 받음 

두번째 파라미터는 toggle 의 기능을 강제하는 boolean 형태의 값을 받음.

true -> add

false -> remove

참조.

CSS 선택자

[속성]{...}

[속성 = "값"] {...} 

 

동일 속성 & 값을 갖는 태그들을 선택할 수 있다

비표준 속성을 활용하는 방법

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>

<body>
  <p>할 일 : <b field="title"></b></p>
  <p>담당자 : <b field="manager"></b></p>
  <p>상태 : <b field="status"></b></p>
  <div>
    상태 변경: 
    <button class="btn" status="대기중">대기중</button>
    <button class="btn" status="진행중">진행중</button>
    <button class="btn" status="완료">완료</button>
  </div>
  <script src="index.js"></script>
</body>

</html>

위 html 코드에서 

b 태그의 field 속성(title, manage, status), button 태그의 status 속성은 html의 표준 속성이 아니다.

(<b> : bold)

 

1. 선택자로 사용한다 

const fields = document.querySelectorAll('[field]') 		 field 속성을 갖는 태그 전체를 fields 변수에 할당한다.
NodesList = [b, b, b] 로 출력된다  
2. 값을 표시할 태그를 구분할때 사용한다

const task = { 
title: '코드 에디터 개발', 
manager: 'CastleRing, Raccoon Lee', 
status: ' ',
};             

for (let tag of fields) {
 const field = tag.getAttribute('field'); 
 tag.textContent = task[field];  
}		 객체 형태의 데이터 task 의 프로퍼티 값으로서 
field 의 속성값인 title, manager, status 를 갖는 각 태그에 원하는 텍스트를 집어넣을수있다 ▼
-------------------------------------------------------------------------------
유사배열 fields 의 요소 tag (<b>태그) 를 순회하면서 {

각 tag의 field 프로퍼티(=title, manager, status)를 field 변수에 할당한다. 

각 tag의 내용(textContent로 접근) = 위에서 선언한 task 변수의 프로퍼티(title, manager, status) 의 값(코드에디터 개발, ...) 을 반환한다
}
3. 스타일이나 데이터 변경을 위해 사용한다 

const btns = document.querySelectorAll('.btn');

for (let btn of btns) {
  const status = btn.getAttribute('status');

  btn.onclick = function () {
    fields[2].textContent = status;
    fields[2].setAttribute('status', status);
  };
}		 btn class를 갖는 태그를 btns에 할당한다.
= [button, button , button ]

btns의 요소를 순회하면서 {
각 btn의 status 속성값(=대기중, 진행중, 완료)을 변수 status 에 할당한다.

btn을 클릭 이벤트 발생 시 함수 동작 :
fields의 [2]번 인덱스 요소(상태 : <b>)의 내용(='status') 에 status 할당
setAttribute로 'status'속성값을 status 로 넣는다 
}

즉 첫번째 btns 요소 : <button>
이것의 status 속성값 = "대기중" -> status 변수에 할당 

<button> 클릭 시 동작 : 
fields의 2번 인덱스 = <b> 태그의 내용을 status 로 바꿔라 
<b> 태그의 status 속성의 속성값을 = "대기중" 으로 바꿔라

 

https://www.snugarchive.com/blog/html-tags-vs-elements/

 

HTML 태그와 요소의 차이

태그와 요소는 다르다

www.snugarchive.com

내가 마지막 코드에서 헷갈렸던 부분!!

textContent -> 태그 안의 내용

setAttribute -> 태그의 속성과 값 

비표준 속성 -> dataset 으로 다루기

예를 들어 list 태그에서 href 는 html 비표준 속성이므로 

href 로 써도 되지만? 혹시 모를 상황(표준 속성으로 등록되는..) 에 대비하기 위해 

data-href 로 써주고 

여기 접근하는 방법은

dataset.href 

 

 

'개발 공부 일지 > JavaScript' 카테고리의 다른 글

자바스크립트 - 이벤트 객체  (0) 2024.07.17
자바스크립트 - 이벤트 핸들러 등록하기  (0) 2024.07.17
자바스크립트 - HTML 속성 다루기  (0) 2024.07.16
자바스크립트 - 요소 노드 Element node  (1) 2024.07.16
자바스크립트 - 문서 객체 모델 (DOM)  (1) 2024.07.16

관련글

티스토리툴바