본문 바로가기
728x90
반응형

분류 전체보기65

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.
12 Event 토글 버튼의 원리을 알자 토글 버튼의 원리 Text를 click 하면 색이 바뀌고, 다시 click 하면 원래 색으로 바뀌고, 이걸 반복하는 걸 만듭니다. 일종의 토글버튼같은 방식을 구현해보려 합니다. ① 먼저, 현재 색과 바뀔(새로운) 색 두 가지 변수에 대해 생각해 보고, ② 색을 바꿔줄 함수, 조건문으로 처리하는 방식으로 작성하고, ③ click 이벤트에 따라 함수를 실행시키게끔 연결시켜 주는 작업을 합니다. 변수 1 : 현재색 : currentColor라고 하겠습니다. 변하지 않을 것이기 때문에 const로 type을 정합니다. 변수 2 : 변할 색 : newColor라고 하겠습니다. 변할 것이기 때문에 let이라고 type을 정합니다. *여기서 변할 것이란 것은 우리가 이벤트를 줄 때마다 다른 값이 들어갈 것이기 때문입.. 2023. 5. 31.
11 Event 다양한 변화에 반응하게 만들기 여러가지 변화에 대한 반응 지금까지 event를 반영한 대상은 text였습니다. 본문에 있는 title이라는 요소를 js에서 가져와서 어떤 function을 적용하는 방식이죠. 이번에 window라는 속성을 변경시켜 볼게요. 윈도는 웹브라우저 창이라고 생각하면 될 것 같습니다. window에 해당하는 event들은 어떤 게 있을까요? google에서 "window mdn"이라고 검색하면 다음처럼 확인할 수 있고, 다양한 함수가 document 에서처럼 많이 존재한다는 걸 볼 수 있습니다. 아래로 계속 내리다 보면 resize라는 걸 찾을 수 있을 겁니다. 리사이즈란, 브라우저 창의 크기를 조절한다는 뜻이죠. 그래서 뭘 할 거냐면 창의 사이즈를 직접 조절하게 되면 창의 배경색이 바뀌는 것을 해볼 겁니다. .. 2023. 5. 31.
10 Event 마우스에 반응하게 만들기 마우스에 대한 반응 javascript 작성 시 필요한 document, object, function에 관해 찾고자 할 때 html headingElement mdn을 google에서 검색합니다. h1 html heading element Web APIs Mdn (mdn= mozilla developer network) 또한, 우리는 콘솔에서도 확인 가능하죠. js파일에서 다음과 같이 입력하면 됩니다. console.dir(document); event에 관해 좀 더 적용해 봅니다. 마우스 클릭했을 때, 마우스 오버 했을 때, 마우스가 벗어났을 때 이렇게 해보죠. onmouse으로 시작하는 걸 찾아보면 되겠어요. onmouseenter : 마우스 오버했을 때 onmouseleave : 마우스 벗어났을 .. 2023. 5. 31.
09 Event 행위를 인지하고 반응하게 만들기 행위의 인지와 반응 우리가 뭔가 행위를 하여 입력하는 상황을 event라고 합니다. 그럼 이걸 인지하기 위해서 뭘 해야 할까요? ① 먼저 js에서 대상이 될 html 요소(element)를 불러와야겠죠. ② 출력할 무언가에 대한 함수를 만듭니다. (일종의 기능이죠. 예를 들어 글자가 커져라!, 색이 바뀌어라, 얼마큼 움직여라 등등) ③ 입력받을 값과, 위에서 만든 출력할 함수를 연결시켜 줍니다. 아래와 같이 문자열이 있고, 우리는 이것을 클릭하면 우측 콘솔에 Title was ckicked라는 문구를 출력하라고 할 겁니다. 순서대로 해보죠. 이전 장에서 사용했던 html을 그대로 사용합니다. DOCTYPE html> Momentum Come on me! ① 먼저 js에 무엇을 불러올 것인가? html에 .. 2023. 5. 31.
08 Elements 엘리먼트와 쿼리셀렉터 엘리먼트 Element의 활용 getElementsByClassTagName & querySelector 이전 장에서 javascript 를 이용해 classID로 불러오기를 해봤다. 이번에는 className으로 불러오기, classTagName으로 불러오기, querySelector로 불러오기를 해보겠다. html은 다음과 같이 title을 className으로 하고, h1 Tag에 감쌌다. DOCTYPE html> Momentum Come on me! 1. getElementsByClassName js파일은 다음과 같이 className을 통해 title을 출력하고 있다. const title = document.getElementsByClassName("title"); console.log(tit.. 2023. 5. 30.
07 html , javascript에서 html을 다루기 javascript에서 html을 다루는 방식 먼저 html에 body안에 제목을 만들고, 그 제목의 class 이름과 id를 정의하였다. DOCTYPE html> Momentum Come on me! 이제 javascript에서 id를 통해 element를 오브젝트로 불러와서 변경하는 작업을 해보자. 먼저, 콘솔에 title이라는 id를 불러와 오브젝트의 프로퍼티를 살펴보자 콘솔에서 작성했던 구문을 다음과 같이 js파일에 작성해서 콘솔로 확인해 보자. title이라는 id를 통해 element를 불러와 title에 할당했고, 콘솔에 그 dir 오브젝트 정보를 모두 모여달라고 했다. const title = document.getElementById("title"); console.dir(title); .. 2023. 5. 30.
06 Document 도큐멘트에 대한 이해 도큐멘트 Document에 대한 이해 도큐먼트는 브라우저가 이미 갖고 있는 오브젝트를 담고 있으며, 우리가 만든 html을 불러오고 연결할 수 있음을 의미한다. 웹브라우저 / 콘솔에 'document'라고 입력하고 엔터를 쳐보자. 우리가 작성하고 있는 html 소스를 보여주고 있다. 이제 콘솔에 'console.dir(document); '라고 입력해 보자. 그럼 도큐먼트의 모든 오브젝트를 볼 수 있다. 이 말은 브라우저가 이미 도큐먼트 안에 모든 오브젝트를 담고 있다는 의미다. 즉, 우리가 주로 사용하는 오브젝트와 함수를 이미 브라우저가 담고 있기 때문에, 우리가 html코드를 짜서 웹에 올리면 이를 읽어서 화면에 보여줄 수 있는 것이다. 즉 브라우저라는 의미는 언어해석기 같은 것이다. 우리가 눈으로 .. 2023. 5. 30.
EX. 마우스 움직임에 반응하는 텍스트 만들기 오늘 과제! 마우스 움직임에 따라 반응하는 텍스트 마우스를 글자 위에 올리면 text가 변하고 마우스가 벗어나면 또 text가 변하고 화면사이즈를 조절하면 text가 변하고 마우스 우클릭하면 text가 변하는 js를 작성함 함수를 이용하여 마우스 반응에 대한 동작을 정의하고 이벤트 리스너를 통해 각 행위에 대해 연결해줌 텍스트 내용과 컬러에 대한 변수를 불러와 할당하고 각 함수에 변수를 적용함 참고사항(이벤트) 마우스 온 = "mouseover" 마우스 릴리즈 = "mouseout" 마우스 우클릭 = "contextmenu" 윈도우창 크기조절 = "resize" BR.h 2023. 5. 30.

티스토리툴바