지노스_ZNOS

나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 위의 코드를 가지고 연습을 해보자 우리의 목표는 버튼을 눌르면 포스팅 박스가 열고,닫히는 기능을 넣는 것이다. 박스의 id는 post-box 이다 JQuery에서 무언가를 보이게 하고 안보이게 하는 기능은 hide와 show를 사용하면 된다 아래의 코드를 에 넣어보자 function openClose() { if ($('#post-box').css('display') == 'block') { $('#post-box').hide(); } else { $('#post-box').show(); } function openClose() { → openClose라는 함수를 만들자 i..

다음의 예시를 불러와보자 나홀로 링크 메모장! 중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다 포스팅 박스 열기 아티클 URL 간단 코멘트 기사저장 여기 기사 제목이 들어가죠 기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산... 여기에 코멘트가 들어갑니다. 나는 사진을 가운데 정렬을 하기 위해 위의 코드에 에서 .card-columns { width: 900px margin: 20px auto; } card-columns 클래스의 폭을 설정하고 마진을 위,아래 20px, 좌우 가운데정렬로 지정했다. 그런데 이동이 안된다. 왜 그럴까? 그 이유는 card-columns 라는 클래스의 설정을 Bootstrap에서 정해놨기 때문이다..

JQuery(제이쿼리) Javascript의 라이브러리(library) 중 하나다 Library(라이브러리) 자주 사용하는 코드를 미리 작성해 놓은 묶음이다 예를들어 소문자를 대문자로 바꿔주는 toUpperCase 함수나, 문자열을 특정 문자로 나눠주는 split함수 등이 JS에서 기본으로 제공하는 라이브러리에서 사용하는 함수이다(내가 따로 함수를 만들지 않아도 미리 약속되어 있는 함수) JQuery와 Javascript - 코드 길이 비교 jQuery를 이용하는 이유는 좀더 코드를 직관적이고 짧게 쓸 수 있기 때문이다. 다음의 예시를 보자 JS document.getElementById("apple").style.display = "none"; document.getElementById("apple")..

0부터 n-1까지 더하는 함수 function calculateSum(n) { let sum = 0 for (let i = 0; i < n; i++) { sum += i; // sum을 i만큼 증가시켜라. sum = sum + i 와 동일! } return sum } console.log(calculateSum(10)) // 45를 출력 리스트에서 원소의 갯수 세기 let fruitsBasket = ['사과','감','감','배','포도','포도','딸기','포도','감','수박','딸기'] let count = 0; for (let i = 0; i < fruitsBasket.length; i++) { if (fruitsBasket[i] == '딸기') { count += 1; } } console.lo..

조건문은 if를 사용하는데 excel을 사용해봤다면 어렵지 않게 이해할 수 있다 function compareNinety(num){ if (num > 90) { alert('90보다 커요!') } else { alert('90보다 작아요!') } } compareNinety(30); function compareNinety(num) → num이라는 변수를 갖는 compareNinety라는 함수를 선언하자 if (num > 90) → num이라는 변수의 값이 90보다 크면 alert('90보다 커요!') → 90보다 커요! 라는 알람이 뜨게 해라 else → 그 이외의 상황에서는 alert('90보다 작아요!') → 90보다 작아요! 라는 알람이 뜨게 해라 그래서 compareNinety(30);을 콘솔창..

자바스크립트에서 기본적으로 제공하는 여러 함수들을 보자 나눗셈의 나머지 구하기[%] let a = 20; let b = 7; console.log(a % b); // 6 알파벳 소문자를 대문자로 바꾸기[toUpperCase()] let myClub = 'abcde'; console.log(myClub); //'abced' let upperCase = myClub.toUpperCase(); console.log(upperCase); // ABCDE 특정 문자로 문자열 나누기[split('')] let myEmail = 'znos@gmail.com'; let result = myEmail.split('@'); // ['znos','gmail.com'] console.log(result[0]); // znos..

자바스크립트에서 리스트(List) 와 딕셔너리(Dictonary)는 자료를 담는 형태를 의미한다 (가장 많이 쓰이는 형태이다) 리스트 순서를 지켜서 가지고 있는 형태 let multiList = [1,2,'hey',3]; // 로 선언 console.log(multiList); // (4) [1, 2, 'hey', 3]을 출력 // 대부분의 프로그래밍 언어는 index가 0 부터 시작합니다. console.log(multiList[1]); // 2 를 출력 console.log(multiList[2]); // 'hey'를 출력 // 리스트에 요소 넣기 multiList.push('헤이'); console.log(multiList); // [1, 2, "hey", 3, "헤이"] 를 출력 // 리스트의 길..

[크롬 개발자도구(F12)]를 열어서, console 탭에 작성을 하자 크롬 개발자도구 콘솔창은 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다(새로고침하면 모두 사라짐) 콘솔창에 아래 코드를 붙여놓고 엔터를 쳐보자 console.log("Hello World!"); 여기서 console.log(); 는 ()안에 있는 변수를 출력하라는 의미이다. 내가 실행시키고자 하는 함수를 빠르게 테스트 해 볼 수 있다. let temp = 20 console.log(temp); temp = 'Harry' console.log(temp); 위의 코드를 분석해 보자. 1) let temp = 20 → temp라는 변수를 20 이라고 하자(let 함수) 2) console..

만약 화면에서 버튼을 클릭할 때마다 색깔을 바꾸거나, 박스를 감추는 등 웹 화면에 동적인 움직임을 주기 위해 사용하는 것이 Javascript(자바스크립트)다. Javascript(자바스크립트)는 프로그래밍 언어로, 웹 브라우저가 해석할 수 있는 언어이고, 짧게 줄여 JS 라고 표기한다. 아래의 예제를 통해 느낌을 보자. 날짜 내용 저장 위의 예제를 실행하면 위와 같이 나온다. 이제 안에 를 만들고(마지막줄에 넣자) 그 안에 아래 코드를 삽입해보자 (저장을 눌렀을 때 '저장되었습니다'라는 알람이 뜨게 할 거다) function save(){ alert('저장되었습니다'); } 여기서 코드를 넣습니다. 하지만 우리는 배우는 과정이므로, JS코드가 파일 앞에 있는게 눈에 잘 띄고, head에 넣어도 코드를 ..

부트스트랩 연습하기 스파르타코딩클럽 | 부트스트랩 연습하기 Card title that wraps to a new line This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. s3.us-west-2.amazonaws.com 수업시간에 진행했던 '메모장 만들기' 연습이다. 이걸 만드는 연습을 해보자 우리는 부트스트랩을 이용하여 위와 같은 형태의 웹페이지를 만들 것이다. 의 구조를 보면 이 과 가 감싸는 것을 볼 수 있다. select로 화면을 클릭해 보면 윗쪽 부분은 jumbotron이고, 아래쪽은 card-columns로 이루..