jongyung

함수function에 대해서 알아보려고 합니다. 함수를 어떻게 사용하는 지를 예제로 들면서 설명하겠습니다. 함수를 변수, 매개변수, 배열, 객체, 객체생성자를 함께 써서 사용하고 프로토타입 함수를 예제로 들겠습니다. 1. 함수 유형 : 함수와 매개변수를 이용한 형태 매개변수를 이용해서 쓴 함수입니다. 매개변수를 지정해줘서 값을 출력할 때 불러주면 되는, 간단하지만 적을 게 많은 식입니다. function func(num, str1, str2){ document.write(num +". "+ str1 + "가 " + str2 + "되었습니다."," "); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "리액트", "실행"); // 1. 함수가..

1. 변수 변수 안에 저장된 데이터를 불러올 수가 있습니다. 예제로 설명하겠습니다. let x = 100, y = 200, z = "javascript"; console.log(x, y, z); // 100200javascript let으로 변수를 정해주고, 콘솔로 불러오면 됩니다. 2. 상수 상수 안에 저장된 데이터를 불러올 수가 있습니다. 예제로 설명하겠습니다. const x = 100, y = 200, z = "javascript"; console.log(x, y, z); // 100200javascript const로 변수를 정해주고, 콘솔로 불러오면 됩니다. 3. 배열 변수안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200, "javascript"]; conso..

1. if문 if문은 주어진 조건이 참이면 특정 코드 블록을 실행하고, 거짓이면 실행하지 않습니다. 참인 조건은 많지만, 거짓인 조건은 다섯 가지가 있습니다. 따라서, 그 다섯 가지의 조건만 외우면 참과 거짓을 구별해서 쓸 수가 있습니다. 거짓의 조건은 false, null, undefined, 0, "" 입니다. 차례 대로, 거짓, 제로의, 정의되지 않은, 숫자 0, 빈 문자열 을 뜻합니다. if문의 형태는 다음과 같습니다. // false : 0, null, undefined, false, ""(빈 문자열) // true : 1, 2, "0", "1", "abc", [ ], { }, true if(조건식) { document.write("실행되었습니다.(true)"); } else { document..

