클로리셔 작은 공간

input type="checkbox" 체크박스 체크여부로 인한 JS 제작 작업중에 checkbox가 체크가 안되어있을 때, 경고문 뜨도록하는 작업이 들어왔다. 간단할 줄 알았는데 생각보다 로직이 은근 꼬여서 이번 기회에 어떻게 해결했는지 메모하려고 한다. 이런것들이 다 나의 피와 살, 토양과 영양분, 커리어와 연봉이 되거라며.. 연봉 incease(가즈아 🚀)!!! [ HMTL ] 전체 Image Exel PPT Word seach [ JavaScript Version 01 ] // search input이랑 button 부분 const searchInput = document.querySelector('#searchKey'); const searchButton = document.querySelect..

사실 개발 공부하면서 너무 방대한 정보때문에 혼자 끄적이는 메모장 개념으로 시작한 블로그.. 2019년 12월쯤 처음 시작했던거 같다.. 가~끔 메모해야겠다는 부분만 남겨놓고 잘 안들오던 어느날, 또 포스팅하려고 오랜만에 들어왔더니 하루 방문자가 200명씩 들어오고 있었다..(?) 오..? 200명..? 하면서 신기한 마음에 게시물을 더 써서 광고를 해볼까? 하면서 게시물을 더 쓰게되었고 점점 방문자가 늘어나더니 2달 뒤 쯤 300명 첫 돌파! 뭔가 성장해가는 내 블로그 귀엽다 ㅋㅋㅋ 광고라는걸 붙여볼까 하고 알아보다가 무슨 소린지 모르겠다 싶어서 포기했다.. 그냥... 원래하는대로 공부 블로그나 해야지 하면서 똑같이 생활했다.. 그러다보니 어느날 400명까지 넘어가더라... 아니.. 이거 진짜 욕심 나..

둘 다 JS를 사용해서 HTML코드를 DOM에 넣어 조작하는 메서드다. 1. innerHTML = " html " 로 둘러쌓인 텍스트를 클릭 시 태그로 바꾸는 JS를 작성해보았다. click 안녕하세요, 지금은 'span' 태그입니다. 라이브 서버로 확인해보면 클릭 버튼 옆에 텍스트가 나란히 나온다. const btn = document.querySelector("button"); const el = document.querySelector("#el"); btn.addEventListener('click', e => { el.innerHTML = "지금은 'p'태그로 변경되었습니다." }) 클릭하는 순간 태그에서 태그로 덮어씌워진다. innerHTML의 특징 중 하나다. 기존..

회사 또래 직원들끼리 같이 스터디 하기로 했다. 스크립트 미션을 받아서 각자 코드를 짜보고 본인의 코드를 리뷰하면서 더 좋은 방법 알아가는 방식으로 하기로 했다. 첫번째 미션은 자바스크립트를 이용해서 그래프를 만들기 프로젝트!! 일주일동안(~22.02.24) 각자 작업해서 리뷰하기. 하단 이미지처럼만 짜여있는 HTML / CSS 코드를 이용해서, 순수 바닐라 자바스크립트로 하단 바 그래프처럼 표현하기이다. 1) 각 항목에 있는 숫자만큼 바 그래프가 표시되어야한다. 2) 평점 계산, 기준 라인(0, 5, 10, 15…) 표현되어야 한다. 3) 재활용 가능하게 만들어야 한다. 4) 이미지 사용 안된다. - 최대한 HTML을 안건들면서 JS를 이용해 DOM을 조작하..

JS를 처음으로 제대로 공부를 시작하면서 멘탈이 와자작 나갔던 날들이 기억이 난다. 공부하면서 나오는 용어들이 온통 한자어 + 영어 섞여가지고 무슨 소리인지 이해도 안갔고.. 수 많은 개발 용어들과 아무리 읽어도 이해할 수 없는 설명들... 그래도 '해보자'하고 무작정 js공부를 했지만 늘 단어가 낯설어서 매번 리셋 되는 기분이었다. "이걸 내가 할 수 있을까?" 이 생각이 매 순간 들었던거 같다. 급할수록 돌아가라는 말을 세기며 앞으로 이 길로 가기로했으니 침착하게 일단 용어부터 익숙해져야겠다 생각이 들었다. 왜냐하면 용어를 몰라도 바로 스크립트 짜면서 진행하려했지만 단어의 뜻을 이해를 못하니 진도나가는게 너무 벅찬 느낌이었다. 영어로 치면 아는 단어도 없는데 하고싶은 말이 많은 기분...(?) 그렇게..

개발 공부를 하다보면 수많은 영어와 줄임말이 나온다. 너무 많아서 헷갈리기도하고 매번 까먹는것 같아서 개인적으로 정리를 하다가 블로그에 그냥 남기기로 했다. 용어를 찾을때마다 추가 할 예정. 01. TOC [ Table Of Contents ] – 목록을 나타낼 때 보통 쓰는 말 02. NPM [ Node Package Manager ] 03. CLI [ Command Line Interface ] 04. CDN [ Contents Delivery Network ] – 제약없이 전 세계 사용자에게 빠르고 안전하게 컨텐츠 전송할 수 있는 컨텐츠 전송 기술 05. HTML [ Hyper Text Markup Language ] 06. VCS [ Version Control System ] 07. SVN [ ..

requestAnimationFrame() 바닐라 자바스크립트로 애니메이션 개념잡기 간단하게 개념을 잡기위해 필요한 기본 HTML 코드는 버튼과 작은 박스 '#box' 를 준비했다. HTML click CSS button{padding: 10px 20px; margin: 50px; } #box{width: 300px; height: 300px; background: aqua;} 01. requestAnimationFrame() 이용해서 반복하는 스크립트 짜보기 JS const btn = document.querySelector('button'); const box = document.querySelector('#box'); let num = 0; btn.addEventListener("click", e ..

Google Play [ Chrome Vox ]로 스크린리더 사용해서 테스트하기 스크린 리더(Screen Reader) 란 – 시각 장애인들에게 화면 내용과 자신이 입력한 키보드 정보나 마우스 좌표 등을 음성으로 알려주는 기능. 가끔 내가 만든 코드가 스크린 리더가 읽히기 쉽게 잘 작동되는지 궁금할때가 있었다. 그래서 테스트 해보고싶어서 검색하다가 chrome vox 라는걸 알게되었다. 사용법은 아래와 같다. 01. 구글에서 구글 앱 버튼 누르기 02. 구글 웹 스토어 들어가기 03. 검색창에 [ Chrome Vox ] 입력 후 "확장 추가" 04. 내 계정에서 접근성에 스크린 리더를 "사용"으로 설정 - 추가하자마자 바로 작동될 수도 있다. 여기까지 했다면, 마우스가 선택하는 곳마다 음성으로 스크린 리..

01. style(CSS) 속성값을 변경해보기 1) CSS 속성을 추가하기 - element.style.color * [ style.css속성명 ]은 기존 정의 된 style에서 새로운 속성 추가된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. const text = document.querySelector("p"); text.style.color = "hotpink"; 2) CSS 속성 여러개 추가하기 - element.style.cssText * [ style.cssText ]는 기존 정의된 style 지우고, 새로운 속성으로 덮어쓴다. Lorem ipsum dolor sit amet consectetur adipisicing elit. co..