TIL - 21.06.22 👨‍💻

오늘은 계산기 스플린트를 페어로 진행하며 HTML/CSS/JavaScript 에 대한 이해를 높혔다.

자바스크립트로 클래스 추가하기

클래스를 추가하고 싶은 엘리먼트의 #ID 값 혹은 .class 값을 querySelector()로 가져와서 classList.add()를 사용한다.

<div id='idName'>Content</div>

.className {
  background-color: red;
}

let elem = document.querySelector('#idName');
// 선언 안하고 아래 코드 elem 자리에 바로 쿼리 셀렉터를 넣어도 된다. 
// 근데 읽기 어려우니까 웬만하면 읽기 쉬운 변수로 선언하고 사용하자.
elem.classList.add('className');

idName이라는 id를 가진 html엘리먼트에 className이라는 클래스를 부여하는 코드이다.

element.querySelector();

쿼리 셀렉터는 CSS 선택자로 html에서 값을 특정할 수 있게 해주는 메소드이다.
querySelector()의 괄화 안에는 tag, id값, class 값이 올 수 있다.

태그를 선택할땐 querySelector('tagName') 의 형태로 태그를 특정하고,
아이디로 선택할땐 querySelector('#idName') 의 형태로 특정하고,
클래스로 선택할땐 querySelector('.className') 의 형태로 특정한다.

따로 적지 않더라도 따옴표가 적혀있으면 필수이다.

만약 태그나 클래스로 선택할때, 태그나 클래스가 다수일 경우 최초로 찾아지는, 보통은 같은 태그 혹은 클래스 중 가장 위에 있는 값 하나를 선택한다.
그리고 값을 찾는 순간 그 최초 값을 반환하면서 탐색도 멈춘다.

고로 id로 선택하는게 맘 편하고, 만약 태그 전체 혹은 클래스 전체를 선택할땐 차후에 포스팅할 element.querySelectorAll() 메소드를 사용해야한다.

• 두 메소드의 차이와 getElementBy~ 친구들은 차후 OiMW로 포스팅 예정.

.checkList

직접적으로 클래스 속성을 다루는 메소드이다.
주로 사용하는 것은

elem.checkList // elem의 클래스를 문자열로 나열
elem.checkList.length // elem의 클래스 갯수를 숫자로 반환
elem.checkList.add('className', 'className1') // 클래스를 elem 에 추가할 때 사용, 한번에 복수 추가 가능
elem.checkList.replace('classNameBefore', 'classNameAfter') // 클래스를 바꿀때 사용
elem.checkList.remove('className', 'className1') // 클래스를 elem 에서 제거할 때 사용, 한번에 복수 제거 가능
elem.checkList.toggle('className', 'Condition') 
// elem에 className이라는 클래스가 없을때는 className을 추가하고, className이 있을때는 className을 제거한다. 

elem.checkList.contains('className') // elem에 className이라는 클래스가 있는지 확인. 불리언 타입으로 반환한다.

.matches

이 메소드는 엘리먼트가 괄호 안의 CSS 요소가 일치하면 불리언 타입으로 true, 불일치한다면 false를 반환하는 메소드이다.

GOOD 😉

오늘 계산기 스플린트를 가장 높은 단계까지 해결해서 제출했다.
스플린트를 진행하며 막연하게 알고있던 메소드들을 배웠다.더 배워야함

BAD 😥

스플린트에 정신팔려서 나머지 공부를 안했다. 게으른놈
페어님한테 신경을 너무 못 써준 것 같아 죄송하다. 신경써줄 수준이 아니기도 함

TO DO 🔥

• 배열 공부
• 객체 공부
• node.js 공부

Retrospect 🧐

오늘은 그래도 어제보단 더 공부한 것 같다.
사실 이정도 공부량에 만족하면 안되는게 사실이지만 나는 간사한 인간이라 작은 배움에도 크게 만족해버리는 타입의 인간이다.
배움에 크고 작음이 어디 있겠느냐만은 난 더 공부할 수 있음에도 거기서 만족하고 안주 해버렸다는걸 인지하고 있는 최소한의 양심이 있는 사람이라 역시 부끄러워 지고 만다. 항상 부끄러운 사람

정진해라 신성훈

추가로 블로그 포스팅에 대한 갈피는 여전히 못 잡고있다.
TIL에 공부한 것 보다 일기 느낌의 회고가 더 분량이 많으면 어찌하나.
아무래도 운동이니 뭐니 일상의 좋은 점 나쁜 점 까지 중구난방으로 적지말고 진짜 코딩공부에 관한 거기에 이제 푸념이 조금 더해진 것만 포스팅해야겠다.

Reference 🙇

모던 자바스크립트 - https://ko.javascript.info/
🙇🙇🙇