01. 다음의 출력값을 보고 빈칸을 채우시오 { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 변수가 주어져 있고, 그 값을 불러오는 과정입니다. x는 100, y는 200, z는 javascript의 값이기 때문에, 출력값이 각 100, 200, 300이 나오려면, 빈 칸에 들어갈 답은 x, y, x+y 입니다. 04. 다음의 출력값을 보고 빈칸을 채우시오 { const arr = ________(); arr[0] = 100; arr[1] = 200; arr[2] = "javascript"; console.log(arr[0]); conso..

1. for in문 for in문은 자릿수 값 즉, 인덱스 값이 나옵니다. 객체(키와 값) 때문에 만들졌기 때문에 객체에 사용할 수 있습니다. 객체의 key값과 value 값을 뽑아내는데 유용합니다. 객체의 키값의 갯수만큼 반복하여 첫 번 째 키값부터 마지막 키값까지 반복합니다. const arr = [100,200,300,400,500]; for(let i in arr) { document.write(arr[i]); } //100200300400500 이 나옴 식은 어렵지 않습니다. 배열 array의 약자 arr로 이름을 정하고, i의 값을 구한다고 쓰면 됩니다. i는 배열 안의 데이터 값이기 때문에 대괄호 안에 넣어서 써주면 됩니다. 2. for of문 for of문을 써서 배열에서 데이터를 불러올 ..

배열 안의 데이터를 불러오는 방법입니다. for문과 forEach문을 써서 점점 더 간략하게 쓰는 표현 방법들에 대해서 알아보려고 합니다. 1. for문 const num = [100, 200, 300, 400, 500]; document.write(num[0]); document.write(num[1]); document.write(num[2]); document.write(num[3]); document.write(num[4]); // 100200300400500 이 나옵니다. 기본적인 배열에서 데이터를 불러오는 방법입니다. 반복적으로 불러와야 하기 때문에 번거롭습니다. for문을 써서 좀 더 간략하게 써보겠습니다. const num = [100, 200, 300, 400, 500]; for(let ..

1. 화살표 함수 : 선언적 함수 화살표 함수는 함수를 선언하는 새로운 방식 중 하나입니다. 함수를 더 간결하게 표현할 수 있으며, 코드의 가독성을 높여줍니다. func = ( ) => { document.write("실행되었습니다 "); } func( ); // 실행되었습니다 2. 화살표 함수 : 익명 함수 화살표 함수를 사용하면 기존의 함수 선언 방식에 비해 코드 길이가 짧아지는 장점이 있습니다. const func = ( ) => { document.write("실행되었습니다 "); } func( ); // 실행되었습니다 3. 화살표 함수 : 매개변수 함수 화살표 함수에서는 함수 이름 대신 화살표를 사용하여 함수를 선언합니다. 매개 변수가 하나인 경우 괄호를 생략할 수 있으며, 함수 내부에서 한 줄..

02. grid layout grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. 일단 원하는 레이이웃을 먼저 스케치라고 그것을 위해 필요한 속성을 추가하는 방식으로 설명해보겠습니다. 네 개짜리 박스를 마크업합니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. .wrap ( display: grid; ) 가로로 2칸 세로로 3칸 이므로 grid-template-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows 에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrap ( display: grid; grid-template-columns: 30% 70%; gri..

01. flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위의 구문은 해당 요소에 flex로 레이아웃을 설계하고 선언한다는 뜻입니다. flex 지금은 float 세 개의 요소를 가로로 나열할 수 있습니다. flex로 구현한다면 다음과 같이 표현합니다. flex: 1; flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다. 지금은 1 1 auto와도 같습니다. 또 1 1 100px과도 같습니다. 앞이 1이면 뒤가 뭐든 같은데, 이 세 값은 flex-grow, fl..

1.마무리 문제 1 사용자가 프롬트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창을 보여 주는 프로그램을 작성해 보겠습니다. See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. 숫자를 받아서 양수, 음수, 0을 판단하고 알침 창에 표시하는 함수를 선언합니다.parseInt( ) 함수를 사용해 프롬츠 창에 입력한 내용을 숫자로 변환합니다. 프롬트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수는 NaN을 반환합니다.반환값이 숫자일 경우에만 함수를 실행합니다. 2. 마무리 문제 2 2개의 숫자를 입력받아 두 수의 최대공약수를 구하는 함수를 작성하고 테스트해..

1. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, Sans-serif ; 2. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표..

01. if문 if 문은 주어진 조건이 참(true)이면 특정 코드 블록을 실행하고, 조건이 거짓(false)이면 실행하지 않습니다. // false : 0, null, undefined, false, ""(빈 문자열) // true : 1, 2, "0", "1", "abc", [ ], { }, true if(조건식) { document.write("실행되었습니다.(true)"); } else { document.write("실행되었습니다.(false)"); } // 실행되었습니다.(true) 나 // 실행되었습니다.(false)의 결과가 나온다. 02. if문 생략 if문을 생략해서 쓸 수 있습니다. const num = 100; if(num) { document.write("실행되었습니다.(true)..

01. 선언적 함수 선언적 함수는 함수를 선언하는 방식으로 함수를 선언할 때 함수 이름과 매개변수, 반환 값 등을 명시해주는 것입니다. 이 방식으로 함수를 선언하면, 함수가 호출되기 이전에 미리 함수가 메모리에 할당되어 있기 때문에, 함수를 호출하기 전에도 함수를 사용할 수 있습니다. function func( ){ document.write("실행되었습니다! "); } func( ); // 실행되었습니다! 02. 익명 함수 익명 함수란, 함수 이름을 지정하지 않고 함수를 선언하는 방식입니다. 변수에 함수를 할당하거나 함수의 매개변수로 함수를 전달할 때 사용됩니다. 이 방식으로 함수를 선언하면, 함수가 호출되기 이전에는 함수가 메모리에 할당되어 있지 않기 때문에 함수를 호출하기 전에는 함수를 사용할 수 ..

01. 변수 : 데이터 저장 변수는 데이터를 저장하는 장소입니다. var x = 100; //변수 x에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); 결과: 100 200 javascript 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장 할 수도 있지만 변경도 가능합니다. let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.log(y); conso..

선택자란 CSS로 UI의 표현할 대상이 되는 부분입니다. 지난 번에 게시한 ID 와 CLASS 의 차이점을 알아보는 게시글에서 밝혔 듯이, CSS로 속성을 부여하는 형식은 위와 같습니다. ID와 CLASS외에도 다른 선택자들이 있기 때문에 이번 게시글에서는 ID와 CLASS를 포함한 14가의 선택자에 대해서 알아보려고 합니다. 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. p태그 안의 글자들을 파란색으로 표시하는 속성을 부여해주는 예제로 설명하겠습니다. ~ ~ 머리가 좋아지는 음식 결과로는 머리가 좋아지는 음식 이 나옵니다. 2. id 선택자 html 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다.유일한 이름을 붙여야 하고, c..

block 요소는 원래 세로로만 나열되지만, float을 이용해서 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위해서 필수적입니다. float을 지정하는 법과 해제하는 법을 알아보려고 합니다. float float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 배치할 때 씁니다. float 한 박스에 가로 사이즈를 지정해 주면 크로스브라우징 됩니다. heading 요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. float의 형식은 "float: left;" 이런 모습입니다. 여기서 left는 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변에 흐르도록 한다는 의미이고, right를..

마무리 문제 1 10보다 큰 숫자 찾기 배열 [1,3,5,7,9,11,13,15,17,19]에서 10보다 큰 숫자들을 찾는 법입니다. 주어진 배열 안의 숫자들을 i로 정하고, 그 값이 10보다 크면 "숫자,"의 형태로 출력한다는 식을 썼습니다. i의 초깃값은 0으로, arr.length 라는 조건식을 써서 배열 값의 갯수를 for문의 범위로 정했습니다. if문을 써서 배열 안의 값이 10보다 크면 출력한다는 식을 써서 마무리 했습니다. See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. 마무리 문제 2 주어진 수에서 짝수만 더하기 입력하는 숫자가 짝수일 경우에 더하는 식을 만들었습니다. 짝수이면 결과에 나오면서, "숫자 ----- 숫자"의 ..

반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실행할 수 있습니다. 그 중에서 for 문, forEach 문, for in 문 그리고 for of 문에 대해서 알아보려고 합니다. for 문 자바스크립트에서 가장 많이 사용하는 반복문입니다. 기본형은, for (초깃값; 조건; 증가식) {...} 입니다. 초깃값은 0이나 1부터 시작합니다. 몇 번을 반복할지 지정하기 위해서 카운터 변수를 사용하는데 이 항목에서 카운터 변수를 선언합니다. 조건은 문장을 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시틸 때 사용합니다. 증가식은 문장 실행한 후 카운터 변수를 증가시키는 부분입니다. 보통 카운터 값을 하나 더 증가시키는 용도로 사용합니다. 실행 순서가 헷갈..

태그는 문서의 최상단 요소를 나타냅니다. 태그는 문서 정보에 해당하는 내용을 설정합니다. 태그는 문서 본문에 해당하는 내용을 설정합니다. 태그는 문서의 기본 URL을 설정합니다. 태그는 문서의 외부 리소스를 설정합니다. 태그는 문서의 메타 정보를 설정합니다. 태그는 문서의 스타일 정보를 설정합니다. 태그는 문서의 제목을 설정합니다.

태그는 문서의 주요 콘텐츠 영역을 설정합니다. 주요 콘텐츠 영역은 문서의 핵심 주제나 앱의 핵심 기능에 직접적으로 연결됐거나 확장하는 콘텐츠로 이루어집니다. 속성 없이는 문서에 하나보다 많은 요소가 존재하면 안됩니다. main 요소의 컨텐츠는 문서의 유일한 내용이어야 합니다. 요소 개요에 영향을 주지 않고, body 등의 요소나 h2와 같은 제목 요소와 달리 페이지의 개념적 구조를 바꾸지 않으며 온전히 정보를 제공합니다. 태그는 주제별 그룹의 콘텐츠 섹션을 설정합니다. HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용합니다. 보통 은 제목을 포함하지만, 항상 그런 것은 아닙니다. 이 요소는 전역 특성만 포함합니다. 각각의 을 식별할 수단이 필요합니다. 주로 제목(-)..

자바스크립트의 4가지 연산자 산술 연산자 산술 연산자는 7가지의 종류가 있습니다. + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. 산술 연산자 중 '+' 연산자는 '+'를 기준으로 좌변과 우변에 숫자가 아닌 문자나 변수 등이 오면 더하기 연산이 아닌 연결 연산을 합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구 할 때 사용합니다. % 나머지를 구할 때 사용합니다. '반복적인 숫자 구간의 패턴', 조건문을 이용한 '짝,홀수 판단, 배수 판단' 등의 식을 만드는데 사용합니다. ++,-- 1씩 증가시킬 때 사용하고,1씩 감소시킬 때 사용합니다. ++, -- 연산자는 변수의 값을 1씩 증가 시키거나 감소시키는데 사용하는 연..

선택자(selector)란? 선택자란 CSS로 UI의 어느 부분을 디자인 할 부분, 즉 표현할 대상입니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 요소를 선택하는 방법, 즉 선택자의 종류로는 type 선택자, id 선택자, class 선택자 등 여러 가지가 있습니다. 그 중에서 ID 선택자와 CLASS 선택자의 차이점에 대해서 알아보려고 합니다. ID 선택자 HTML 문서의 요소 중 같은 요소도 각기 다른 이름을 지정해서 따로 속성을 부여할 수가 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, 다른 요소에 같은 id 명을 또 주면 안됩니다. 아이디명 또한 태그와 겹치면 안됩니다. CSS에서는 id 선택자 앞에 #를 붙여야 합니다. id명이나 class명은 숫..

See the Pen Untitled by choeunkyoung (@choeunkyoung) on CodePen. codepen 사이트를 통해서 움직이는 애니메이션을 만들 수 있습니다.

CSS 기본 문법 CSS(Cascading Style Sheet)를 정의하는 방법으로는, 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이 때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용해서 선언합니다. 내부 스타일시트는 그 스타일이 기술된 페이지에만 적용되지만, 외부 스타일시트는 그 스타일을 선언한 모든 HTML 페이지에 적용됩니다. @import CSS 안으로 다른 CSS 파일을 불러들일 경우에 사용합니다. 맨 윗 줄에 기술..

자료형이란? 컴퓨터는 숫자와 문자의 구분을 자체적으로 할 수 없기 때문에 구분을 해서 입력해주어야 합니다. 숫자나 문자열처럼 프로그램에서 처리할 유형을 지정해야 하는데, 이 형태를 '자료형'이라고 합니다. 자료형은 '데이터 유형' 혹은 '데이터 타입' 이라고도 합니다. 자료형은 크게 '원시 유형(private type)'과 '객체(object)'로 나뉘어 집니다. 원시 유형은 하나의 값만 저장하는 자료형으로, 숫자형과 문자열, 논리형, undefined, null, symbol 유형이 있습니다. 원시 유형 외에는 모두 객체 입니다. 숫자형 모든 프로그램의 가장 기본이 되는 자료형입니다. C나 자바 같은 프로그래밍 언어에서는 정수와 실수를 명확히 구별하고, 정수도 크기에 따라 다른 자료형을 사용합니다. 하..

텍스트와 관련된 태그들 See the Pen 연산자 by choeunkyoung (@choeunkyoung) on CodePen.

마크업(markup) 마크업이란, ,, 등과 같이 명령어의 형태가 각 괄호로 되어있는 태그의 시작과 종료 즉, 와 의 형태인 요소들로 코딩을 한 것입니다. 마크업을 할 때 지켜야 하는 기본 문법 규칙이 있습니다. 1. 요소는 시작 태그와 종료 태그가 있어야 합니다. 예시: 요소는 시작 태그와 종료 태그가 있어야 한다. 2. 요소는 제대로 중첩되어야 합니다. 예시: 중첩된 요소가 있을 때는 바르게 표현해야 한다. 3. img 태그에는 alt 속성이 있어야 합니다. 예시: 4. 권장하는 사항도 있습니다. 예시1: 태그나 속성은 소문자로 마크업 하는 것을 권장한다. 예시2: 속성의 값에는 따옴표 처리를 권장한다. 5. 주석처리 방법 주석 내용은 설명문이기 떄문에 브라우저 화면에 출력되지 않게 합니다. 예시: ..

블록 레벨 요소(Block-level Element) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. 블록 레벨 요소의 태그들: 제목 ~: 1. HTML 문서에서 제목 (heading)을 정의할 때 사용하는 태그. 2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다. 3. 스크린 리터(음석낭독프로그램)에서는 제목의 수준으로 바로 이동할 수 있기 때문에 번호순으로 정의하는 것이 좋다. 문단 : 1. HTML 문서에서 단락 (paragraph)을 정의할 때 사용하는 태그. 2. 텍스트와 인라인 요소를 포함할 수 있지만 블록 레벨 요소는 포함할 수 없다. 3. 텍스트의 행을 바꾸려면 태그를 사용한다. 인라인 요소..