전체 글 썸네일형 리스트형 [JS / javascript] javascript array(어레이) 배열 Array 문법을 아주아주 간단하게 어떻게 사용할 수 있는지 보죠 javascript에서 array는 여러가지를 담을 수 있는 상자라고 생각하면 됨 상자에서 내가 원하는 물건을 꺼내와서 쓸 수 가 있음 array(배열)을 사용하려면 변수안에 집어넣어야 함 script 어레이상자 라는 변수를 만들었고 그 안에 꼬북 칩, 포카칩을 넣었음 참고로 array를 만들때는 [ ] 괄호를 사용하면 됨 console.log(어레이상자); 콘솔. 로그(어레이 상자); 를 찍어보면 0은 꼬북칩 1은 포카칩 문자열로 잘 들어와 있는 걸 확인할 수 있음 여기까지는 다들 문법 강의에서 알려줌 그리고 다음 오브젝트 같은 걸로 넘어감 이걸 어떻게 사용하는지 알려주지 않음 아주아주 대충 이걸 어떻게 사용하냐면 과자는 역시 맛동산 이.. 더보기 [HTML / CSS] Bootstrap 부트스트랩 사용법 간단 https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 1. Get Started 클릭 2. Starter template 코드 복사 3. 코드 작성 끝 bootstrap은 css랑 html 짜기 겁나 귀찮고 디자인 감각 없는 우리가 자주 사용하는 라이브러리임 다 꾸며주고 다 꾸며놓음 코드 붙이고 쓰기만 하면 됨 그거마저 귀찮은 당신 Hello, world! 이것도 귀찮은 당신 head에 넣고 코드시작하면 됨 jquery cdn은 따로 import 시켜야 제이쿼리 사용 가능 더보기 [JS / javascript] togle menu 토글 메뉴의 종류 / navbar의 활용 흔히 navbar(메뉴바)를 만들 때 코드 몇 줄만으로 애니메이션 효과를 줄 수가 있숨 연습용 html togle 연습이다잇! 메뉴 An item A second item A third item A fourth item And a fifth one 이렇게 html을 만들어 놈 참고로 list 부분은 Bootstrap이라는 라이브러리를 사용했다 css를 간편하게 해 주고 간단한 기능까지 넣어주는 최고 킹왕짱! https://getbootstrap.com/docs/5.1/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mob.. 더보기 [JS/javascript] addEventListener 애드이벤트리스너 ! 자바스크립트의 onclick방식 알고 있습니까? 예를 들어 alert이다잇! 이렇게 onclick 버튼()을 function 버튼으로 만들어 alert창을 띄웠죠 onclick은 버튼을 누르면~~ 이런 뜻이 됩니다 onclick 말고도 있지만 요즘 이런방식에서 addEventListener방식을 많이 사용한다고 하죠 사용방법부터 알아보죠 문법 이렇게 생겼숨다 대충 아시겠죠 addEventListener() 괄호 안에 click클릭을 function란 기능을 넣어서 { 어디에 실행할 건지 코드를 적어주면 되는것입죠 } 해볼까요? 간편합니다 굳이 onclick을 html태그에 붙이고 그걸 다시 자바스크립트로 짤 필요 없이 자바스크립트 안에 다 해결이 가능한것입죠 당연히 jQuery 문법으로 변경도 가능하겠죠.. 더보기 [JS / javascript] function함수 parameter(파라미터) 인자 이전 글 function 함수와 jquery를 이용해 hello!!! 예쁜 버튼 만들어 보았죠 function 이름() 여기에 있는 function 이름(parameter) 여기로 파라미터 또는 인자라고 해요 파라미터 안에 원하는 이름을 정해 줍니다 function 이름(str) { $('#test').text(str); } 저는 str 이라고 파라미터를 정해 주었어요 그러면 이름() 여기 안에 아무거나 들어갈 수 있어요 예를 들어 이러면 이름 하고 문자열을 넣으면 str이 text(str)에 들어가면서 이렇게 나오죠 이걸 button과 같이 사용해 보죠 hello!!! 예쁜 버튼 이렇게 이름() 안에 문자열 '여기는 아무거나 다들어가!'를 넣어봤어요 그리고 버튼을 클릭하게 되면 잘 받아 입력 되네요 대.. 더보기 [JS / javascript] jquery(제이쿼리) !! 전편 javascript에서 document.getElementById('test').innerHTML = '한번만 바꿔라 쪽팔리게잇!' 이렇게 자바스크립트를 구성하면 된다고 했다 document는 문서 getElementById는 아이디를 가지고 있는 놈을 찾아줘~ . innerHTML은 HTML을 변경해줘~ 라고 했는데 너무 길다 이걸 짧게 줄일 수 있는 게 jQuery다 jQuery를 잘 쓰면 긴 코드를 축약할 수 있습니다 사용하기 전 jQuery는 html에 import 시켜야 사용할 수 있죠 이걸 복사해서 HTML의 head든 body든 붙여넣으면 된다 CDN이라고 하는데 사용 법이니 자세한 건 묻지 마요 https://releases.jquery.com/ jQuery CDN The integr.. 더보기 [JS] javascript의 시작! 그동안 CSS로 어렵사리 만들어본 작동기능들 이제는 js로 쉽게 해보자 HTML hello JS! 이것을 자바스크립트 문법을 통해 바꿔보겠다 먼저 자바스크립의 기능을 구현하려면 h3에 id를 줘야한다 hello JS! 한글도 가능! 그리고 document 문서 getElementById('아무거나이름') 찾은 아이디 innerHTML 이기능으로 '헬로제이에스' 바꿔줘 hello JS! h3에 id가 '아무거나이름' 이니까 h3를 바꿔줘 여기서 innerHTML은 안에있는HTML을 바꿔 뭐로 '헬로제이에스!'로 참고 - 코딩애플 MDN - javascript MDN에서는 개발자가 되기위한 자바스크립트 코스같은것도 마련해 놓은거 같은데 유료강의나 다른걸 사기전 맛보기로 봐도 좋을거 같아요 이어서 >>> 더보기 [CSS] transition을 이용한 검색 창 꾸미기 자바스크립트를 이용하면 쉽지만 CSS의 transition만으로도 간단하게 화면을 꾸밀 수 있다 CSS .navibar-search input { box-shadow: 3px 2px 1px #041562; border-radius: 5px; border: none; width: 150px; transition: all 1s; color: #041562; } .navibar-search input:focus { width: 300px; } transition = 1s(1초)에 걸쳐 시작과 최종 스타일을 보여줘 focus = 검색 창을 눌렀을때 가로 150px(시작) 에서 300px(최종)으로 보여줌 1초에 걸쳐서 나머지 css는 검색 창을 꾸미는 용도라 신경쓰지 않아도 된다 그냥 input창으로 연습가능 .. 더보기 이전 1 ··· 8 9 10 11 12 13 다음
