지노스_ZNOS

조건문은 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로 이루..

아래에다가 버튼을 넣을 겁니다 위의 예제를 실행시켜 보자 이제 ~사이에 아래에 다음 코드를 넣어보자 버튼입니다 그러면 다음과 같이 나온다 이 버튼은 아무런 디자인이 되어 있지 않은 버튼이다. 하지만 우리는 미리 디자인된 프레임워크를 가져다가 쓸 수 있다. 프레임워크는 코드의 '구조와 틀'정도로 우선 이해하면 될 것 같다. https://getbootstrap.com/docs/4.5/getting-started/introduction/ Introduction Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template..

CSS파일 분리하기 지금까지 CSS를 안에 부분이 매우 길어지면서 가독성이 떨어질 것이다. 이럴 땐 아래와 같이 파일을 분리해둘 수 있다 위와 같이 CSS파일을 따로 저장해둘 수 있다 공감 부탁 드려요 :)

구글 웹폰트 : https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 1) 마음에 드는 폰트를 클릭한다 2) [ + Select this style ]을 클릭한다 3) 우측 상단의 모음 아이콘을 클릭한다 4) Embed 탭을 클릭한다 5) link 태그를 복사해서 사이에, CSS를 복사해서 사이에 넣는다 Single Day이라는 폰트를 예제로 추가해보면, 아래와 같다 유노나띵 존스노우 아무것도 모르고 시작하는 코딩 ID: PW: 로그인하기 적용한 화면을 보면 아래와 같다 공감 부탁 드려요 :)

Margin은 그림의 바깥쪽 여백, Padding은 그림의 안쪽 여백을 의미한다. 유노나띵 존스노우 아무것도 모르고 시작하는 코딩 ID: PW: 로그인하기 위의 글을 메모장에 복사하여 .html로 저장해서 들어가보자 태그를 보면 "login-title" 클래스에 적용된 여러가지 스타일을 볼 수 있다. color: white; →글씨는 하양 width: 300px; →출력 사이즈 폭 300픽셀 height: 200px; →출력 사이즈 높이 200픽셀 background-image: url('https://i.imgur.com/CBNb9fM.gif'); →이미지 주소 background-position: center; →이미지 정렬 중앙 background-size: cover; →이미지 크기를 출력 사이즈..