코딩

오늘은 이미지텍스트 타입의 레이아웃을 만들어보겠습니다~!! 이미지텍스트 유형 페이지 만들기 피그마에서 만든 디자인을 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋 (CSS Reset)은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다.초기 설정을 해두면 폰트라던지 마진, 패딩값이 먹혀서 편하겠죠?? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 이미지텍스트 섹션 구성해주기 NOTICE 향수의 다양한 원료들 향수의 원료는 여러 가지가 있습니다. 이 중 몇 가지를 예로 들어보면 다음과 같습니다. 꽃: 장미, 라벤더, 철쭉, 백합, 오렌지 꽃 나무: 삼나무, 향나무, 피나무, 쟁반나무, 코나쥬 향신료: 고추, 크로뮴, 페퍼민트, 카르다몸..

오늘은 퀴즈 이펙트 세 번째를 작업해보겠습니다! 저번에는 정답인지 오답인지 판별하는 효과였다면 이번엔 여러 개의 주관식을 확인해보는 효과를 해보겠습니다! 두 번째에 했던 효과와 거의 흡사하지만 이번엔 여러 개가 있어 다중선택자를 사용해보겠습니다. 자바스크립트 퀴즈 이펙트(세 번째) 만들기 영역 지정해주기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 두 번째와 했던 것과는 다르게 문제가 3개이므로 quiz 영역을 복사해 3개로 만들어줍니다. 그리고 이번에 추가된 것은 맞췄을 시, 정답 혹은 오답인지 애니메이션 효과를 주기 위해 dog__wrap 밑부분에 영역을 넣어줍니다. 선택자 만들기 const quizWrap = doc..

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

오늘은 자바스크립트 함수 유형에 대해 복습해보겠습니다! 자바스크립트 함수 유형 👻함수 유형 : 함수와 매개변수를 이용한 형태 매개변수를 이용해 기본값을 지정하고 함수를 호출합니다. function func(num, str1, str2){ document.write(num +". "+str1+"가 "+str2+"되었습니다."); } func("1", "함수", "실행"); func("2", "자바스크립트", "실행"); func("3", "리액트", "실행"); 👻함수 유형 : 함수와 변수를 이용한 형태 변수를 이용해 기본값을 지정하고 함수를 호출합니다. function func(num, str1, str2){ document.write(num +". "+str1+"가 "+str2+"되었습니다."); } ..

오늘은 이미지 타입의 레이아웃을 만들어보겠습니다~!! 이미지 유형 페이지 만들기 피그마에서 만든 디자이늘 그대로 코딩해보도록 하겠습니다. 기본 CSS 리셋값 설정해주기 CSS 리셋(CSS Reset)은 웹 사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기 설정을 해두면 폰트라던지 마진, 패딩 값이 먹혀서 편하겠죠? 이런식으로 헤드 안쪽에 웹폰트와 스타일 선언을 해주어 기본 설정을 해줍니다. 그리고 바디 안쪽에 섹션들을 나누어주겠습니다. 바디 부분에 이미지 타입 섹션들을 지정해주고 CSS를 설정해줍니다. (제목, 설명글 등등) 구역을 잘 나눠주고 이름을 지정해줘야 나중에 CSS를 설정할 때 효율성이 좋습니다! section태그와 h2태그, p태그, div태그에 각각 class로 이름을 지..

오늘은 자바스크립트 시험 오답노트를 작성해보겠습니다!! 이번엔 정말 최악의 점수를 ... 😂😂 헷갈리는 문제도 넘 많았고 사실 공부를 열심히 안했습니다 👍🤣 틀린 문제를 꼼꼼하게 살펴보고 오답노트를 작성해보겠습니다!! 자바스크립트 오답노트 01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } ✔답 확인하기 false 02. 결괏값을 작성하시오. { let num = 0; while( num 6 ){ break; } console.log(num); } } ✔답 확인하기 12456 오답노트 num에는 변수 0을 설정해주고, while문과 if문을 이용해 반복문과 조건식을 걸어줍니다. num++을 먼저 실행하기..

오늘은 어제 이어서 다른 퀴즈 이펙트를 풀어보겠습니다! 어제는 정답만 나오는 퀴즈 효과였다면 이번엔 사용자가 답을 입력하고 정답인지 오답인지 판별하는 스크립트를 짜보겠습니다!! 자바스크립트 퀴즈 이펙트(두 번째) 만들기 어제와 비슷한 구조로 작업하겠습니다! 영역 지정해주기 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 yds43557340@gmail.com 완성된 화면과 페이지 https://yeodaseul4355.github.io/web2023/javascirpt/quiz/quizEffect02.html 도움이 되셨다면~~ 많은 공감과 댓글 부탁드립니다 ^__________^ 퀴즈 이펙트의 다른 유형 보러가기 퀴즈 이펙트 1: https://duektmf34.tistory.co..

자바스크립트 퀴즈 이펙트 만들기 오늘은 자바스크립트에서 배운 내용들을 기반으로 퀴즈 이펙트를 만들어보겠습니다~!! 완성화면은 이런 화면! CSS설정한 부분은 너무 길고 복잡하니 패스하겠습니다! 스크립트 부분만 짚고 넘어가겠어요 📝 선택자 만들기 // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); const quizQuestion = quizWrap.querySelector(".quiz__question span"); const ..