SEOLHEE

자바스크립트 퀴즈(Quiz) 사이트 만들기 아래에 있는 사진과 같이 퀴즈를 풀 수 있는 사이트를 만들어 보겠습니다! 직접 만들어 본 퀴즈 사이트 코드 Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 script 코드 수업 시간에 배운 변수 부분을 활용해보았습니다. const 변수를 선언해주고 선택자, 문제 정보를 만들어주었습니다. 참고 quizWrap, quizTitle, quizTime 등 처럼 중간에 대문자로 적어주어야한다. 문제 출력은 변수와 .innerText를 써서 문제를 출력하여줍니다. 정답 부분은 정답을 클릭하면 나타날 수 있게 quizAnswerResult.style.display = "none"; 을 써서 정답을 숨겨주었습니다. 이렇게 정답 확인하기를 클릭하면 바로 정답이 나옵니다..

카드 UI의 장점 주요 콘텐츠를 카드로 구성할 경우 거의 무한대로 확장하거나 변형할 수 있어 활용이 쉽습니다. 반응형 디자인에서 카드 UI가 많이 쓰이는 이유이기도 합니다. 여러 디바이스를 통해 서비스를 이용하는 환경에서도 일관된 경험을 제공할 수 있습니다. 1. 컨텐츠 덩어리 채로 분리 비슷한 속성에 맞춰서 섹션이 분리가 되어 텍스트 양을 줄이고, 정보의 조각을 하나의 유의미한 정보로 붙여줍니다. -> 정보 정리 전달이 잘 됩니다. 2. Easy to Digest (정보 확인이 쉬움) 사용자들의 정보 접근과 인식을 도와줍니다. 3. 시각적 즐거움 카드 기반 디자인은 이미지 정보에 의존적입니다. 이미지는 효과적/즉각적으로 관심을 이끌어 사이트/모바일 디자인에 효과적입니다. 4. 다양한 스크린 사이즈에 잘..

데이터 불러오기 자바스크립트에서 데이터를 불러오는 종류를 알아봅시다. 변수 : 데이터 불러오기 상수 : 데이터 불러오기 배열 : 데이터 불러오기 객체 : 데이터 불러오기 01. 변수 : 데이터 불러오기 변수 안에 저장된 데이터를 불러오는 방법입니다. { let x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 😎결과 확인하기 100 200 javascript 02. 상수 : 데이터 불러오기 상수 안에 저장된 데이터를 불러오는 방법입니다. { const x = 100, y = 200, z = "javascript"; console.log(x, y, z); } 😎결과 확인하기 100 200 javascript 03. 배열 : 데이터 불러오기 : 기본 ..

새롭게 배운 배열 데이터 불러오기 배열은 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조 입니다. 데이터는 순차적으로 저장되며 중복이 가능합니다. 저장된 데이터에는 인덱스를 이용하여 접근이 가능합니다. 자바스크립트에서 배열의 사용법을 알아보겠습다. 01. 배열 : 데이터 불러오기 : forEach() forEach문을 사용해 배열값을 실행하는 방법입니다. { const num =[100,200,300,400,500]; num.forEach(function(element){ document.write(element); }); } // 결과 : 100 200 300 400 500 forEach forEach 메서드도 배열을 순회하기 위해 사용되지만, 기본적인 for 반복문과는 다른 방식으로 함수를 사..

자바스크립트 함수(function) 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. 자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있습니다. 함수 정의 자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가집니다. 1. 함수의 이름 2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter) 3. 중괄호({})로 둘러싸인 자바스크립트 실행문 자바스크립트에서 함수를 정의..

자바스크립트 테스트 오늘 본 자바스크립트 테스트 문제와 정답 정리 틀린 문제는 풀이와 틀린 이유 정리 01. 다음의 출력값을 보고 빈칸을 채우시오! { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답 x y x + y 틀린이유 문제를 자세히 안 봐서 마지막 정답이 300인지 모르고 자연스럽게 z를 썼다... 정답이 javascript인 줄 알고 z를 적었는데 채점하고 확인해보니 300이었다. 300이 나오려면 100인 x와 200인 y가 더해져야 하므로 정답이 x+y인 것... 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x..

CSS 문자 관련 스타일 아무리 웹에서 이미지나 비디오의 비중이 커지더라도 텍스트는 웹에서 빠질 수 없는 핵심적인 요소일 것입니다. 웹에서 텍스트를 스타일하기 위해서 사용할 수 있는 CSS 속성에 대해서 알아보겠습니다. 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, arial, Helvetica, sans-serif; 02. font - size 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위에는 다음과 같..

grid layout 그리드는 그리드를 선언하는 요소와 하위의 자식 요소들로 구성됩니다. 그리드를 구성하는 자식요소들을 "아이템" 이라고 하며, 자식 요소들의 태그 종류에 관계 없이, 그리드 바로 하위의 자식요소들만 아이템이 됩니다. 그리드 선언은 css 속성으로 아래와 같이 시작합니다. display : grid; 그리드 속성 선언 만으로는 자식 아이템들에 아무런 영향을 미치지 않습니다. 추가 그리드 속성이 정의되지 않으면 "display: grid;" 는 "display: block;" 과 같습니다. 레이아웃 grid 유형 (예제) 결과 grid와 flex의 차이점 flex box는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었지만, grid는 행과 열 모두..

flex flex는 flexble의 준말로 유동적인 레이아웃을 손쉽게 만들 수 있다는 의미를 가진다. 기존의 웹페이지를 만들 때 사용하던 올드한 레이아웃 제작방법을 개선하고자 flexbox가 생겨났다. flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 필수 지정 속성 1. display : flex; 2. flex-direction : 방향; flex를 활용하기 위해서는 부모에 필수적으로 달아줘야하는 css 속성이 있..

자바스크립트 마무리 문제 모던 자바스크립트 프로그래밍의 정석 155,156 페이지 마무리 문제를 풀어보자! 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. let num = parseInt(prompt("숫자를 입력하세요.")); function func(num){ if(num>0){ document.write(num + "은(는) 양수입니다."); } else if(num num2 ? num1 : num2; let GCD = 0; for(let i=1; i