티스토리

JDI's note
검색하기

블로그 홈

JDI's note

baro-baro.tistory.com/m

JDI_ 님의 블로그입니다.

구독자
0
방명록 방문하기

주요 글 목록

  • CSS 첫걸음 CSS는 Cascading Style Sheets의 약자다. casecade는 '작은 폭포, 폭포처럼 쏟아지는 물'이라는 뜻인데 폭포처럼 위에서부터 아래로 스타일을 적용시키는 것이다. css는 html 문서에 우리가 태그로 작성한 요소들에 접근해서 스타일을 적용할 수 있게 한다. 아래는 html의 p요소에 접근해 색깔, 너비, 테두리를 적용한 것이다. p { color: red; width: 500px; border : 1px solid black; } 이렇게 앞에 스타일을 적용하고 싶은 html 요소를 지정하고 {} 안에 원하는 스타일을 적으면 된다. 하지만 위처럼 적용하면 모든 p요소가 저런 스타일로 적용된다. 그래서 다양한 선택자를 통해 더 자세하게 html 요소를 지정할 수 있다. p{} /* .. 공감수 0 댓글수 0 2022. 7. 4.
  • HTML 첫걸음 HTML은 HyperText Markup Language의 약자로 HyperText는 웹 페이지를 다른 페이지로 연결하는 링크고, Markup Language는 태그 등을 이용해서 문서나 데이터의 구조를 명기하는 언어다. 대충 링크를 누르면 이 페이지, 저 페이지 이동할 수 있는데 그게 태그로 구조화된 것 같다. 그래서 어떨 때 사용할까? 웹 콘텐츠의 '의미'와 '구조'를 정의할 때 사용한다. html은 안에 원하는 요소를 적어서 문서를 구조화할 수 있는데 안에는 태그 외에도 필요한 속성을 적을 수 있다. 는 닫는 태그인데 경우에 따라 필요없는 경우도 있다. hello world! Mozilla Manifesto html은 이런 태그들을 이용해서 하이퍼링크도 만들고, 문서 구조도 만들고, 입력창, 버튼,.. 공감수 0 댓글수 0 2022. 7. 3.
  • 객체 1. 객체 객체는 관련된 데이터와 함수의 집합이다. 객체 안에 있는 데이터는 프로퍼티, 함수는 메서드라고 부른다. 객체의 프로퍼티는 key를 통해서 쉽게 찾을 수 있다. 자바스크립트에서 객체를 만드는 것은 변수를 만드는 것과 비슷하다. var person = {}; 객체에 프로퍼티와 메서드를 넣어보자 const person = { name: ['Bob', 'Smith'], age: 25, gender: 'male', interests: ['music', 'programming'], bio: function() { alert(this.name[0] + ' ' + this.name[1] + ' is ; this.age + ' years old. He likes ' + this.interests[0] + ' .. 공감수 0 댓글수 0 2022. 6. 30.
  • 화살표 함수 기본 화살표 함수는 함수 표현식을 더 간단하게 쓰는 방법으로 문법의 생김새 때문에 이런 이름이 붙여졌다. let func = (매개변수1, 매개변수2...) => {함수 내용}; 위의 화살표 함수는 아래의 함수 표현식과 같다. let func = function(매개변수1, 매개변수2...){ 함수내용 }; 매개변수가 하나도 없을 때는 괄호를 비워놓으면 되는데, 이 때 괄호를 생략해서는 안된다. let sayHi = () => alert("HI!!"); sayHi(); 참고 : https://ko.javascript.info/arrow-functions-basics 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arr.. 공감수 0 댓글수 0 2022. 6. 30.
  • 함수(함수 선언, 함수 표현식, 재귀함수) 프로그래밍의 함수는 수학의 함수와 비슷한 것 같지만 좀 다르다 수학에서의 함수는 하나의 값에 하나의 결과가 나오지만 프로그래밍에서는 함수에 반환값이 없을 수도 있고, 하나의 값을 넣고 여러 개의 결과를 얻을 수도 있기 때문이다. 일단 찾아본 함수의 정의는 이렇다. "함수, 서브루틴, 루틴, 메서드, 프로시져는 소프트웨어에서 특정 동작을 수행하는 일정 코드 부분을 의미한다."-(위키) "함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다."-(MDN) "함수란 자신의 외부(재귀 함수의 경우 스스로) 코드가 '호출'할 수 있는 하위 프로그램입니다. 프로그램과 마찬가지로, 함수 역시 명령문의 시퀀스로 구성된 함수 본문을 가집니다. 함수에 값을 '전달'하면, 함수는 값을 '반환'할 것.. 공감수 0 댓글수 0 2022. 6. 29.
  • 반복문 (break, continue 레이블) 1. break 반복문이 완료되기 전에 종료하고 싶을 때 사용한다. switch 조건문에서 본적 있다. for(i = 0; i < a.length; i++) { if (a[i] == theValue) { break; } } 2. continue break와 비슷하게 동작하지만, 반복문을 완전히 탈출하는게 아니라 반복문의 다음 반복문으로 건너뛸 때 사용한다. i = 0; n = 0; while(i < 5){ i++; if(i == 3){ continue; } n += i; } 3. label label은 프로그램에서 다른 곳으로 참조할 수 있도록 식별자로 문을 제공하는 것이다. 쉽게 이름표를 붙인다고 생각하면 좋을 것 같다. 아래와 같은 방식으로 이름을 붙인다. label : statement 예시 mar.. 공감수 0 댓글수 0 2022. 6. 29.
  • 반복문 (for, while, do-while) 반복문은 이름에서 알 수 있듯 똑같은 명령을 반복하기 위해서 쓴다. 반복을 하는데 이런게 필요한 것 같다. 1. 반복할 내용 2. 얼마나 반복할지 (선택) 얼마나 반복할 것인지 어떻게 정할 수 있을까? 원하는만큼 반복하려면 반복의 횟수를 알 수 있어야한다. 그러려면 그 횟수를 저장할 수 있는 변수가 필요하다. 1. 초기값 : 반복을 정하는 변수를 설정한다 2. 조건 : 반복할 횟수를 설정한다 3. 증감률 : 한 번 반복할 때 얼마나 횟수를 늘릴지 정한다 (반복할 내용을 실행한 다음에 실행한다) 위 요소들은 생략할 수 있는데, 증감률을 생략하면 조건이 참일 경우 무한히 반복하게된다. 모든 요소를 생략하게되면 무한히 반복하게 된다. 반복문을 쓰는데는 for, while, do-while, for-in, fo.. 공감수 0 댓글수 0 2022. 6. 29.
  • nullish 병합 연산자 ?? 여러 피연산자 중에 '값이 확정되어있는 변수'를 찾기 위해 나왔다. a ?? b 를 평가한다고 할 때 a가 null 이나 undefined가 아니면 a를 a가 null 이나 undefined라면 b를 반환한다. const foo = null ?? 'default string'; console.log(foo); // 'default string' 이 반환된다. const baz = 0 ?? 42; console.log(baz); // 0은 null이나 undefined가 아니라서 바로 0이 반환된다. ?? 는 || 와 비슷하지만 차이가 있다. 변수에 활용할 때 ||는 첫번째 참인 값을 반환하지만 ??는 첫번째 정의된 값을 반환한다. height를 따로 정의하지 않으면 100이 할당되지만 height = h.. 공감수 0 댓글수 0 2022. 6. 28.
  • 논리 연산자 논리 연산 : 참, 거짓 두 가지 원소만 존재하는 집합에서의 연산이다. (위키) 자바스크립트는 3개의 논리 연산자를 가지고 있다. || : or && : and ! : not 1. || (or) 연산자 피연산자가 하나라도 true면 true를 반환하고, 모두 false일 때만 false를 반환한다. 즉 하나라도 true면 true다. 그렇기 때문에 첫번째 피연산자가 true면 그 뒤의 연산은 하지 않는다 (true가 반환된다) result = value1 || value2; result2 = value1 || value2 || value3; 2. && (and) 연산자 피연산자가 모두 true 일 때만 true를 반환하고, 하나라도 false가 있으면 false를 반환한다. 즉 하나라도 false면 fa.. 공감수 0 댓글수 0 2022. 6. 28.
  • 조건문 (switch-case) 조건문에서 필요한건 아래의 것들이다. 1. 조건 2. 조건이 맞을 때 실행될 내용 3. 조건이 맞지 않을 때 실행될 내용(선택) 같은 조건문인 switch문도 비슷하다. if 문에서는 조건이 참이냐 거짓이냐에 따라 내용이 실행되는게 기본이었는데 switch 문은 특정 변수가 특정한 값을 만족하면 내용을 실행하는 것이다. 즉 변수가 case의 값을 만족하는 것이 switch문의 기본적인 조건이되고, 이것이 참이면 내용이 실행된다. 크게 보면 if와 다르지 않다. 조건(변수가 특정 값일 때)이 맞을 때 실행될 내용을 적고, 그렇지 않을 때 실행될 내용(case나 default)을 적는 것이기 때문이다. 그래서 대부분의 if문은 switch문으로, switch문은 if 문으로 바꿔쓸 수 있다. 다만 상황에 따.. 공감수 0 댓글수 0 2022. 6. 28.
  • 조건문(if-else if-else) 조건문이란 뭘까? 조건문의 정의를 알아보면 조건문 : 어떤 조건이 주어질 때 어떤 동작을 수행하도록 하는, 즉 조건에 따라 실행이 달라지게 할 때 사용되는 문장이다. (위키백과) 즉 (주어진 조건) 상황에 맞게 알맞은 동작(실행)을 하게 하는 게 조건문이다. 이런 게 필요할 것 같다. 1. 조건 2. 조건일 때 실행될 내용 3. 조건이 아닐 때 실행될 내용 (선택사항) 자바스크립트에서는 if와 else if, else로 조건문을 사용한다. switch문도 사용하는데 일단은 if문만 알아보면 이렇다. if에 조건과 조건이 맞을 때 실행할 내용을 적는다. else에 if의 조건이 맞지 않을 때 실행할 내용을 적는다. else if에는 if의 조건이 맞지 않을 때 쓸 다른 조건과 내용을 적는다. (개수 제한 .. 공감수 0 댓글수 0 2022. 6. 27.
  • 비교 연산자 1. 비교 연산자 값을 비교할 때 쓰고, 참 거짓 중 하나를 반환한다. >,=, 1 ); //true alert( 1 = 5 ); //false alert( 3 'A'); // true alert( 'Glow' > 'Glee'); //true alert( 'Bee' > 'Be'); //true alert( 'B' 1 ); //true alert( '01' == 1); // true 4. 일치 연산자 동등 연산자 == 는 0과 false를 구분하지 못한다. 구분하려면 일치 연산자 =.. 공감수 0 댓글수 0 2022. 6. 27.
  • 기본 연산자와 수학 1. 수학 연산자 일반적으로 배웠던 수학 기호와 비슷하다 + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈 % : 나머지 ** : 거듭제곱 alert( 1 + 2 ); // 3 alert( 2 - 1 ); // 1 alert( 2 * 3 ); // 6 alert( 6 / 2 ); // 3 alert( 5 % 3 ); // 2 , 5를 3으로 나눈 나머지다 alert( 2 * 3 ); // 8, 2의 3제곱이다 그리고 자바스크립트는 다른 언어와 다르게 숫자와 문자끼리의 연산도 가능하다 alert( '1' + 2 ); // 3 alert( 5 - '2' ); // 3 alert ( 3 * '4' ); // 12 alert ( '8' / 2 ); // 4 2. 복합 할당 연산자 += : 오른쪽 수를 더한 다.. 공감수 0 댓글수 0 2022. 6. 27.
  • 형변환 자바스크립트에서 함수랑 연산자에 전달되는 값은 대부분 자동으로 적절한 자료형으로 변환된다. 이렇게 자료형이 바뀌는 것을 '형변환'이라고 한다. 1. 문자형으로 형변환 형변환 하고 싶은 것을 String()으로 감싼다. let value = true; //변수 value에 boolean인 true를 할당한다 value = String(value); //변수 value에 문자열 "true"가 저장된다. 2. 숫사형으로 형변환 형변환 하고 싶은 것을 Number()로 감싼다. let str = "1234"; //변수 str에 문자열 "1234"를 저장한다 let num = Number(str); //문자열 "1234"가 숫자 1234로 변환되어 변수 num에 저장된다 undefined는 NaN null은 0 .. 공감수 0 댓글수 0 2022. 6. 26.
  • alert, prompt, confirm 1. alert 사용자가 '확인' 버튼을 누를 때까지 메시지를 계속 보여주는 창을 띄운다. alert("hello"); 2. prompt 뜻: a sign on a computer screen that shows that the computer is ready to receive your instructions 사용자에게 값을 입력받는데 사용한다. 사용자에게 보여줄 문자열, 입력 필드의 초기값을 받는다. result = prompt(title, [default]); //기초값인 default는 써도되고 안써도 된다. result = prompt('how old are you?', 25); //초기값이 25로 세팅됨 result = prompt('how old are you?'); //초기값 없음 3. c.. 공감수 0 댓글수 0 2022. 6. 26.
  • 자바스크립트란 html, css로 만든 페이지를 동적으로 만들기 위해 쓴다. node.js 등으로 웹 바깥에서도 쓸 수 있게 되었다. 원하는 데이터를 정확히 골라서 내가 원하는 방식으로 가공할 수 있는 것, 그리고 내가 구현한 기능을 원하는 요소에 연결하는 것이 중요한 것 같다. html에서 구조를 짜고, 그 구조에 잘 접근해서 css로 꾸미고, 자바스크립트로 동작을 추가하는 것 같다. 공감수 0 댓글수 0 2022. 6. 26.
  • 자료형 자료형은 데이터의 종류다. 자바스크립트에는 8개의 기본 자료형이 있다. 1. 숫자형(number) 우리가 흔히 아는 숫자다. 다른 언어와 다르게 정수, 소수 구분하지 않는다. 이 외에 Infinity, -Infinity, NaN 같은 특수 숫자 값도 포함된다 let n = 123; //변수 n에 숫자 123 할당 n = 123.456; //n에 123.456을 재할당 2. bigint 자바스크립트는 내부 표현 방식 상 (25^53-1) 보다 큰 값이나 -(25^53-1)보다 작은 정수를 '숫자형'으로 나타낼 수 없는데, 이보다 더 크거나 작은 수를 표현할 때 쓴다. 입력한 정수 값 끝에 n을 붙여서 쓴다. cosnt bigInt = 1234567890123456789012345678901234567890.. 공감수 0 댓글수 0 2022. 6. 26.
  • 변수와 상수 1. 변수 변수는 다양한 종류의 값을 담는 컨테이너에 이름을 붙인 것이다. 변수는 데이터를 저장할 때 쓰는 '이름이 붙은 저장소'다. 변수는 let과 var를 사용해 만들 수 있다. (let을 쓰는 것을 권장한다) 변수는 선언, 초기화, 할당 단계를 가진다 선언은 변수를 생성하는 것이고 초기화는 생성한 변수를 0이나 undefine 같은 값으로 설정하는 것이고 할당은 그 변수에 값을 저장하는 것이다. var age; //age 변수 선언, 자동으로 undefined로 초기화된다 let name; //name 변수 선언, 자동으로 초기화가 이루어지지 않는다 var age = 25; //age변수에 숫자 25를 할당 let name = 'baro'; //name변수에 문자열 baro 할당 2. 상수 상수는 .. 공감수 0 댓글수 0 2022. 6. 26.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.