Leeyanggoo

이전 포스팅에서 "정답 확인하기"를 누르면 정답을 반환하는 스크립트를 살펴봤습니다. 다양한 선택자와 메서드를 이용하면 그만큼 더 다양한 효과를 만들 수 있습니다. 지난번에 이어서 이번엔 주관식 정답을 처리하는 과정을 알아보겠습니다! 메서드뿐만 아니라 속성도 잘 알아야 한다!! //선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQuestionNum = quizWrap.querySelector(".quiz__que..

codepen design by David López 자바스크립트 선택자란? 선택자란 웹 페이지의 특정 요소를 선택하고 다양한 작업을 수행하기 위해 사용합니다. 자바스크립트의 선택자는 HTML 요소를 선택하는 데 사용되며, 다양한 선택자를 제공합니다. 선택자를 사용하여 선택된 요소는 일반적으로 변수에 할당되어 나중에 사용됩니다. 선택된 요소를 조작하는 데 사용할 수 있는 다양한 메서드와 속성이 있습니다. 그럼 한번 알아볼까요! 🧐 자바스크립트의 다양한 선택자 선택자 설명 getElementById HTML 문서에서 ID 속성을 사용하여 요소를 선택 getElementsByClassName HTML 문서에서 class 속성을 사용하여 요소를 선택 getElementsByTagName HTML 문서에서 지정..

카드형 디자인이란? 카드형 디자인은 위의 예제처럼 이미지와 텍스트가 함께 어우러진 형태의 요소들로 구성한 웹 페이지 디자인을 뜻합니다. 카드에는 제품 미리보기, 블로그 게시물, 비디오 이미지 등 웹 페이지 또는 앱이 보여주고자 하는 정보가 묶여 있습니다. 이런 카드형 디자인은 구성에 따라 사용자에게 유연하게 제공할 수 있고, 한눈에 정보를 보여줄 수 있다는 점에서 효과적인 디자인 형태라고 할 수 있겠습니다! 🧐 시작은 HTML 구성부터!! 레이아웃을 만들 땐 페이지의 공간을 차지할 이미지와 텍스트를 담을 구획부터 나누면 작업이 편리합니다. 스타일을 입히기 위해선 적용할 공간부터 만들어야겠죠? 😅 HTML은 의미에 따라 마크업한다! 이전에 포스팅 했던 "시멘틱과 논리적 마크업" 혹시 알고 계시나요? 먼저 ..

01. 변수 : 데이터 불러오기 변수 안에 저장된 테이터를 불러오는 방법입니다. let x = 100, y = 200, z = "javascript"; console.log(x, y, z); 변수 선언자 'let'을 이용해 x, y, z에 데이터를 저장한다. console.log(변수명)로 변수를 불러온다. 더보기 100200javascript 02. 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. const x = 100, y = 200, z = "javascript"; console.log(x, y, z); 'const'를 이용해 변수 x, y, z에 상수 데이터를 저장한다. 상수는 데이터 변경이 불가능하기 때문에 만약 변경한 경우 'undefined'가 출력된다. 더보기 1..

🧐 UI/UX의 개념 UI는 "User Interface"의 줄임말로 “사용자가 회사/제품/서비스와 상호작용할 수 있도록 만들어진 매개체”라는 뜻입니다. UX는 "User eXperience"의 줄임말로 “사용자가 회사/제품/서비스와 상호작용하는 모든 측면을 포함하는 것”이라는 뜻입니다. UI와 UX 모두 '상호작용'이라는 키워드가 중요하다고 볼 수 있습니다. 🧐 전문가가 바라본 UI/UX 디자인의 개념 구글 벤처스의 임원 Ken Norton은 “UI는 제품의 표면이 어떻게 보이고 기능하는지, UX는 사용자가 문제를 풀어가는 여정”이라고 말했고, 정보기술 회사 CACI의 디자이너 Jason Ogle은 “UI는 우리가 가고자 하는 곳으로 데려다 주는 다리이며, UX는 도착한 뒤의 느낌”이라고 말했습니다. ..

피그마 단축키 보기 Ctrl + Shift + / 피그마의 다양한 단축키들은 " Ctrl + Shift + / "을 눌러 확인이 가능하다! * 해당 포스팅은 모든 단축키를 다루지 않습니다. 모든 단축키는 해당 커멘드를 눌러 확인하고, " Ctrl + / "로 검색해보세요! Essential Ctrl + \ UI 보이기/감추기 Ctrl + Shift + \ 레이어 패널 감추기 I (대문자 i) 색상 선택/추출 Ctrl + / 피그마 기능 검색 🧐 색상 추출할 때 팁!! 색상을 추출할 때 색상을 담을 도형을 놓고 하면 바로 색상 코드를 확인할 수 있어서 편리하다! 도형을 하나를 만들고, 도형을 클릭한 뒤에 I (대문자 i)를 눌러서 추출할 표본을 클릭하면 해당 색상이 도형에 칠해진다. Tool V 이동 F ..

