Leeyanggoo

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 텍스트 유형 레이아웃이란? 텍스트 유형은 이전의 카드 유형의 레이아웃에서 조금 더 정보 제공을 위한 텍스트가 위주인 레이아웃입니다. 작은 소주제를 가진 섹션이나 블로그 포스팅 등 정보 세트를 표시하는 데 사용할 수 있습니다. 텍스트 유형 레이아웃을 올바르게 채택하면 인터페이스 정보를 효과적으로 구성하고 사용자 경험을 크게 향상시킬 수 있습니다. UI/UX 디자인의 여러 유형을 소개하는 GE Health Care(Designed with healthcare i..

이젠 주관식 퀴즈를 넘어 퀴즈의 정석이라 할 수 있는 객관식 퀴즈를 만들어 볼 차례입니다! 객관식은 정답이 될 수 있는 여러 개의 보기를 보여줘야 하고 또 선택함에 따라 바뀌는 코드를 짜야 하기 때문에, 주관식보다 더 복잡한 코드를 짜야 한다고 볼 수 있습니다. 객체와 배열 그리고 for문 //문제 const quizInfo = [ { infoType: "웹디자인기능사", infoTime: "2016년 4회", infoNumber: "1", infoQuestion: "다음 중 디자인의 기본 요소들로 옳은 것은?", infoChoice: ["선, 색체, 공간, 수량", "점, 선, 면, 질감", "시간, 수량, 구조, 공간", "면, 구조, 공간 수량"], infoAnswer: "2", infoDesc: ..

자바스크립트 테스트 수업시간에 배운 자바스크립트를 간단하게 테스트합니다. 제대로 배웠는지 간단하게 테스해보세요! 01. 결괏값을 작성하시오. ⭕ { (function(){ console.log("함수가 실행되었습니다."); })(); } 더보기 함수가 실행되었습니다. 02. 결괏값을 작성하시오. ⭕ { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 더보기 함수가 실행되었습니다. 03. 결괏값을 작성하시오. ❌ { let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func(40, 50)) } 더보기 73 틀린 문제 ..

요번에 공부하면서 정말이지 헷갈리고 이해하기 어려웠던 세 가지 함수 유형에 대해 알아보려고 합니다! 이해를 돕기 위해 모두 같은 결과를 도출하는 예제로 작성해보겠습니다! 객체생성자 함수 function Func(num, name, word){ this.num = num; this.name = name; this.word = word; this.result = function(){ document.write(this.num + ". " + this.name + "가 " + this.word + "되었읍디다. "); }//객체의 메서드라고 함. } //인스턴스 생성 new const info1 = new Func(1, "함수", "실행"); const info2 = new Func(2, "자바스크립트", "..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 슬라이드 유형이란? 슬라이드 유형은 주로 웹의 메인 페이지에서 자주 활용합니다. 주로 브랜드의 중요 이벤트나 홍보, 소식 등을 보여주거나 제공하는 메인 서비스를 나열하기도 합니다. 지정한 몇 개의 레이아웃이 넘어가는 형태로 제작됩니다. CJ AI center의 메인 페이지 CJ의 AI center는 메인 페이지에 슬라이드 유형을 사용하고 있습니다. AI center가 제공하는 메인 기술 4가지를 소개하고 있습니다. 이런 슬라이드 유형은 사용자에게 보여주고자 ..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 이미지 유형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 이미지 + 텍스트 유형이란? 지난번에 살펴본 이미지 유형은 광고의 대표 이미지나 브랜드 철학을 담은 이미지로 웹 페이지를 나타냈습니다. 이미지 + 텍스트는 사용자가 이동하려는 웹 페이지의 예시를 보여주고 검색을 유도하거나, 텍스트에 담은 정보를 보여주는 레이아웃입니다. design by webflow.com 여러 웹 디자인을 볼 수 있도록 소개하는 webflow는 페이지의 검색 결과를 다음과 같이 보여주고 있습니다. 우리도 이렇게 텍스트와 이미지가 잘 어우러..

더 많아진 댕댕이 ㄷㄷ; 지난번에는 주관식 문제가 1개 있는 퀴즈 유형을 알아봤습니다! 선택자와 메서드, 속성을 이용하면 다양한 이펙트를 만들 수 있다고 말씀드렸습니다. 그렇다면 이번엔 주관식이 여러 개 있는 퀴즈는 어떻게 만들어야 할까요? 🧐 선택자 querySelectorAll()을 잘 이용하자! . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 . 정답입니다! 땡! 정답 확인하기 설명 이 길게 늘어진 HTML 코드가 보이십니까..? 문제가 3개로 늘었으니 그에 따라 박스도 3배 늘었습니다. 이렇게 HTML 요소가 여러 개 있고 이를 선택해야 할 때는 "querySelectorAll()"을 이용해야 합니다! //선택자 const quizWrap = document.qu..

MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. MySQL은 다양한 운영 체제에서 사용할 수 있으며, 대부분의 웹 응용 프로그램에서 데이터베이스 시스템으로 많이 사용됩니다. MySQL은 클라이언트/서버 모델을 기반으로합니다. 이것은 MySQL 서버가 데이터베이스를 호스팅하고, 클라이언트 애플리케이션이 서버에 연결하여 데이터베이스에 액세스할 수 있도록 합니다. MySQL은 다양한 클라이언트 프로그램 및 API를 지원하여, 여러 다른 프로그래밍 언어로 쉽게 데이터베이스를 사용할 수 있습니다. MySQL은 다양한 기능을 제공합니다. 이 중 일부 기능은 다음과 같습니다. 데이터의 저장과 검색: MySQL은 테이블로 구성된 데이터베이스에서 데이터를 저장하고 검색할 수 있습니다. 데이터의..

API란? API는 "Application Programming Interface"의 약자로, 응용 프로그램과 데이터베이스, 소프트웨어 구성 요소 등 간의 상호작용을 가능하게 하는 인터페이스를 의미합니다. 여기서 상호작용이라 함은 한 프로그램에서 다른 프로그램으로 데이터를 주고받기 위한 방법을 말하는 것입니다. 간단히 말해서 API는 식당에서 주문할 때 보는 메뉴판 같은 것입니다. 메뉴판을 보고 요리사에게 주문을 하듯이, API를 보고 서버에 데이터를 주문하는 것이라 생각하면 되겠습니다! 공공데이터포털(data.go.kr) 이용해보기!! 1. 공공데이터포털(data.go.kr) 접속하고 회원가입 하기 2. 찾고자 하는 데이터 검색!! 3. 검색 후 하단에 "오픈 API"를 찾고 "더 보기"를 눌러서 자신..

읽기 전에 잠깐! 이전 "카드형 레이아웃 만들기"의 포스팅을 참고하시면 레이아웃 제작 순서에 대해 짚고 넘어가실 수 있습니다! 🙄 카드형 레이아웃 만들기 포스팅 보러 가기 🙄 다양한 디자인 보러 가기 이미지 유형이란? 이미지 유형의 레이아웃은 웹 페이지가 담고 있는 정보의 대표적인 콘셉트를 보여줄 때 사용합니다. 브랜드의 대표 아이덴티티(identity)나 광고, 디자인에서 담고자 하는 철학 등을 나타내기도 합니다. 이미지 혹은 브랜드의 대표 철학 등을 사용자가 볼 수 있는 한 화면에 꽉 채워서 보여주는 경우가 많습니다. 브랜드 아이덴티티, 웹 디자인 및 개발 등의 서비스를 제공하는 디지털 에이전시 "Aino"의 웹 페이지 예시로 디자인 에이전시 "Aino"의 웹 페이지를 가져와봤습니다. 페이지 메인에 ..