공부 정리/jsChallenge29 js challenge day 5 Flex Panel Gallery Code 배운점 & 느낀점 classList.toggle이라는 매서드를 처음 사용해봤습니다. 어떤 클래스가 없다면 넣어주고, 있다면 빼주는 식입니다. toggleOpen 함수를 작성할 때 target으로 작성했더니 원하는 이벤트가 일어나지 않았습니다. target과 currentTarget의 차이점을 알 수 있었습니다. div 태그로 p태그를 감싸고 이 상황에서 p태그를 클릭하면 p클릭 => div클릭 순으로 이벤트 버블링이 일어나게 되는데, target속성은 p를 가리키고, currentTarget은 div태그를 카르키게 됩니다. 즉 currentTarget은 이벤트 캡쳐링 ,버블링이 일어나는 상황속에서 현재 타겟을 가르킵니다. 2023. 1. 25. js challenge day 4 Code 배운점 & 느낀점 이번 과제는 array 함수들을 이용하는게 중점적이었습니다. js로 코테를 준비하면서 많이 썼던 함수들이라 쉽게 풀 수 있었습니다. 2023. 1. 24. Js challenge day 3 Update CSS Variables with JS Code 배운점 & 느낀점 :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--base); filter: blur(var(--blur)); } 해당 코드처럼 css에서도 변수를 통해 관리할 수 있는 것을 다시 한번 상기하는 계기가 되었습니다. 또한, 이 변수들을 js를 이용해 관리할 수 있는 방법도 배웠습니다.(documentElement.style.setProperty) 2023. 1. 23. Js challenge day 2 js + css clock Code 느낀점 & 배운점 시간 침, 분 침, 초침을 나눠서 transform 하는 방식을 배울 수 있었습니다. setInterval을 사용해본 것은 처음이라 신기한 경험이었습니다. 2023. 1. 19. JS challenge day 1 JS DRUM Code 느낀 점 & 배운 점 순수 js 활용법을 더 공부하고 싶어서 챌린지를 시작하였습니다. 그런데 js 뿐만 아니라, css 부분에서도 공부가 되었던 것 같습니다. 1. css background-size: cover; background-size 속성 중에 cover, contain이 있었습니다. cover는 이미지를 화면에 꽉채우기(화면에 빈 공간 없게, 이미지 좀 잘릴 수 있음) contain은 이미지를 다 넣기(화면에 빈공간 있음) 100%는 짤리는 부분 없이 화면 꽉 채우기 https://www.w3schools.com/cssref/playit.php?filename=playcss_background-size&preval=cover W3Schools CSS background-.. 2023. 1. 17. 이전 1 2 3 4 5 다음 반응형
