티스토리 뷰

Frontend/JavaScript

[JavaScript]#12 Javascript and CSS

blueprint-12 2021. 11. 19. 22:30

style -> CSS

animation -> JS 

: style요소는 JavaScript에서 변경되는 것보다 CSS(.css파일)에서 변경되는 것이 적합하다. 

JavaScript(.js)는 animation에 적합합니다. 

 

※어떤 요소가 getter 이자 setter이라는 의미?

어떤 값을 얻어올(get) 수도 있지만 변경(update)할 수 도 있다 라는 뜻 

 

CSS in JavaScript 

HTML 코드 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>2021117</title>
  </head>
  <body>
    <div class="hello-one">
      <h1 class="sexy-font">Grab me!</h1>
    </div>

    <script src="app.js"></script>
  </body>
</html>

CSS 코드 

body {
  background-color: beige;
}
h1 {
  color: cornflowerblue;
  transition: color 0.5s ease-in-out;
}
.clicked {
  color: tomato;
}
.sexy-font {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

JS 코드 

const h1 = document.querySelector(".hello-one h1");

function handleTitleClick() {
    const clickedClass = "clicked";
  if( h1.className === clickedClass){
      h1.className = "";
  }else {
      h1.className= clickedClass;
  }
};


h1.addEventListener("click", handleTitleClick);

 

위 코드에서 * const clickedClass = "clicked";

// "clicked"의 값을 raw value 혹은 raw String 이라고 한다.

이전에 코드는 변수를 선언하지 않고 clickedClass자리에 "clicked"  값을 넣어놨는데 

이렇게 되면 오타가 날 수도 있고 같은 클래스명을 적어줘야하는데 실수로 잘못적을 위험이 있다.

->잘못적었을 때, 코드가 제대로 작동하지 않지만 원인을 알아차리기 어렵다.

->하지만, 변수명이 틀렸을 경우는 JS에서 알려준다. e.g.) clickedClass is not defined ~

그러므로 같은raw String이 반복되면 변수로 선언하고 raw String 자리를 변수명으로 대체해주는 것이 좋다. 

 

※이슈:

우리가 작성한 JS코드는 이전에 클래스명이 존재하든 없든 아예 새로운 것으로 변경하기 때문에 기존 클래스명을 없애버릴 수 있습니다. 그렇다고 새로운 클래스명이 생길때마다 변수에 추가해주는 것도 이상하구요.

그렇다면 어떻게 해야할까? 

className을 바꾸는 다른 방법인 classList를 사용해보자!

  • className & classList (2가지 방법)
  • classList - class들의 목록으로 작업할 수 있게 허용
  • className - 이전 class 상관없이 모든 것을 교체함

classList 사용해보기(classList메소드 - contain(), remove(), add() ) 

  • contains( String ): 지정한 클래스 값이 엘리먼트의 class 속성에 존재하는지 확인한다.
  • add( String [, String [, ...]] ): 지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 엘리먼트의 class 속성에 이미 존재한다면 무시한다.
  • remove( String [, String [, ...]] ): 지정한 클래스 값을 제거한다. ( note: 존재하지 않는 클래스를 제거하는 것은 에러 발생X)
const h1 = document.querySelector(".hello-one h1");

function handleTitleClick() {
    const clickedClass = "clicked";
  if( h1.classList.contains(clickedClass)){
      h1.classList.remove(clickedClass);
  }else {
      h1.classList.add(clickedClass);
  }
};


h1.addEventListener("click", handleTitleClick);

만약, clickedClass가 h1의 classList에 포함되어있다면 제거해주고 아니라면(else) 더해줘~

-> 모든 class name을 교체하는것이 아니라 특정한 class name만 변경하도록 했음 

즉, 기존에 있던 sexy-font는 영향을 받지 않고 그대로 유지할 수 있게 됩니다.

 

참고로 이 세가지 메소드는 contain() + remove() + add()는 = toggle() 하나와 같은 역할을 합니다.

(토글은 신이다..)

classList.toggle()

toggle( String [, force] )

  • 하나의 인수만 있을 때: 클래스 값을 토글링한다. 즉, 클래스가 존재한다면 제거하고 false를 반환하며, 존재하지 않으면 클래스를 추가하고 true를 반환한다.
  • 두번째 인수가 있을 때: 두번째 인수가 true로 평가되면 지정한 클래스 값을 추가하고 false로 평가되면 제거한다.contains( String )
function handleTitleClick() {
    const clickedClass = "clicked";
    
    h1.classList.toggle(clickedClass);
  };

하지만 여기서는 clikced 라는 클래스명이 한번만 쓰이기 때문에 변수는 굳이 필요없겠죠

선언해준 것을 제거해주고 직접 작성합니다. 

♬ 완 성 된 JS 코 드 ♪

const h1 = document.querySelector(".hello-one h1");

function handleTitleClick() {
    h1.classList.toggle("clicked");
  };

h1.addEventListener("click", handleTitleClick);

 

 

코드해석: toogle()은 h1의 classList에 clicked class가 이미 있는 지 확인해서 만약에 있다면 clicked를 제거해줍니다.

만약 h1의 classList에 clicked가 존재하지 않는다면, clicked를 classList에 추가해줍니다. 

 

ref:https://developer.mozilla.org/ko/docs/Web/API/Element/classList

 

Element.classList - Web API | MDN

Element.classList는 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티이다.

developer.mozilla.org

 

CSS에 정의된 class name들로 HTML element에서 숨기고 표시하는 방법과 toggle을 사용하는 법을 배웠다.

 

여담:

What are JavaScript tokens? (자바스크립트 토큰이 무엇인가요?)

Tokens are the smallest individual words, phrases, or characters that JavaScript can understand. When JavaScript is interpreted, the browser parses the script into these tokens while ignoring comments and white space. 

(토큰은 JavaScript가 이해할 수 있는 가장 작은 개별 단어, 구문 또는 문자입니다. JavaScript가 해석될 때 브라우저는 주석을 무시하고 스크립트를 이러한 토큰으로 구문 분석합니다.)

ref:https://askinglot.com/what-are-javascript-tokens

'Frontend > JavaScript' 카테고리의 다른 글

[JavaScript]#14 event(the first argument of function)  (0) 2021.11.24
[JavaScript]#13 Input Values, button 태그  (0) 2021.11.20
[JavaScript]#11 Events 2  (0) 2021.11.15
[JavaScript]#10 Events  (0) 2021.11.14
[JavaScript]#9 Elements 불러오기  (0) 2021.11.14
댓글