[wecode] 사전스터디 2주차를 마치며

Choi Rim·2021년 6월 13일
1

wecode

목록 보기
2/9
post-thumbnail

사전스터디 2주차 / JavaScript

HTML과 CSS는 예전에 공부하고 구글 클론 코딩을 한번 해봤어서 그나마 수월했는데 자바스크립트도 예전에 공부해봤지만 공부했던게 다 기억이 나지 않아 처음부터 다시 공부했다. 자바스크립트 너무 어려워!!

2주차 과제

https://rimi0108.github.io/introductionwithjs.html/

기억에 남는 배운 것

1. onclick event

저번에 HTML, CSS로 만든 페이지에 자바스크립트 코드를 추가해 보았다. 그리고 저번에 탭을 나누지 않은 게 아쉬워서 탭을 나눠서 구성해보았다. 노마드 코더 강의를 보며 자바스크립트로 그림이 그려지는 스케치북도 만들어보았는데 코드를 다 이해하진 못했지만 자바스크립트의 전체적인 적용 방법을 알 수 있었다. 그것을 기반으로 onclick 이벤트를 이용하여 버튼을 누르면 테마와 사진이 바뀌는 자바스크립트 코드를 추가해보았다.

 <input type="button" id="button1" onclick="button1_click();" value="spring"/>
function button1_click() {
  document.querySelector("*").style.backgroundColor = "#ffc7c7";
  document.querySelector("footer").style.backgroundColor = "#ffc7c7";
  document.querySelector(".menu").style.backgroundColor = "#ffc7c7";
  document.querySelector("#wrap").style.backgroundColor = "#ffc7c7";
  document.querySelector("nav").style.backgroundColor = "#ffc7c7";
  document.querySelector("body").style.backgroundColor = "#ffc7c7";
  document.querySelector("#button1").style.backgroundColor = "#ffc7c7";
  document.querySelector("#button2").style.backgroundColor = "#fbf6f0";
  document.querySelector("#button3").style.backgroundColor = "#fbf6f0";
  document.querySelector("#button4").style.backgroundColor = "#fbf6f0";
  document.querySelector("h1").style.color = "#ffc7c7";
  document.querySelector("h2").style.color = "#ffc7c7";
  document.getElementById("photoOne").src = "홈사진4.jpg";
  document.getElementById("photoTwo").src = "홈사진3.jpg";
}

버튼을 누르면 배경색, 사진이 바뀌는 자바스크립트 함수가 실행되도록 하였다.

2. display: none;

모바일에서는 스케치북이 실행되지 않아 미디어 쿼리를 사용해 어떻게 탭을 없앨 수 있나 찾아보았는데 디스플레이 속성값을 none으로 주면 요소가 사라진다는 것을 배웠다. 그것을 이용해 모바일에서는 스케치북 탭이 나타나지 않도록 하였다.


@media(max-width: 768px) {
 .sketchBook {
    display: none;
  }
 }

또 한주가 지나갔다. 공부를 하다보니 시간이 너무 너무 빠른 것 같다. 어제 밤에 일년전 일기를 꺼내보았다. 뭘 해야지 다시 인생의 활기를 찾을 수 있을까 많이도 힘들어하던 내가 너무 안타까웠다. 그 때 코딩을 만났다! 코딩을 하다보면 힘들기도 하지만 정말 재미있고 뿌듯하다. 이런 일을 찾은 게 기적같고 감사하다. 앞으로도 즐거울지는 모르겠지만 이 마음을 오래도록 잊지 않고 간직하고 싶다. 3주차는 파이썬 공부가 시작된다. 내가 좋아하는 파이썬! 다음주에도 열심히 해봐야지.

profile
https://rimi0108.github.io/

0개의 댓글