728x90 반응형 classname2 14 ClassName과 ClassList의 차이 className & classList 차이 1. Toggle Button의 원리 2. className과 classList 두 방식의 차이점 1. Toggle Button의 원리 이제껏 구현하려 했던 것이 다름 아닌 toggle button의 원리이다. 그것은 클래스와 이벤트 리스너로 이뤄어져있다. 글자의 색 정보를 담고 있는 클래스와 색을 변화시킬 수 있는 function. 그리고 버튼을 클릭하면 동작을 실행하라는 명령으로 되어있는 것이다. 이전 장에서 글자 색 정보를 css에서 클래스로 정의하고, js에서 function을 만들고, eventListener로 실행하게 해 주었다. 이 function 내에서도 className이라는 아이에게 변수를 할당하여 조건에 따라 글자색의 클래스를 바꾸도록 기능.. 2023. 6. 1. 13 CSS로 Style 작성하기 기초 I css로 style작성하기 1. CSS에서 해야 할 것들 2. 해석해보기 1. CSS에서 해야 할 것들 지금까지 js에서 작성해보면서 테스트를 했다. 사실 text color 같은 것들은 style에 속하고, css에서 변경하는 것이 맞다. 그렇게 하는 것이 코드도 간결해지고, 에러도 줄일 수 있는 일관성을 갖는데 유리하다. 초기 작성했던 css로 가보자. body{ background-color: beige; } 이것만 있을 것이다. 배경색 베이지로 정했었다. 여기에 h1 글자색을 정의를 추가하자. 그리고, 글자색을 바꿔줄 class도 하나 만들자. 이 class가 h1의 컬러를 담당할 변수를 대신한다고 보면 되겠다. 그럼 전에 했던 currnetColor 또는 newColor 같은 번거로움이 사라진다.. 2023. 6. 1. 이전 1 다음