코딩하는 거북이

데이터 불러오기 변수, 상수, 배열, 객체에 데이터를 저장하는 법에 대해서 알아보았었는데, 이번에는 저장되어있는 데이터를 불러오는 방법들에 대해서 자세히 알아보겠습니다 ! 01. 변수 출력하기 변수를 불러오는 방법 { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 확인하기 100, 200, javascipt 02. 상수 출력하기 상수를 불러오는 방법 { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 결과 확인하기 100, 200, javascipt 03. 배열 출력하기 배열을 불러오는 방법 { const arr = [100, 200, "javascript"]; ..

합 구하는 함수 만들어보기 함수를 이용해서 시작값과 끝값을 사용자로부터 받아와 시작값부터 끝값까지의 합을 출력하는 함수를 만들어보도록 하겠습니다. 함수 만들기 function calculator(a,b){//calculator라는 이름의 함수와 매개변수(a, b) let sum = 0; for(let i=a; i

반응형 레이아웃 웹사이트의 레잉아웃을 만들 때, 방문자가 사용하는 모니터의 화면 해상도에 따라 레이아웃의 크기를 변경하게끔 하는 반응형 레이아웃에 대해서 알아보겠습니다. 레이아웃 틀 짜기 기본적으로 레이아웃의 틀을 flex 유형으로 만든 방법입니다. 반응형 추가하기 @media(max-width:1280px){ .container{ width: 96%; display: flex; flex-wrap: wrap; flex-direction: column; } .container1{ width: 33.3333%; height: 780px; } .container2{ width: 66.6666%; height: 390px; } .box{ width: 66.6666%; height: 390px; } } @medi..

Javascript 간단한 연습문제 문제 1. 주석의 출력값을 보고 빈칸을 채우시오. { const obj = [ {a:100, b:200}, {c:"javascript"} ]; console.log(________); console.log(________); console.log(________); //100 //200 //javascript (출력값입니다.) } 풀이1. obj는 배열안에 객체의 형식으로 저장된 데이터입니다. obj의 모든 요소를 순서대로 나타내면 다음과 같습니다. obj[0].a = 100 obj[0].b = 200 obj[1].c = javascript Tip ! 배열안에 객체가 들어있을 수도, 객체안에 배열이 들어있을 수도 있습니다. 잘 보세요 ! 문제2. 다음의 출력값을 보고 ..

테이블 만들기 HTML에서 만들 수 있는 테이블을 Javascript의 for문과 if문을 사용해서 어떻게 만들 수 있는지 한번 알아보도록 하겠습니다. HTML로 테이블 만들기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 HTML에서 테이블을 만드는 법은 위 사진과 같습니다. 한 개의 태그에 각각 태그 다섯 개를 넣어주고, 홀수는 파란색의 스타일태그를, 짝수는 빨간색의 스타일태그를 넣어주면 됩니다. Javascript For, If 문으로 테이블 만들기 let table = "" let num = 1; for(let i=1; i

Javascript 데이터 제어 if 문 if(0){ document.write("실행true") } else { document.write("실행False") } if문의 기본 형식입니다. Tip ! 조건문에 False가 나오는 값 : 0, null, undefined, false, ""(빈문자열) 이 다섯가지만 false가 출력됩니다. if문 생략 const num = 100; if(num == 100){ document.write("실행되었습니다.(True)"); } else { document.write("실행되었습니다.(False)") } if(num) document.write("실행되었습니다.(True)"); else document.write("실행되었습니다.(False)"); 위의 if문..

함수를 이용한 연습문제 연습문제 1 사용자가 prompt창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성하시오. 풀이 Tip ! 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt() 함수를 사용해 prompt창에 입력한 내용을 숫자로 변환합니다. (prompt 창에 입력한 내용이 숫자가 아니면 parseInt() 함수는 NaN을 반환합니다.) 반환값이 숫자일 경우에만 함수를 실행합니다. 풀이 function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 ..

레이아웃 grid 유형으로 만들기 grid 방식으로 만들기 grid layout은 비교적 직관적이어서 다른 레이아웃보다 사전지식이 덜 필요합니다. display : grid를 적용하여 만들고자 하는 레이아웃을 칸칸이 쪼개어 크기를 설정해주어 만들어주면 됩니다. 레이아웃 코드 해석하기 위의 레이아웃을 예로 들면 칸칸을 쪼개어 보았을 때, 세로로 4줄 가로로 2줄이 나오게 됩니다. grid-template-area : header header // nav nav // aside section // footer footer (// 줄 바꿈)의 형식으로 나누어준 칸의 영역에 들어갈 요소를 선택해줍니다. grid-template-columns : 400px 800px 두칸으로 설정해주고, grid-template..

레이아웃 flex 유형으로 만들기 flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것을 말합니다. 기본 틀 구성하기 기본 틀을 만들어 준 코드입니다. 기본 틀의 결과를 보면 위 처럼 나오는데 aside와 section을 나란히 정렬해주기 위해서, aside와 section이 포함되어 있는 전체를 감싸고 있는 wrap에게 display:flex; / flex-wrap:wrap;의 속성을 부여합니다. #wrap { width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; } 다음과 같이 속성을 부여하게 되면 맨 위의 완성본과 같은 모양이 되는 것을 확인할 ..

문자 관련 스타일 CSS에서 문자를 스타일링하는 다양한 방법이 있는데, 다음은 CSS에서 일반적으로 사용하는 문자 관련 스타일입니다. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. 단위는 ? px 해상도에 따라 상대적으로 달라지는 기본 단위 % 부모 요소의 글자 크기를 100%로 계산한 단위 em 부모 요소의 글자 크기를 100%로 계산한 100분의 1단위 rem 최상위 요소의 글자 크기를 100%로 계산한 100분의 1단위 vw,..

함수 (실행문) JavaScript에서 함수는 재사용 가능한 코드 블록입니다. 함수는 정의되어 호출될 때 실행됩니다. JavaScript에서 함수를 작성하려면 다음과 같은 구문을 사용합니다. 선언적 함수 function func(){ document.write("실행되었습니다.") } func(); 함수 실행의 기본 문법입니다. function 함수이름(함수의 매개변수){함수가 실행할 실행코드} 의 형식으로 작성합니다. 익명 함수 const func = function(){ document.write("실행되었습니다.") } func(); 변수 func를 만들어 함수를 저장해주어 실행이 가능합니다. 매개변수 함수 function func(str){ document.write(str); } func("실행..

Javascript에서 데이터를 저장에 대해서 알아보겠습니다 ! 데이터 저장 : 변수 데이터 저장하기 : 상수 데이터 저장하기 : 배열 데이터 저장하기 : 객체 이상으로 Javascript의 데이터 저장에 대해서 알아보았습니다 !

Javascript에서 사용하는 If문(조건문)에 대해서 알아보도록 하겠습니다 ! If문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나입니다. 조건문을 사용하면 프로그램이 특정 조건에 따라서 다른 동작을 하도록 할 수 있습니다. 조건문의 가장 기본적인 형태입니다. 조건식을 충족하면 화면에 '실행되었습니다.(true)'를 출력하고 조건식을 충족하지 못 하면 (else) '실행되었습니다.(False)'를 출력합니다. If문 생략 2~6번 라인과 8~9번 라인의 조건문은 같은 내용입니다. if문과 else문이 하나의 조건이라면 아래와 같이 중괄호를 생략하여 작성할 수 있습니다. 삼항연산자 (조건연산자) 마찬가지로 2~6번 라인의 조건문을 8번 조건문으로 한 줄에 표현한 것입니다. (조건식) ? 조건문을 ..

Css에 있는 Id선택자, Class선택자를 Type선택자와 함께 다른 선택자들에는 어떤 것들이 있는지 알아보겠습니다 ! CSS 선택자 전체 선택자 모든 HTML 요소를 선택합니다. (*) 요소 선택자 HTML 요소의 태그 이름을 기반으로 선택합니다. (tagname) 클래스 선택자 HTML 요소의 class 속성 값을 기반으로 선택합니다. (.classname) ID 선택자 HTML 요소의 id 속성 값을 기반으로 선택합니다. (#idname) 속성 선택자 HTML 요소의 속성 값을 기반으로 선택합니다. ([attribute] 또는 [attribute=value]) 자식 선택자 HTML 요소의 직계 자식 요소를 선택합니다. (parent > child) 자손 선택자 HTML 요소의 모든 하위 요소를 선..

Css 레이아웃을 만들 때, 정렬을 위한 방법 중 float 유형을 알아보겠습니다. 위 사진을 표본으로 레이아웃을 구성해 보겠습니다. 기본 틀 Float 사용 float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. 결과를 보시면 좌우로 나열된 것을 볼 수 있지만, footer가 사라진 것을 확인하실 수 있습니다. float을 사용한 다음 컨텐츠가 주변을 흐르게 되어 깨짐 현상이 나타나는 것인데 clear 속성을 이용해 float을 해제시켜주는 과정이 필요합니다. footer에 clear 속성을 추가해주니 깨지지 않고 원래 모양을 유지하며 결과가 출력되는 것을 보실 수 있습니다. clear..

반복문과 조건문을 이용한 연습문제 반복문과 조건문을 활용한 연습문제를 한번 풀어보도록 하겠습니다. 문제1. 주어진 배열에서 10보다 큰 숫자만 찾아 화면에 표시하시오. 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] See the Pen for, if 문 연습문제 by dlgnsrb227 (@dlgnsrb227) on CodePen. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // arr에 대한 배열 설정. for(let i=0; i 10){ // 배열의 i 번째가 10보다 작다는 조건문. document.write(arr[i] + ","); }; // arr의 i 번째 값 출력. }; Point 변수 i를 만들어 주었지만 원하는 결과..

반복문 반복문은 같은 동작을 여러 번 실행하기 위해 사용하는 문입니다. 반복문을 사용하면 불필요하게 여러 명령을 늘어놓지 않아도 명령을 반복 실핼할 수 있습니다. 소스 코드도 깔끔해지고 프로그램 실행도 빨라지기 때문에 많이 쓰입니다. For 문 Javascript에서 가장 많이 쓰이는 반복문입니다. For (초기값; 조건; 증가식) {.....} 위와 같은 형식으로 쓰며, 변수를 사용하여 초기값을 적어주고 초기값에서부터 시작하여 조건을 만족할 때 까지 반복합니다. 초기값 : 카운터 변수를 선언하고 초기화합니다. 초기값은 0이나 1부터 시작합니다. 조건 : 문장을 반복하기 위해 체크할 조건. 조건을 만족해야 for 문에 있는 명령을 반복합니다. 증가식 : 문장을 실행한 후 카운터 변수를 증가시키는 부분입니..

HTML의 문서 한 페이지에는 각각의 섹션이 나누어져 있는데, 어떤 것들이 있는지 알아보고 특징들을 살펴보도록 하겠습니다. 이미지 출처 Header 태그명 로 HTML 문서의 헤더 영역을 의미합니다. 주로 사이트의 이름(제목, 로고), 내비게이션, 헤드라인, 검색 등으로 구성됩니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있지만 , 태그는 포함 할 수 없습니다. Nav 태그명 로 목적지로 이동할 수 있도록 링크를 별도로 모아둔 영역입니다. 링크 중에서 중요도가 높은 링크를 체계적으로 구성해 놓은 것으로 단순 본문 링크인지 메뉴(카테고리) 성격의 링크인지 확인이 가능합니다. 텍스트, 인라인 요소, 블록 레벨 요소를 포함할 수 있습니다. Section 태그명 으로 맥락이 같은 요소들을 주제별로 ..

Javascript에는 많은 연산자가 있는데 어떤 것들이 있는지 한번 알아보도록 하겠습니다. 산술 연산자 연산의 기본이 되는 산술 연산자. 응용해서 여러 곳에서 쓰이기 때문에 꼭 알아두어야 합니다. 산술 연산자 종류 속성설명 + 더하기 연산을 할 때 사용 문자와 문자, 문자와 변수 등을 연결할 때 사용 - 빼기 연산을 할 때 사용 * 곱하기 연산을 할 때 사용 / 몫을 구 할 때 사용 % 나머지를 구할 때 사용 ++ 1씩 증가시킬 때 사용 -- 1씩 감소시킬 때 사용 대입 연산자 대입 연산자 "="는 "같다"의 의미가 아니라 변수에 대입(저장)을 의미합니다. 대입 연산자 종류 설명 = x = 1은 우변의 1값을 좌변의 x 변수에 대입(저장) 합니다. += x =+2 는 x = x + 2 와 같습니다. -..

See the Pen Tail Animation by dlgnsrb227 (@dlgnsrb227) on CodePen.

CSS의 선택자란 ? CSS에서 선택자란 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 사진을 보면 h1에 대한 속성값을 적어놓았는데, 여기서 표현할 대상이 되는 'h1'이 선택자가 되는 것입니다. 'h1'은 선택자, 'color'는 속성, 'red'는 속성값으로 봅니다. 선택자의 종류로는 type 선택자, id 선택자, class 선택자가 있습니다. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 사진을 보면 태그 자체를 선택자로 잡아 속성을 부여한 것을 확인 가능합니다. id 선택자 id로 HTML 요소에 이름을 붙이게 되면 따로 선택하여 속성을 부여할 수 있습니다. 각각의 요소에 각기 다른 유일한 이름을 부여해야 하며, 다른 요소에 같은 id명을..

CSS의 기본문법 CSS(Cascading Style Sheets)를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 실제로는 외부 스타일시트를 많이 사용하는 편이지만, 간단한 스타일은 내부 스타일시트만으로 사용할 수도 있습니다. 인라인 스타일시트의 경우 거의 사용하진 않지만, 가장 우선순위가 높아서 꼭 필요한 경우 편리하게 사용 가능합니다. 내부 스타일시트 CSS를 HTML 문서안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 이때 스타일은 .css 확장자를 가진 별도의 파일로 저장하고, HTML에서는 태그를 이용하여 선언합니다. 여러..

자료형이란 ? 자료형이란 프로그램에서 처리애햐 하는 자료의 형태를 뜻합니다. 자료의 형태는 여러개가 있는데 무엇이 있는지 알아보도록 하겠습니다. 위 그림과 같이 자료형의 유형으로는 원시유형 > 숫자형, 문자열, 논리형, 심벌, undefined, null 이 있습니다. 그럼 각각에 대해 알아보겠습니다. typeof() 함수 자료형에 대해 알아보기 전에 typeof()함수란, 소괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알 수 있는 자바스크립트에 미리 만들어져 있는 함수입니다. 각각의 자료형을 알아보며 typeof()함수에 넣었을 때 어떻게 표시되는지 같이 보도록 하겠습니다. 숫자형 (Number) 숫자형은 모든 프로그램에서 가장 기본이 되는 자료형으로 큰 따옴표 없이 그냥 입력하면 숫자로 인식합니다..

텍스트에 관련된 요소 텍스트에 관련된 기본적인 요소들에는 어떤 것이 있는지 알아보고, 어떠한 결과 값이 출력되는지 알아보겠습니다. 1. 기울임체 2. 굵은체 3. 형광펜 4. 굵은체 5. 작은글씨 6. 아래첨자 7. 위첨자 각각의 요소들을 사용하면 위 사진과 같은 결과가 출력됩니다. 이상으로 텍스트에 관련된 기본적인 요소들을 알아보았습니다 !

마크업(Markup) 이란 ? html 문서를 작성할 때 각각의 태그(Tag)를 이용해 요소(element)를 이루어 코딩한 것을 마크업(Markup) 이라고 합니다. 이런 마크업을 할 때 필수적으로 알고 있어야하는 시멘틱 마크업과 논리적인 순서에 따른 마크업 두 가지를 알아보도록 하겠습니다. 시멘틱 마크업 (Sementic markup) 시멘틱 마크업의 기본적인 정의부터 알아보면 시멘틱(sementic)의 사전적인 뜻은 '의미론적인' 이라는 의미를 가지고 있습니다. 결국 직역하자면 의미에 맞는 태그를 사용하라는 뜻입니다. 그렇다면 왜 시멘틱 마크업이 필요한지 알아보겠습니다. 의미를 포함하지 않은 마크업을 보여주는 사진입니다. 제목이라는 의미를 나타내는 태그를 사용하여 마크업 한 사진입니다. 위 두 사진..

블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 쉽게 해당 요소가 좌, 우 공간을 모두 차지하는 하나의 블록이라고 생각하시면 됩니다. 이미치 출처 위 그림과 같이 각 요소들이 좌우 공간을 모두 차지하는 형태이기 때문에 다음 요소를 마크업하게 되면 다음 줄에 출력되는 것을 볼 수 있습니다. 인라인 요소 (Inline Element) 인라인 요소는 블록 레벨 요소와 달리 해당 요소만큼만 공간을 차지합니다. 이미치 출처 위 그림과 같이 각 요소들이 해당되는 공간만을 차지하는 형태이기 때문에 다음 요소를 마크업하게 되면 같은 행에 출력되는 것을 볼 수 있습니다. 블록 레벨 요소와 인라인 요소의 특징 블록 레벨 요소와 인라인 요소의 구조를 간단하게 알아보았습니다. 그럼 이러한 구조로 인..