qqqwe

사이트 만들기 텍스트 유형편 보더콜리를 주제로 한 사이트 텍스트 유형 부분입니다. 기준선과 레이아웃 그리드는 카드, 이미지, 슬라이드 유형과 동일합니다. 피그마 디자인 아래는 코드로 만든 과정입니다. HTML notice 보더콜리의 어두운면 참을 수 없는 지루함 보더콜리는 매우 지능적인 개 종 중 하나이지만, 충분한 정신 자극이 부족하면 지루함을 느끼게 됩니다. 이는 보더콜리가 학습 능력을 잃게 만들 수 있습니다. 더보기 운동 부족 시 파괴적인 행동 보더콜리는 매우 활발하고 에너지가 많기 때문에 충분한 운동이 제공되지 않을 경우 이러한 에너지를 적절하게 소비하지 못하게 되어 파괴적인 행동을 할 가능성이 있습니다. 더보기 필요 이상의 충성심 보더콜리는 사육 개체와 밀접한 관계를 형성하여 강아지 복종성에 대..

퀴즈 사이트 만들기 지난번에 이어 퀴즈 이펙트 4번을 만들어 보겠습니다. VS코드로 HTML, CSS, JAVASCRIPT를 이용해 사이트를 만들었습니다. HTML Quiz 주관식 확인하기 유형 1 2 3 4 정답입니다! 틀렸습니다! 정답 확인하기 JAVASCRIPT 자바스크립트 설명 선택자 document.querySelector(".quiz__wrap")은 querySelector 메서드를 이용하여 HTML 문서에서 CSS 선택자 .quiz__wrap을 가진 첫 번째 요소를 선택하고, 그 요소를 quizWrap 변수에 할당합니다. 이렇게 변수에 할당된 요소는 JavaScript를 이용하여 조작할 수 있습니다. quizWrap.querySelector(".quiz__title")은 querySelect..

