Leeyanggoo

grid란? gird는 다른 레이아웃 속성보다 비교적 직관적인 속성입니다. gird layout은 행과 열로 구성되는 표를 생각하면 쉽게 이해할 수 있습니다. grid를 이용한 Holy Grail layout를 구성하는 예시로 설명해 보겠습니다. Holy Grail은 성배라는 뜻입니다. 많은 사람들이 성배를 찾기 위해서 노력했지만 찾지 못한 것처럼 많은 사람들이 아래와 같은 레이아웃을 만들기 위해서 노력했지만 완벽한 방법을 찾지 못했습니다. 이것에 비유해서 이런 레이아웃을 성배 레이아웃이라고 부르곤 합니다. 위의 Holy Grail layout을 행과 열로 나눈다면 다음과 같이 총 9칸의 표라고 생각할 수 있습니다. gird layout은 각각의 요소들에게 "gird-area"라는 속성을 부여해 공간을 ..

flex란? flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 방식입니다. flex의 선언과 속성은 다음과 같습니다. dispaly: flex;//flex 선언 flex: 1; = flex: 1 1 0; = flex-grow: 1; flex-shrink: 1; flex-basis: 0; /* (flex: 숫자)는 위의 값이 축약되어 있다.*/ /* flex-grow는 생략이 불가능하며, 나머지는 가능하다. */ flex의 다양한 속성 먼저 flex의 다양한 속성에 대해 나열하고 예시를 통해 하나씩 알아가도록 하겠습니다. flex-grow 자식 요소가 적거나 그 크기가 작아 공간이 남을 때 항목의 크기를 늘려 ..

마무리 문제 1. 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여주는 프로그램을 작성해 보세요. 길라잡이 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. paserInt() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다.(프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt() 함수는 NaN을 반환합니다) 반환값이 숫자일 경우에만 함수를 실행합니다. //내가 쓴 코드 function judge(n){ if(n !== NaN){ if(n === 0){ alert("0은 좀.."); } else if(n > 0){ alert("양수요"); } else if..

01. if문 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나로, 조건에 따라 다른 코드를 실행할 수 있도록 해줍니다. 자바스크립트에서는 if문, switch문, 삼항 연산자 등을 사용하여 조건문을 구현할 수 있습니다. if(조건식){ document.write("실행되었습니다.(true)"); } else { document.write("실행되었습니다.(false)"); } 결과 확인하기 조건식 = 0, null, undefined, false, " "(빈 문자열) = flase 조건식 = 1, '0', '1', 'ABC', true, [], {} = true 0, null, undefined, false, " "(빈 문자열)의 5가지 경우는 false의 조건이다. 0을 제외한 숫자, 문자열, 배열..

함수function란? 자바스크립트로 작성한 프로그램은 작성한 소스에 따라 많은 명령을 순서대로 하나씩 처리합니다. 이때 프로그래머가 기능별로 다양한 명령을 묶어놓은 것을 '함수'라고 합니다. 즉 자바스크립트에서 함수는 일련의 작업을 수행하거나 값을 계산하는 코드 블록입니다. 함수는 프로그램의 여러 부분에서 재사용 가능한 코드를 작성할 수 있도록 해줍니다. 선언적 함수 선언적 함수의 형식과 호출 함수명(); function 함수명(){ 실행문;//console.log() //document.write } 함수명();//선언적 함수는 함수를 호출할 때 앞 또는 뒤에서 호출 가능합니다. 선언적 함수는 'function'이라는 예약어로 함수명을 명시하고, 함수 내용을 중괄호({ })로 감싸는 방식입니다. 이렇..

선택자Selector CSS의 선택자는 스타일을 적용할 HTML 요소를 선택하여 디자인할 때 사용합니다. 이 예문은 p 요소 안의 텍스트는 빨간색으로 지정하고, 내부 여백을 5px을 준다는 의미를 담고 있습니다. 중괄호({ }) 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 '세미 콜론(;)'으로 구분합니다. 타입 선택자type selector See the Pen CSS_selector_1 by leeyanggoo (@leeyanggoo) on CodePen. type 선택자는 HTML 문서의 태그 이름을 선택자로 사용할 수 있습니다. 위의 예제는 p 태그 안의 텍스트를 빨간색으로 표시하는 속성을 부여하고 있습니다. 아이디 선택자id selector CSS의 선택자는 HTML 요소 중 같은 ..

01. 변수 : 데이터 저장 변수는 데이터를 저장하는 저장소다. var x = 100; //변수 x에 숫자 100을 저장함 var y = 200; //변수 y에 숫자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x);//100 console.log(y);//200 console.log(z);//javascript 변수는 3가지 선언자가 있다. 변수는 var, let, const 3가지의 선언자가 있다. 'var'은 동일한 변수로 재선언도 가능하고, 이미 선언된 변수에 새로운 값을 재할당 할 수 있다. 'let'은 동일한 변수로 재선언은 불가능하지만, 이미 선언된 변수에 새로운 값을 재할당 할 수 있다. 'const'는 동..

이전 HTML에서 배웠던 블록 레벨 요소(Block-level elements)와 인라인 요소(Inline elements) 기억하시나요? 웹 페이지의 레이아웃을 구성하는 'float'는 세로로 나열되는 블록 요소를 가로로 배치할 수 있게 해주는 CSS 속성입니다. 또한 'clear'는 float 속성을 제거하고 다시 원래대로 되돌리는 CSS의 속성입니다. 이 두 가지 속성을 이용해 레이아웃을 요소를 구성하는 방법을 알아보겠습니다! float float 속성은 요소를 왼쪽이나 오른쪽으로 부유시켜 그 주변의 요소와의 관계를 설정합니다. 부유(floating)된 요소는 그 위치를 기준으로 다른 요소가 배치되며, 주변 요소들은 부유한 요소의 높이를 인식하지 못하게 됩니다. float는 'left'와 'righ..

이번에 배워본 조건문 if문과 저번에 배웠던 반복문 for문을 이용하면 다음과 같은 예제를 풀 수 있습니다. 마무리 문제 1 주어진 배열에서 10보다 큰 값을 찾아 화면에 표시하시오. See the Pen Javasciprt_if_6 by leeyanggoo (@leeyanggoo) on CodePen. 마무리 문제 2 사용자에게 1보다 큰 수를 입력하게 한 후 입력한 숫자까지 짝수만 더하는 프로그램을 작성해 보세요. let num = parseInt(prompt("1보다 큰 숫자를 입력하세요.")); let sum = 0; for(let i = 1; i 1){ for(let i = 1; i "2"는 true를 반환합니다. 하지만, 이러한 자동 변환은 일관성을 유지하기 어려우므로, 가능한 경우에는 문자열..

자바스크립트의 조건문은 프로그램 실행의 흐름을 제어하고 조절하는 데 사용됩니다. 주로 if, else, switch의 세 가지 조건문을 사용합니다. 알아볼까요! if문과 else문 See the Pen javascript_if_1 by leeyanggoo (@leeyanggoo) on CodePen. if 조건문은 프로그래밍에서 가장 기본적인 구문 중 하나로, 주어진 조건식이 true일 경우에만 코드 블록을 실행합니다. if 뒤의 괄호()에는 조건문이 들어갑니다. 위의 예제는 10보다 1이 더 크기 때문에 조건을 만족한 true이며 이에 따라 "실행되었습니다.(true)"라는 문구가 출력됩니다. else문은 if 문과 함께 사용되며, if 문의 조건식이 false일 때 실행됩니다. 두 번째 if문은 괄호..