01. 다음의 출력값을 보고 빈칸을 채우시오! ⭕ { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 더보기 1. x 2. y 3. x+y; 02. 다음의 출력값을 보고 빈칸을 채우시오! ⭕ { let x = 100; let y = 200; let z = "javascript"; x = ___; y = ___; z = ___; console.log(x); console.log(y); console.log(z); //300 //400 //jquery } 더보기 1. 300(혹은 x +200) 2. 400(혹은 y+200) 3. "jquery";..

마무리 문제 2. 2개의 숫자를 입력받아 두 수의 최대공약수를 구하는 함수를 작성하고 테스트해 보세요. 예를 들어 4와 12의 최대공약수는 4가 됩니다. 즉 두 수 모두 나누어떨어지는 수 중에서 가장 큰 값이 최대공약수입니다. 길라잡이 주어진 두 수 중에서 어떤 수가 큰 수인지 확인합니다. 두 수가 모두 나누어떨어져야 하므로 두 수 중에서 큰 수까지 반복하면서 작은 수도 나누어떨어지고, 큰 수도 나누어 떨어지는 숫자를 찾습니다. 찾을 때마다 변수에 할당합니다. 반복이 모두 끝나면 변수에는 가장 마지막에 할당된 약수만 남습니다. function test(n1, n2){ if(n1 > n2){ return {big : n1, small : n2} } else { return {big : n2, small :..

문자 Font 웹 페이지 제작에 있어 문자를 꾸미고 다루는 것은 매우 중요한 부분입니다. 오늘은 CSS에서 문자를 꾸미는 여러 방법에 대해 알아보겠습니다! font-family 문자에 사용할 글꼴을 정하는 속성입니다. 글꼴의 이름이 한글인 경우는 따옴표로 감싸고, 여러 개의 글꼴이 있다면 쉼표로 구분합니다. font-family의 속성값이 여러 개인 경우 순서대로 글꼴을 읽어 들입니다. font-family: "나눔고딕", Arial, sans-serif; font-size 문자의 크기를 정하는 속성입니다. 기본적인 문자의 크기는 16px이며, CSS에서 사용하는 단위는 아래와 같습니다. px 해상도에 따라 상대적으로 달라지는 기본 단위입니다. font-size: 20px; % 부모 요소의 글자 크기를 ..

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문은 괄호..

반복문은 코드 블록을 반복적으로 실행할 수 있도록 하는 구문입니다. 그중 자바스크립트에서 가장 많이 사용하는 반복문은 for문입니다. 반복문을 사용하는 이유는 불필요한 명령을 늘어놓지 않아도 된다는 점, 그만큼 소스 코드도 깔끔해진다는 점입니다. 오늘은 반복문 중에 for문에 대해 알아보겠습니다! :) for문 for문은 지정된 조건이 'true'인 동안 코드 블록을 반복 실행합니다. 일반적으로 반복 횟수가 명확한 경우에 사용됩니다. for문의 구문은 다음과 같습니다. for(초깃값; 조건식; 증감식){ } 초깃값 : 몇 번 반복할지 지정하기 위해 변수를 선언합니다. 초깃값은 보통 0이나 1부터 시작합니다. 조건식 : 문장을 어떤 조건으로 반복할지 정하는 조건식을 넣습니다. for문은 'true'인 동안..

id 선택자 CSS의 선택자는 HTML 요소 중 같은 요소일지라도 각자 다른 속성을 부여할 때 사용합니다. 그중 id 선택자는 여러 요소 중 특정한 이름을 부여하는 선택자이며 중복해서 사용할 수 없습니다. See the Pen CSS_id by leeyanggoo (@leeyanggoo) on CodePen. id 선택자는 HTML 요소 태그의 시작에 과 같이 붙여서 나타냅니다. 또한 id 선택자의 이름은 숫자로 시작할 수 없고, 주로 영문자로 시작합니다. class 선택자 class 선택자는 HTML 요소 중 같은 이름을 갖는 특정한 집단을 모아 속성을 부여하는 선택자입니다. 즉 특정 집단을 class라고 표현하는 것이며, 여러 개의 요소에 같은 class 이름을 부여할 수 있습니다. See the P..

각각의 프로그램이 수식을 만들어야 할 때 필요한 것을 '연산자'라고 합니다. 자바스크립트는 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자 등이 있습니다. 차례대로 알아보겠습니다. :) 산술 연산자 산술 연산자 종류 속성 설명 + 더하기 연산을 할 때 사용합니다. 문자와 문자, 문자와 변수 등을 연결할 때 사용합니다. - 빼기 연산을 할 때 사용합니다. * 곱하기 연산을 할 때 사용합니다. / 몫을 구할 때 사용합니다. % 나머지를 구할 때 사용합니다. 증감 연산자 ++ 1씩 증가시킬 때 사용합니다. (+와 +의 사이에 공백이 있으면 안 됩니다.) -- 1씩 감소시킬 때 사용합니다. (-와 -의 사이에 공백이 있으면 안 됩니다.) 더하기(+), 빼기(-), 곱하기(*), 나누기(/)는 일반적인 사..

See the Pen Tail Animation by leeyanggoo (@leeyanggoo) on CodePen. 배경 그라디언트 효과 linear-gradient : https://uigradients.com/

CSS는 Cascading Style Sheets의 약자로서 HTML의 요소들을 어떻게 보여줄지 정의하는 스타일 시트 언어입니다. 이 CSS를 적용하는 표현 방법으로 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트가 있습니다. 한번 알아보겠습니다. :) 내부 스타일 시트Internal style sheet 내부 스타일 시트는 HTML의 문서 안에 태그를 이용하여 요소에게 적용하는 방식입니다. 대부분 태그는 HTML 문서의 태그 안에 넣습니다. See the Pen CSS_1 by leeyanggoo (@leeyanggoo) on CodePen. 이처럼 태그가 HTML 문서 내부에 쓰여 적용되는 방식을 '내부 스타일 시트'라고 합니다. 이 방식은 해당 HTML 문서에만 스타일을 적용할 수 있습니..

자료형 프로그래밍 언어에는 내장된 여러 가지 형태의 자료 형태(daya type)가 존재하고 그를 자료형이라고 합니다. 자바스크립트의 자료형은 크게 원시 유형과 객체로 구분할 수 있고, 원시 유형은 다시 6가지로 나눠집니다. 먼저 원시 유형의 숫자형부터 차례대로 알아보겠습니다! :) 원시 유형primitive type 원시 유형(원시 값)은 자바스크립트의 기본 타입을 말하며 변형이 불가능한 즉 '불변성'을 지니고 있는 데이터입니다. 원시 유형은 더 이상 단순화할 수 없기 때문에 원시적(primitive)이라고 부릅니다. let a = 3; console.log(a); // 3 a = 5; console.log(a); // 5 언뜻 3이라는 값이 5로 변형했다고 생각할 수 있지만, 데이터 영역에 새로 값 ..

지난 HTML의 포스트에서 웹 페이지를 구조를 만들 때 의미를 고려한 태그를 사용하여 구현하는 시멘틱(semantic)과 논리적 순서(logical sequence) 마크업을 소개해드렸습니다. 웹 페이지의 구조가 의미에 따라 구성되어 있다면, 그 구조를 이루는 태그들 또한 각자 의미와 쓰이는 경우가 있습니다. 이번엔 그 태그들 중에 구획을 나누는 태그에 대해 자세히 알아봄으로써 좀 더 접근성 있고, 명확한 정보를 갖춘 웹 페이지를 구현하는 데 한 걸음 더 나아가 봅시다! 위의 웹 페이지 구조를 보면 태그가 다양한 곳에 쓰이는 걸 알 수 있습니다. 왜 그런 것인지 태그와 관련된 태그를 알아보겠습니다! 🔎 header : 문서의 소개, 제목, 탐색에 도움이 되는 콘텐츠를 나타냅니다. 또한 는 구획을 나눌 때..

시멘틱 마크업Semantic Markup 시멘틱(Semantic)은 '의미론적인'의 뜻으로, 시멘틱 마크업이란 웹 페이지의 구조와 의미를 고려하여 태그를 사용하는 방식을 의미합니다. header, nav, section, article, aside, footer 등 각각의 태그 안에 알맞은 데이터를 채워넣음으로써 보다 명확한 정보를 갖춘 웹 페이지를 구현할 수 있습니다. header 웹 페이지의 소개 및 탐색에 도움을 주는 콘텐츠를 나타냅니다. 제목, 네비게이션, 검색 등의 내용을 포함합니다. nav 메인 메뉴나 목차, 색인 등을 포함하는 구획입니다. section 맥락이 같은 요소들을 주제별로 그룹화하는 태그. 문서의 일반적인 영역을 나타냅니다. article 게시판, 블로그 포스팅, 뉴스 기사 등과 ..

블록 레벨 요소Block-level Elements 블록 레벨 요소는 일반적으로 목록·표 등을 포함하고 있으며, 문단으로 큰 공간을 차지하고 있습니다. 여기서 말하는 "문단Parahraph"이란 블록 레벨 요소가 기본적으로 가지고 있는 줄이 바뀌는 특성을 뜻합니다. 블록 레벨 요소는 새로운 줄에서 시작하기 때문에 '세로'로 쌓이는 형태를 보입니다. See the Pen block_1 by leeyanggoo (@leeyanggoo) on CodePen. 위의 코드는 "블록 레벨 요소는 줄이 바뀌는 특성을 가지고 있습니다."라는 하나의 문장을 블록 레벨 요소 중 하나인 태그를 이용해 세 문단으로 나눈 것입니다. 블록 레벨 요소가 차지하는 "문단의 공간"이란 부모 요소의 좌우 전체를 차지하여 블록을 만든다는..