아라의 WWW

01. 다음의 결괏값을 작성하시오. { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 답 : 0 우선 변수 num에 0을 저장하고 whiile문을 실행하려고하는데 조건문에 false가 있는데 while문에 false가 있으면 실행하지않아 출력된 답은 0입니다. 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log(result); console.log(a+b+c); } 답 : 20 21 03. 결괏값을 작성하시오. { function func(){ ..

마무리 문제1 마우스 오버하면 이미지 바꾸기 우선 메인크기를 600으로 만듭니다. 또한 마진을 20px auto를 주어 위아래 20px에 양 옆은 자동으로 맞춰 줍니다. h1은 폰트사이즈 1.5rem을 사용하여 생소한 단어지만 한번이라도 사용하여 익히려고 했습니다. 그리고 중앙에 정렬 하도록 text-align을 center을 줍니다. 그리고 아래로 여백을 줄수 있도록 margin-bottom을 20px를 줍니다. 이미지를 메인 안에서 width이 100%이도록 합니다. 스크립트를 보면 imgMain이라는 상수에 #main > img을 저장하여 사용합니다. 이미지에 마우스를 올리면 이벤트가 움직이도록 imgMain에 대해 addEventListener("mouseover")을 사용하고 imgMain에 s..

자바스크립트에는 문자열과 관련된 함수가 다양하게 있습니다. 원시유형과 객체 단순히 값을 가지고 있을 경우에는 원시유형이라고 하고 프로퍼티와 메서드를 가지고 잇을 때는 객체라고 합니다. 예을 들어 lenght을 사용할때 변수에 문자열을 할당한 후 lenght 프로퍼티를 사용하는데 이때 변수에 lenght을 할ㄹ당하지 않아도 사용할 수잇습니다. 프로퍼티(Property) 객체(Object) 내부의 속성(Attribute)으로, 해당 객체의 상태를 나타내는 값(Value)이나 함수(Function)를 말합니다. 객체는 프로퍼티를 가지며, 이를 통해 객체의 상태와 행동을 제어할 수 있습니다. lenght 포로퍼티 문자열의 길이를 찾을 때 사용하는 프로퍼티입니다. 보통 배열에서도 많이 사용하며 배열의 인덱스의 총..

오늘은 지금까지 만든 유형별 색션을 seo에 맞게 통합해 봅시다. index의 기본형 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 베너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 먼저 seo(검색엔진 최적화)을 위해 작성해야 하는 것들이 있습니다. 메타 테그의 네임에 따라 콘텐츠가 달라집니다. author : 아라라 description : 프론트엔드를 준비하고 공부하는 사이트 튜토리얼입니다. keyword : 프론트엔드, 사이트 사이트 만들기 , 튜토리얼 robots : all을 주어 로봇이 모두를 색인 하도록 지정합니다. 파비콘을 지정해 주고 css을 fons / reset / common / stlye이라는 이름으로 나..

html Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 jo0132@naver.com 이번에도 html은 앞서 했던 퀴즈 이펙트에 사용한 html을 사용하도록 합니다. 하지만 이번에는 몇문제가 남았는지 몇점인지가 나옵니다. 문자 정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : ["시간의 흐름", "연필의 갯수", "온도의 변화", "식물의 성장"], infoAnswer : "연필의 갯수", infoD..

See the Pen 20230324 by jo0132 (@jo0132) on CodePen.

See the Pen Untitled by jo0132 (@jo0132) on CodePen.

이번 시험을 보다가 실수 하는 것을 제외하면 전치 후치 연산자가 아직 부족한것 같아 예제를 만들면서 풀어보도록하겠습니다.(풀이는 gpt챗봇을 통해 같이 생각하였습니다.) 전치 연산자 형태 : ++num, --num 문장 안에서 1증가/감소(표현식 평가전 1증가/감소, 표현식에서 증가/감소된 값 사용) 후치 연산자 형태 : num++ ,num-- 문장 수행후에 1증가/감소(표현식 평가후 1증가/감소, 표현식에서는 원래값 사용) 예제 let a = 6; let b = 8; let c = ++a; let d = b++; console.log(a); console.log(b); console.log(c+d); console.log(a+b); 이때 a는 6, b는 8, c+d는 15이며 a+b는 16입니다. 이때..

선택자 const quizWrap = document .querySelector(".quiz__wrap"); let quizScore = 0; 문제 정보 // 문제정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : { 1: "시간의 흐름", 2: "연필의 갯수", 3: "온도의 변화", 4: "식물의 성장" }, infoAnswer : "2", infoDesc : "연필은 1.5개가 존재 하지 않으므로 디지털입니다" // 문제1 end },{ infoType : "정보처리..

01. 결괏값을 작성하시오. { const str = "javascript"; const text = str.indexOf("a"); const text2 = str.lastIndexOf("a"); const text3 = str.includes("a"); console.log(text); console.log(text2); console.log(text3); } 답 : 1 3 true 02. 다음의 결괏값을 보고 빈칸을 채우시오. { function func(){ document.write("함수2가 실행되었습니다."); } function callback(str){ document.write("함수1가 실행되었습니다."); _______(); } callback(func); //함수1가 실행되었습니다..

html 1 2 3 4 5 6 자바스크립트😋 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성의 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. .... word-spacing : 단어 사이 간격을 지정합니다. word-wrap : 글자 단위에서 줄바꿈을 결정하는 방법을 지정합니다. z-index : HTML/CSS에서 요소(element)들의 수직 위치를 결정하는 속성으로, 값이 높을수록 다른 요소들보다 위에 나타나게 됩니다. jo0132@naver.com 리스트로 정리한 cs..

html 푸터 아침밥 레시피 한식 일식 양식 간편식 재료선정 탄수화물 단백질 지방 섬유질 건강별 정리 심혈관 질환 성인병 고관절 질환 레시피 도서 추천 한식 일식 양식 간편식 나이별 메뉴 어린이 청소년 청년 중장년 노년 Q&A 문의하기 F&A 2023 아침밥 먹기 실천 위원회 All Right Reserved 우선 각각의 큰 카테고리 별로 div를 만들어 큰 카테코리는 h4로 감싸고 아래로 작은 메뉴는 li로 감싸 작업하였습니다. 그렇게 6개 정도 만들면 됩니다. 아래로는 홈페이지의 이름이 오게됩니다. 중간에 웹표준에 맞추기 위해 페이지의 제목을 h2로 감싸고 그것을 블라인드 처리하기위해 클래스에 blind를 주어 가립니다. css 리셋과 common은 전부터 사용하던 것을 그대로 사용하여 정리할 것이 ..

HTML Javascript Mouse Effect03 마우스를 따라다니는 조명효과입니다. 1 2 3 4 5 6 "The road to success and the road to failure are almost exactly the same." 성공하는 길과 실패하는 길은 거의 같다. 오늘은 마우스을 움직이면 따라다니면서 돋보기처럼 선명하게 보이는 효과를 줍니다. 마우스을 따라다니는 200px의 원을 만들고 커서의 가운데로 오도록 합니다.(background-position: center center;) 속성 속성특징 속성 내용 background-attachment: fixed; 배경 이미지가 화면에서 고정되어 스크롤해도 항상 같은 위치에 남아 있게 됩니다. 배경이미지를 고정하여 커서를 움직여도 배경..

html Javascript Mouse Effect03 GSAP를 이용해서 마우스를 따라다니는 효과입니다. 1 2 3 4 5 6 Success is not final; failure is not fatal: It is the courage to continue that counts. 성공은 종점이 아니며, 실패는 치명적이지 않습니다. 중요한 것은 용기이다. jo0132@naver.com 우선 html에서는 별다른 효과 없이 명원이 나오는 것으로 주었습니다. 저번과 다른 점은 마우스 커스를 대신할 div박스가 두개라는 점입니다 이는 실행할때 나오는데 두 박스는 서로 다르게 움직이게 css를 주었습니다. 그리고 active를 주어 서로 span에 닿을 때 애니메이션 효과가 나도록 transform을 주었습니..

HTML Javascript Mouse Effect01 마우스 이팩트 - 마우스 따라다니기 1 2 3 4 5 6 Change will not come if we wait for some other person or some other time. 변화는 누군가 언젠가 가져다줄 거라 기다리면 절대로 오지 않는다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px jo0132@naver.com 마우스 이펙트는 마우스 커서의 좌표값을 받아 표시하고 커서를 따라다니는 오브젝트를 만들었습니다. 또한 여러가지 효과를 주어 커서가 특정 단어에 올라갈때 커서의 모양이 변하는 애니..

html NOTICE 아침밥 재료 선정 기준 영양성분 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 영양소를 섭취하면 하루 내내 집중력과 기억력이 좋아지고, 몸의 대사 기능도 원활해집니다. 더보기 칼로리 아침밥은 하루 중 첫 식사이기 때문에 체중 증가나 소화 불량 등의 문제가 발생할 수 있습니다. 적당한 칼로리를 유지하면서 영양소를 고루 섭취할 수 있는 것이 좋습니다. 더보기 시간 아침은 일상 생활에서 가장 바쁜 시간 중 하나입니다. 따라서 아침밥은 간단하면서도 영양소가 풍부한 재료로 준비하는 것이 좋습니다. 또한 미리 재료를 준비해두면 시간을 절약할 수 있습니다. 더보기 개인 취향 아침밥은 개인의 취향에 따라 다양한 메뉴를 선택할 수 있습니다. 예를 들어, 샐..

html Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 jo0132@naver.com 우선 지금까지 만들었던 퀴즈 이펙트에서 여러 가지 보기중 하나를 선택하면 선택한 답이 정답과 동일한지 비교하는 객관식입니다. 우선 label로 보기를 만드는데 for이라는 속성으로 이름들 지정합니다. 또한 value로 값을 주어 번호를 매깁니다. script 우선 늘 그랬듯이 문제 정보에 키값과 원하는 정보를 객체에 저장합니다. 이때 우리는 객관식 문제를 만들기때문에 정답 선택지를 저장하기 위해 infoChoice라는 키값에 배열로 선택지를 저장합니다. 그 후 문제 출력부분에서 updateQuiz함수를 만들어 문제를 불러오는데 이때 innerHTML을 사용하여 html속성까지 불..

금요일마다 시험이라뇨... 목요일 밤마다 몬스터 사러 갑니다... 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 if 조건문을 사용하여, 첫 번째 매개변수 num1이 두 번째 매개변..

오늘 배운 자바스크립트를 정리해볼 예정입니다! 자바스크립트 1. 함수 유형 : 객체리터럴 함수 { function func(num, name, com){ this.num = num; this.name = name; this.com = com; } func.prototype = { result1: function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`); }, result2: function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.`); }, result3: function(){ document.write(`${this.num}. ${this.name}가 $..

HTML 메인 슬라이드 영역 EVENT 아침식사를 합니다🥪 아침밥은 하루를 시작하기 위해 필요한 에너지를 제공하고, 신진대사를 촉진하여 체내 기능을 개선시키는 데 도움이 됩니다. 또한, 혈당 수준을 안정시켜주어 집중력과 기억력을 개선시켜줄 수 있습니다. 자세히보기 상담 신청 이전이미지 다음이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 메인에 들어가는 슬라이드를 피그마로 만들어 HTML로 구현 하였습니다. 제가 원하는 컨테이너영역에 이미지가 꽉 차서 화살표 버튼으로 움직이는 모양으로 구현하였습니다. 밑에 점으로 이미지가 움직일때마다 변화될 수 있도록 HTML을 구현하였습니다. CSS /* reset */ * { margin: 0; padding: 0; } a { text-decoration..

html NOTICE 아침에먹기 좋은 건강한 레시피 아침밥으로 먹을만한 메뉴는 다양하지만, 아래는 건강하고 맛있는 아침밥 메뉴 종류입니다. 오트밀 쉐이크 스크램블 에그토스트 그릭 요거트 파르페 김밥 오므라이스 샌드위치샐러드 에그 베네딕트 수프 container안에 cont의 div를 3개 만들었습니다. cont에 width값과 height값을 주어 간격을 맞추고 한박스는 텍스트만 나머지 두박스는 이미지를 넣었습니다. 첫번째 cont는 텍스트 관련 기본적으로 들어가는 span태그와 h2, p, ul, li태그를 넣었습니다. 두번째와 세번째는 figure를 넣어 이미지를 넣었습니다. css .section__small { font-size: 14px; border-radius: 50px; background..

오늘 은 퀴즈 이펙트를 한페이지에 여러개를 넣어 한번에 풀 수 있도록 하려고 합니다. html . 정답입니다! 틀렸습니다! 정답 확인하기 html을 위와 같이 세개를 만들어 줍니다. 이는 한페이지에 3문제를 한번에 볼 수있도록 하는것으로 똑같은 이펙트를 html로 구현합니다. 선택자 const quizWrap = document .querySelector(".quiz__wrap"); const quizTitle = quizWrap .querySelectorAll(".quiz__title"); // 시험 날짜_시간 const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); // 문제 번호 const quizQuestion = quizW..

MYSQL란? MySQL은 오픈 소스 관계형 데이터베이스 관리 시스템(RDBMS)입니다. MySQL은 다중 사용자, 다중 스레드 RDBMS로서, 데이터의 안정성과 보안성을 제공합니다. MySQL은 대부분의 운영 체제에서 작동하며, 웹 애플리케이션 개발, 데이터 분석, 빅 데이터, 클라우드 기반 애플리케이션 등에 많이 사용됩니다. MySQL은 SQL(Structured Query Language)을 사용하여 데이터를 관리합니다. SQL은 데이터베이스에 저장된 데이터를 조작하기 위한 표준적인 언어로서, 데이터를 검색, 삽입, 업데이트, 삭제하는데 사용됩니다. MySQL은 이러한 SQL 문을 이용하여 데이터를 쿼리하고, 데이터의 무결성을 유지하며, 데이터베이스를 관리합니다. MySQL은 사용이 간편하며, 대용..

01. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 { const func = (str) => { return str; } document.write(func("실행되었습니다.")); } 결과 : 실행되었습니다. 우선 const를 사용하여 함수 func를 선언합니다. 이때 매개변수인 str을 통해 문자열을 그대로 반환합니다. 출력문에 func함수를 호출하여 결과값인 실행되엇습니다.문자열이 출력됩니다. 02. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호 생략 { const func = str => { return str; } document.write(func("실행되었습니다.")); // 리액트나 뷰에 많이 사용 } 결과 : 실행되었습니다. 이번껀 1번에서 괄호가 생략된 모습입니다. ..

01. 디자인 우선 피그마로 디자인을 만들어 보았습니다. 기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다. 그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다. 02.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침을 먹어야하는 이유 아침밥을 꼭 먹어야 하루의 체력과 기분이 달라집니다. 간편한 아침 아침을 간편하게 먹기 위해서 빵이나 간편식으로 잘 나와있습니다. 자세히 보기 여유로운 아침 아침을 여유롭게 먹을 때 너무 무겁게 ..

이번 시험은 헷갈리는 것도 많고 어이없이 틀린 것도 많아 구분짓겠습니다. 틀린 문제의 답 헷갈린 문제의 답 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 해설 : while문의 조건식에 true를 넣으면 항상 참이 되어 무한 루프가 발생됩니다.그러므로 위 구문은 무한 루프가 발생하는 구문입니다.num++먼저 출력되고 나면 if문이 실행됩니다.반복하다보면 num이 3이되는데 그렇게되면 첫번째 if문의 조건문..

오늘은 주관식 정답 판별하는 문제를 만들어 보았습니다. 오늘은 사용자가 답을 직접 적고 정답의 유무를 판별 하는 페이지를 만들어 보겠습니다. html의 구조와 css는 어제 와 비슷해서 올리지는 않았습니다. 오늘은 자바스크립트 위주로 설명드릴려고합니다. 현재 페이지는 사용자가 답을 적으면 답을 적는 박스와 버튼이 사라지면서 답과 팁이 나오고 강아지의 표정이 바뀌는 페이지입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 jo0132@naver.com 이렇게 코딩합니다. 그중 javascript를 따로 이야기해보겠습니다. const quizWrap = document .querySelector(".quiz__wrap") const quizTitle = quizWrap .querySelector..

오늘은 강아지가 나오는 퀴즈화면을 만들어 보았습니다. reset.css 리셋은 먼저 제가 제작하려는 사이트들의 기본 셋팅을 의미합니다. 이번에는 csss파일로 만들어 제작하였습니다. @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/elice/EliceDigitalBaeum.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; columns: #222; } ..

01. 디자인 우선 피그마로 디자인을 만들어 보았습니다. 기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다. 그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다. 02.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침이 주는 효과 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 전압을 회수하면 하루가 점점 늘어나고 기억력이 좋아지고, 몸의 대사 기능도 빨라집니다. 에너지 충전 아침밥은 에..

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. 배열 : 데이터 불러오기 배열 안에 저장된 데이터를 불러오는 방법입니다. { const arr = [100, 200,"javascript"]; console.log(arr[0], arr[1], arr[2]); } 100 200 javascrip..