Leeyanggoo

01. 결괏값을 작성하시오. ⭕ { if( null ){ console.log("true"); } else { console.log("false"); } } 더보기 false 02. 결괏값을 작성하시오. ⭕ { let num = 0; while( num 6 ){ break; } console.log(num); } } 더보기 1 2 4 5 6 07. 결괏값을 작성하시오. ⭕ { for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); } 더보기 함수가 실행되었습니다. 11. 결괏값을 작성하시오. ⭕ { let direct = 1; function gallery(num){ if(num){ if(num == 2) direct..

이전 포스팅에서 "정답 확인하기"를 누르면 정답을 반환하는 스크립트를 살펴봤습니다. 다양한 선택자와 메서드를 이용하면 그만큼 더 다양한 효과를 만들 수 있습니다. 지난번에 이어서 이번엔 주관식 정답을 처리하는 과정을 알아보겠습니다! 메서드뿐만 아니라 속성도 잘 알아야 한다!! //선택자 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; % 부모 요소의 글자 크기를 ..