자바스크립트 오답노트 01. 결괏값을 작성하시오. { (function(){ console.log("함수가 실행되었습니다."); })(); } 정답 함수가 실행되었습니다. 해설 즉시 실행 함수(IIFE)를 사용하여 함수를 선언과 동시에 실행시켰기 때문에 "함수가 실행되었습니다."가 출력됩니다. 02. 결괏값을 작성하시오. { function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); } 정답 함수가 실행되었습니다. 해설 함수 선언식으로 func 함수를 선언하고, 매개변수로 기본값 "함수가 실행되었습니다."을 설정합니다. func 함수를 호출할 때 인자를 전달하지 않았으므로 기본값이 출력됩니다. 03. 결괏값을 작성하시오. { let sum =..

함수 공부 오전 시간에는 함수 유형에 대해서 배웠습니다. 지금까지 배워왔던 함수들에 대해서 복습하고 새로운 함수들에 대해서 배우는 시간을 가졌습니다. 선언적 함수/화살표 함수로 전환 { func = () => { document.write("실행되었습니다.") } func(); } 익명 함수/화살표 함수로 전환 { const func = () => { document.write("함수가 실행되었습니다."); } func(); } 매개 변수 함수/화살표 함수로 전환 { func = (str) => { document.write(str); } func("실행되었습니다."); } 리턴값 함수/화살표 함수로 전환 { func = () => { const str= "실행되었습니다."; return str; } d..

사이트 만들기 슬라이드 유형편 보더콜리를 주제로 한 사이트 슬라이드 부분입니다. 기준선과 레이아웃 그리드는 카드, 이미지 유형과 동일합니다. 피그마 디자인 아래는 코드로 만든 과정입니다. HTML 메인 슬라이드 영역 Loyal 충성심 보더콜리는 주인과의 유대관계를 매우 중요하게 생각하며, 충실하게 따르는 경향이 있습니다. 높은 지능과 민첩성을 지니고 있어서, 주인의 지시에 따라 다양한 일을 수행할 수 있습니다. 그러나 외로움을 잘 타기 때문에, 충분한 관심과 애정이 필요합니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 CSS css 코드 설명 background-position: 배경 이미지의 위치를 지정하는 속성입니다. x축 y축의 값을 이..

이미지/텍스트 유형 만들기 사이트에서 이미지/텍스트 부분을 피그마로 디자인 하고 코드로 만들어 보았습니다. 피그마 디자인 CSS HTML notice 보더콜리의 키워드 보더콜리는 많은 장점들을 가지고 있는 강아지 입니다. 보더콜리를 보았을때 생각나는 키워드들은 정말 많죠 스마트 (Smart) 민첩 (Agile) 활발 (Energetic) 경주 개 (Racing dog) 지능적 (Intelligent) 높은 학습 능력 (High learning ability) 반응 속도 (Quick reaction time) 허드링 (Hurdling) 양치기 (Herding) 농장 개 (Farm dog) 코드 설명 flex-wrap: wrap; 속성은 Flexbox 컨테이너 내의 아이템들이 한 줄에 모두 표시되지 않고 여..

세번째 퀴즈 사이트 세번째로 만들게된 퀴즈 사이트입니다. 주관식 형식이며 답을 맞추게 되면 가운데 화면같이 강아지가 웃으며 정답 문구가 흔들리는 모션과 함께 출력되고, 틀리게 되면 왼쪽 화면과 같이 강아지가 슬퍼하며 틀렸다는 문구가 흔들리는 모션과 함께 출력됩니다. 완성된 모습 코드 Quiz 주관식 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 kshkmn0929@naver.com 자바스크립트 부분 // 선택자 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelectorAll(".qu..

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

퀴즈 이펙트 복습 퀴즈 이펙트 02 부분 const quizWrap = document.querySelector(".quiz__wrap"); const quizTitle = quizWrap.querySelector(".quiz__title span"); const quizTime = quizWrap.querySelector(".quiz__title em"); 이 코드는 JavaScript를 사용하여 HTML 문서의 클래스 이름이 "quiz__wrap"인 요소와 그 하위 요소들을 가져오는 것입니다. querySelector 메서드는 해당 선택자에 해당하는 첫 번째 요소를 반환합니다. 따라서 quizWrap 변수는 클래스 이름이 "quiz__wrap"인 요소를 나타냅니다. 그리고 quizWrap 변수를 사용..

사이트 만들기 이미지 유형편 보더콜리를 주제로 한 사이트 이미지 부분입니다. 카드 유형과 동일한 레이아웃 그리드를 잡아주었고, 기준선들을 잡아 주었습니다. 피그마에서 완성된 디자인입니다. 이제 코딩으로 만들었을때 코드입니다. CSS CSS 코드 설명 margin: 요소의 바깥쪽 여백을 지정합니다. 개별적으로 margin-top, margin-right, margin-bottom, margin-left 등을 지정할 수 있습니다. padding: 요소의 안쪽 여백을 지정합니다. 개별적으로 padding-right, padding-bottom, padding-left 등을 지정할 수 있습니다. text-decoration: 텍스트의 장식 효과를 지정합니다. underline, overline, line-thr..

01. 결괏값을 작성하시오. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 1,2,3,4,5,6 02. 결괏값을 작성하시오. ( X ) { let num = 0; while( num 6 ){ break; } console.log(num); } } 정답 1,2,3,4,5,6 풀이 위 코드는 while 루프를 사용하여 num 변수를 1부터 증가시키면서 continue와 break 문을 사용하여 3을 건너뛰고 6을 초과하면 루프를 종료하는 코드입니다. 루프가 실행될 때마다 num 값을 출력합니다. 07. 결괏값을 작성하시오. { for(let i=1; i { const str = "함수가 실행되었습니다."; return str..

두번째 퀴즈 만들기 첫번째 퀴즈 만들기에 이어 두번째로 만들게 된 퀴즈 사이트입니다. 문제를 맞추면 위처럼 나오는 화면을 문제를 틀리면 위처럼 나오는 화면을 출력합니다. 코드 코드 설명 선택자 부분 const quizWrap = document.querySelector(".quiz__wrap"); 이 코드는 class가 "quiz__wrap"인 첫번째 DOM 요소를 찾아 quizWrap 변수에 할당합니다. querySelector 메소드는 주어진 선택자와 일치하는 첫 번째 요소를 반환합니다. const quizTitle = quizWrap.querySelector(".quiz__title span"); 이 코드는 quizWrap 내부에서 class가 "quiz__title"인 요소를 찾고 그 하위의 sp..

퀴즈 사이트 만들기! 강아지 참고 사이트 위 사이트는 강아지가 중앙에서 꼬리를 흔들고 있고, 정답 확인하기를 누르면 정답 텍스트로 전환 됩니다. 코드 Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 kshkmn0929@naver.com 자바스크립트 각 주석에 대한 설명입니다. 선택자 querySelector() 메서드를 사용하여 HTML 문서 내에서 지정된 클래스를 가진 요소를 선택합니다. 예를 들어, .quiz__wrap 클래스를 가진 요소를 quizWrap 변수에 할당합니다. 문제 정보 infoType, infoTime, infoNumber, infoQuestion, infoAnswer 변수에 각각 문제 유형, 시험 년도, 문제 번호, 문제 내용, 정답을 저장합니다. 문제 출력 선택된 요소들의..

사이트 만들기 저는 보더콜리를 주제로 하여 사이트를 디자인 해보았습니다. 1. W1920 H932의 프레임을 만들어 주었고 2. Columns 유형, 갯수는 12, 간격은 380 기준의 그리드를 넣어 주었습니다. 3. 위 사진 기준선들을 기준으로 사진이 들어갈 자리와 문구들을 적어 넣었습니다. 완성된 모습 이제 이 디자인 코딩하여 만들었을때 코드입니다. CSS css 코드 설명 margin: 요소의 바깥쪽 여백을 지정합니다. margin-top, margin-right, margin-bottom, margin-left 등과 같이 개별적으로 지정할 수도 있습니다. padding: 요소의 안쪽 여백을 지정합니다. padding-right, padding-bottom, padding-left 등과 같이 개별적..

01. 변수 : 데이터 불러오기 변수안에 저장된 데이터를 불러오는 방법입니다. var x = 100; //변수 x에 숫자 100을 저장함 var y = "200"; //변수 y에 문자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); 100 200 javascript 02. 상수 : 데이터 불러오기 상수안에 저장된 데이터를 불러오는 방법입니다. const x = 100, y = 200, z = "javscript"; console.log(x, y, z); 100 200 'javascript' 03. 배열 : 데이터 불러오기 배열 안에 데이터를 불러오는 방법입니다...

01. for문을 이용해서 1~8까지 출력 for(let i=1; i { document.write("함수가 실행되었습니다."); } func(); } 07. 익명 함수 (화살표 함수로 변환) 익명 함수는 이름이 없는 함수로, 변수에 할당될 수 있습니다. 함수 표현식이라고도합니다. 익명 함수는 함수 표현식에서 사용되는 것이 일반적입니다. { const func = function(){ document.write("함수가 실행되었습니다."); } func(); } // 화살표 함수 { const func = () => { document.write("함수가 실행되었습니다."); } func(); } 08. 매개 함수 (화살표 함수로 변환) 매개 함수는 다른 함수 내에서 호출되는 함수로, 매개 변수를 통해 ..

01. forEach() 배열 객체의 메서드 중 하나입니다. 이 메서드를 사용하면 배열의 각 요소에 대해 콜백 함수를 실행할 수 있습니다. array.forEach(function(element, index, array) { // 콜백 함수에서 수행할 코드 }); element: 현재 처리 중인 배열 요소의 값 index: 현재 처리 중인 배열 요소의 인덱스 값 array: forEach() 메소드를 호출한 배열 자체 예를 들어 다음과 같이 사용할 수 있습니다. { const str = [100, 200, 300, 400, 500]; str.forEach((element, index, array) =>l { document.write(element); document.write(index); docume..

01. 다음의 출력값을 보고 빈칸을 채우시오! ( X ) { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 풀이 var 변수를 사용하여 x, y, z에 값을 할당 해주고 console.log();로 실행하는 방법입니다. //100과 //200은 빈칸에 x와 y를 차례대로 넣고 마지막 실행문에는 x + y를 하여 더해주면 됩니다. 마지막 실행문에 300이라 적혀 있지 않고 당연히 z값을 부를 거라 생각 하여 답을 적어 틀렸습니다. 02. 다음의 출력값을 보고 빈칸을 채우시오! { let x = 100; let y = 200; let z = "..

양수 음수 구하기 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. let num = prompt("숫자를 입력하세요.") num1 = () => { if(num>0){ document.write(num+"은(는) 양수입니다."); } else if(num

문자 관련 스타일 01. font-family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Helvetica, sans-serif ; 02. font-size, 단위의 고찰 문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. CSS에서 유용하게 사용하는 단위에는 다음과 같은 것들이 있습니다. ▶px 해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다. font-size: 12px; ▶% 부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다..

flex flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex; display: -webkit-flex; display: -ms-flexbox; 위의 구문은 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예시 이미지 ▶ flex 지금은 float으로 세 개의 요소를 가로로 나열할 수 있습니다. flex로 구현한다면 다음과 같이 표현합니다. flex: 1; flex: 1;은 원래 flex: 1 1 0;의 줄인 표현입니다. 지금은 1 1 auto와도 같습니다. 또 1 1 100px와도 같죠. 앞이 1이면뒤가 뭐든 같은데, 이 세 값은 flex-grow, flex..

데이터 제어 자바스크립트에서 데이터 제어란, 변수, 배열, 객체 등과 같은 데이터를 생성하고 수정하며, 데이터를 검색하고 조작하는 것을 의미합니다. 이는 프로그램에서 데이터를 저장하고 처리하는 것이 중요한 이유로, 데이터를 제어하는 기능은 자바스크립트 프로그래밍에서 핵심적인 역할을 합니다. 01. if문 if 다음 소괄호에 조건을 표기하여 결괏값에 따라 답이 나오는 명령입니다. const x = prompt("당신이 좋아하는 숫자는 무엇입니까?"); if(x == 100){ document.write("당신은 100점짜리 인간이네요!"); } else if(x == 99) { document.write("당신은 99점짜리 인간이네요!"); } else if(x == 98) { document.write(..

함수 자바스크립트 함수는 하나 이상의 동작 또는 계산을 수행하는 코드 블록입니다. 함수는 코드의 재사용성을 높이고, 모듈화 및 추상화를 통해 코드를 관리하기 쉽게 만듭니다. 분류 종류 설명 사용자 정의 함수 ● 선언적 함수 ● 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다. 내장 함수 ● 인코딩, 디코딩 함수 ● 숫자 판별 함수 ● 유 . 무한 값 판별 함수 ● 숫자변환 함수 ● 문자 변환 함수 ● 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수입니다. 01. 선언적 함수 ▶ 선언적 함수의 형식 function 함수() { 실행문; } function compute() { console.log('선언적 함수')..

10보다 큰 숫자 찾기 수업 시간에 배운 배열을 이용하여 10보다 큰 숫자를 찾아내는 미션이다. 길라잡이 배열 요소의 개수만큼 for문을 반복한다. if문을 사용해서 요소의 값과 10을 비교한다. document.write 문을 사용해서 화면에 표시한다. 자바스크립트를 사용할 때 불편한점 마지막 세번째 방법입니다. 문제의 조건에 해당하는 숫자들만 직접 하나하나 출력한 모습입니다.마지막 세번째 방법입니다. 문제의 조건에 해당하는 숫자들만 직접 하나하나 출력한 모습입니다.마지막 세번째 방법입니다. 문제의 조건에 해당하는 숫자들만 직접 하나하나 출력한 모습입니다. 불편한점 제목3을 썼을 때는 디자인을 변경할거야!! 마지막 세번째 방법입니다. 문제의 조건에 해당하는 숫자들만 직접 하나하나 출력한 모습입니다.마지..

01. 변수 데이터 저장 변수는 데이터를 저장하는 값이고 변할 수 있습니다. { var x = 100; //변수 x에 숫자 100을 저장함 var y = "200"; //변수 y에 문자 200을 저장함 var z = "javascript"; //변수 z에 문자 "javascript"를 저장함 console.log(x); console.log(y); console.log(z); } 100 200 javascript Tip.여러 개의 변수를 선언할 경우 다음과 같은 방법으로 선언할 수 있습니다. var num, str, temp; var num = 10, str = 'javascript', temp = true 02. 변수 : 데이터 저장 + 데이터 변경 변수는 데이터를 저장 할수도 있지만 변경도 가능하다...

선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. CSS로 속성을 부여하는 형식은 다음과 같습니다. 이 예문은 h1 요소에 배경색을 노란색으로, 글자색을 빨간색으로 지정한다는 의미를 담고 있습니다. [] 안에 여러 속성을 지정할 수 있고, 각 속성 설정 간에는 ' ; ' 으로 구분해주며 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 속성은 가로로 붙여 써도 되고 다음과 같이 한 줄씩 따로 기술해도 무방합니다. type 선택자 HTML 문서의 태그 이름을 선택자로 사용할 수 있습니다. id 선택자 HTML 문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있습니다. HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 ..

어떤 조건에 따라 명령 실행 순서를 바꾸거나 특정한 부분만 계속해서 반복하려면 조건문이나 반복문을 사용해야 합니다. 조건문은 명령을 실행하기 위해 조건을 체크하는 문으로, 앞에서 공부한 논릿값, 비교 연산자 등이 중요하게 사용됩니다. if 문, if...else 문 프로그램 소스는 작성된 순서대로 명령을 실행하는 것이 아니라 조건에 따라 명령을 실행하는 경우가 많습니다. 그래서 프로그래밍에서 조건문은 자주 사용하게 됩니다. if 문 if 문은 if 다음에 소괄호를 사용해서 조건을 표기합니다. 그리고 조건을 체크한 후 결괏값이 true이면 if 문에 있는 명령(들)을, false이면 if 문에 있는 명령은 건너뛰고 그 다음 명령을 실행합니다. if문이란, if예약어의 다음에 오는 중괄호({ })로 묶은 명..

float block 요소는 원래 세로로만 나열되지만 float을 이용하여 가로로 배치할 수 있습니다. float은 레이아웃을 완성하기 위한 필수적인 속성이며 float을 지정하는 방법과 함께 float을 해제하는 방법도 알아두어야 나머지 레이아웃을 완성할 수 있습니다. float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스 브라우징 됩니다. 그러나 heading 요소나 인라인 요소들은 가로 사이즈 없이 float해도 레이아웃이 흐트러지지 않습니다. float: left; 속성 값 속성 설명 left 요소를 왼쪽에 배치하고 나머지 콘..

오늘은 자바스크립트 문제에 대해 풀어보려고 합니다. 문제1 제가 풀어본 첫번째 방법입니다. 주어진 배열의 숫자를 10보다 큰 숫자인 11부터 시작하여 2씩 더하여 출력한 모습입니다. const result =prompt("1보다 큰 숫자를 입력하세요.") let num=0; if(result

See the Pen Untitled by Kimdohyun2002 (@Kimdohyun2002) on CodePen. 코드팬을 사용하여 짝수와 홀수를 구별하는 프로그램을 HTML과 JAVASCRIPT를 이용하여 만들어 보았습니다.