wazac

본 포스팅은 javascript에 입문하고자 하려고 할때 가볍게 학습 할 수 있도록 나름의 커리큘럼을 짜본 것입니다. todo-list 프로젝트는 다른 게시글이나 유투브에도 많이 나와있기는 하지만, 초보자가 좀 더 접근하기 쉽도록 순차적으로 진행 과정을 쪼개 보았습니다. 순서 1. 글 추가하기 2. 글 삭제하기 3. 글 수정하기 4. localStorage에 저장하기 * html과 css는 대충 만들어 놓았습니다. (정말 대충 ㅎ..) 이 소스를 다운받아 시작하면 됩니다. 기능 목록을 참조하여 미리 소스를 만들어본 뒤, 완성된 소스와 비교해 보세요! 1. 글 추가하기 구현할 기능 목록 - input 입력 후 "ADD" 버튼 누르면 하단에 추가 - input 이 빈값인 경우 "ADD" 버튼 클릭시 "값을 ..

기존에 포스팅되었던 글 중 select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript) 자신을 제외한 다른 부분을 클릭할 때 닫히게 하려면 어떻게 해야 하는지 질문을 주셔서 따로 다루면 좋을 것 같아 새로 포스팅을 해봅니다. 꼭 SelectBox에만 사용되는게 아니니 알아두면 좋을 것 같습니다. 💜 참고로 여기서 지칭하는 selectbox는 html 태그가 아니라 div로 커스터마이징 된 selectbox를 의미합니다. 💜 기존 소스를 보시면 이해하기 더 편하실 꺼예요.😉 원리는 window 자체에 addeventListener를 등록하고 클릭된 event 값을 받아서 비교를 합니다. 그리고 클릭된 event.target이 Select 자신인지 아닌지 비교한 뒤 본인이 아니면 Se..

웹의 기술이 발전하면서 점차 많은 효과를 스크립트와 CSS로 처리하고 있습니다. 이를위해 기본적으로 가장 많이 사용하는 효과를 간단하게 구현해 보도록 할께요. 진짜 초초초초초초초초초 간단한거라서 뭐 .. 도움이 될까 싶지많은 입문자들에게는 또 필요할 수 있잖아요?????????! 아무튼 제가 구현할 효과는 이런거예요. 진짜 간단하쥬? 특히 CSS에 관련된 내용은 아니므로 스타일은 배제했습니다. 물론 그렇다고 CSS를 아예작성하지 않는 것은 아니예요 - html 1 2 3 4 5 6 7 Javascript React Angular Vue JQuery Colored by Color Scripter cs 그리고 css는 우리가 어떤 효과를 줄것인지 잘 생각해보고 작성해봅니다. 디폴트는 처음 액션 그리고 act..

첫 playground 게시글이네요. 알고있는 지식으로 충분히 재밌는 것들을 만들어볼 수 있다는 것을 목표로 만든 게시글입니다. 최초로 게시하게될 글은 바로 랜덤숫자맞추기 게임입니다. * 결과화면 결과화면을 보고 유추하여 먼저 직접 만들어 보시고 나중에 비교해보는것을 추천드려요. 제 코드가 똥코드일수도있잖아요 * 기능설계 간단하게 화면, 기능에서 해야할 일을 나열해보도록 하겠습니다. 1. 시작버튼 클릭 1-1. 화면 - "내가생각하는 숫자를 맞춰 보세요(1부터 100까지)" 문구 출력 - 일력Input, 제출Button, 기회cnt(maxCnt)번 남았어요 출력 1-2. 기능 - 맞춰야할 랜덤 숫자 생성 - input clear, input disabled=false, input에 focus - 기회cn..

javascript나 jquery를 사용하지 않고 CSS 만으로도 순서대로 값을 넣어줄수 있습니다. counter-reset 속성으로 적용할 counter의 이름을 지정해 준후 counter-increment를 사용하면 자동으로 증가하여 숫자가 나타납니다. 주의할 점은 counter의 이름으로 "none", "inherit" 등의 기본적으로 사용되는 속성값을 사용하면 안됩니다. 1. 일반 카운터 - HTML 1 2 3 4 5 6 7 8 Javascript CSS JQuery Colored by Color Scripter cs - CSS 반복되는 요소의 부모에 counter-reset을 걸어주고 반복되는 요소에 counter-increment를 사용하면 자동으로 값이 증가합니다. 그리고 content 안에..