천사님 밥 친구해요

마우스 효과 2번째 완성본 HTML 삽입 미리보기할 수 없는 소스 마우스 효과 2번째 이동 이번 작업은 2개의 div가 마우스를 따라오는 형태입니다. HTML코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 Set a goal and try to achieve it. Don't be afraid of failure and try more. 목표를 세우고 그것을 이루기 위해 노력하라. 실패를 두려워하지 말고 더 많이 시도하라 mailto:skadldldl123@gmail.com 코드설명 1. div태그 중 .mouse__wrap은 "마우스를 따라다니는 div태그 2개와" / "가운데에 들어가는 Text"를 담고 있습니다. 2. .mouse__curso..

마우스 효과 1번 완성본 HTML 삽입 미리보기할 수 없는 소스 완성본 주소 마우스가 움직이면은 제작한 모양이 마우스를 따라오는 효과를 만들어봤습니다. HTML코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 To accomplish the impossible, let's start with the possible. 불가능한 일을 해내려면, 가능한 일부터 시작 하자 clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px mailto:skadldldl123@gmail.com 코드설명 1. div태그 .mouse__c..

이미지 텍스트 유형1 완성본 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 보기 이번에는 기존 section태그와는 다르게 가상태그(before, after)를 사용하여 만들었습니다. HTML+CSS코드 NOTICE 치킨의 종류 후라이드 치킨 바삭하고 고소한 맛이 좋다는 것: 후라이드 치킨은 바삭하고 고소한 맛이 특징입니다. 특히, 바삭한 피부와 부드러운 고기의 조화로 인해 많은 사람들이 즐기는 음식입니다. 더보기 양념 치킨 맛있다는 것: 양념 치킨은 매운 맛과 달콤한 맛이 조화로워서 많은 사람들에게 인기가 있습니다. 특히, 매운 맛을 좋아하는 사람들에게는 더욱 좋은 선택이 됩니다. 더보기 간장 치킨 고소하고 짭쪼름한 맛이 좋다는 것: 간장치킨은 간장과 고추장을 사용하여 고소하고 짭쪼름한 맛을 내..

퀴즈 4번 완성된 모습 HTML 삽입 미리보기할 수 없는 소스 완성된 페이지 주소 퀴즈 4번은 radio버튼으로 만든 것들을 클릭하고 그거에 대한 "정답"과 "오답"을 보여줍니다. HTML코드 정답입니다. 틀렸습니다. 정답 확인하기 설명 mailto:skadldldl123@gmail.com 코드 설명 이번에는 raio버튼을 통해서 선택을 하는 퀴즈 입니다. 1. main태그 안에는 퀴즈에 들어가는 "문제 번호", "문제 내용", "강이지 이미지", "radio 버튼"이 있습니다. 2. div태그 중 .quiz__header에 있는 h2태그 .quiz__title에는 "시험 종목"과 "회차"가 나옵니다. 3. div태그 중 .quiz__main에는 "문제 번호", "문제 내용", "강이지 이미지", "ra..

01. 결괏값을 작성하시오. (function(){ console.log("함수가 실행되었습니다."); })(); 답 : 함수가 실행되었습니다. 설명 : 즉시 실행 함수입니다. 제일 처음에 인터넷 로딩시에 시작이 됩니다. 02.결괏값을 작성하시오. function func(str = "함수가 실행되었습니다."){ document.write(str); } func(); 답 : 함수가 실행되었습니다. 설명 : ES10에서 도입한 파라미터 함수입니다. 자바스크립트도 매개변수에 직접 데이터를 할당 할 수가 있습니다. 03.결괏값을 작성하시오 let sum = 0; for(var i=1; i num2) return num1 else return num2 } console.log(func(10, 23) + func..

학원을 다닌지 이제 23일차가 되었다 HTML, CSS로 작업 한 것들을 하나로 합치는 작업을 하고 난뒤 보니간 뭔가 뿌듯하다. 학원이 내가 예상한 것보다 빡센 느낌이다..... 선생님이 너무 열정적이라 좋은건지 나쁜건지 모르겠다. 그래도 그덕분에 뭔가 배우면 안까먹는 장점이있다. 그리고 정말 세세하게 알려준다. 활용하는 방법, 사용 방법, 그리고 그것들을 합쳐서 만드는 방법까지 괜찮다. 근데. 너무 학원이 빡세다. 학원 근처가 직장인들이 많이 있어서 그런지 가격이 상당히 비싸다.. 맛도 별로다. 자주 찾아가던 순대국밥집이 20일차쯤에 문을 갑자기 닫았다.. 먹을 곳이 없어졌다... 진짜다. 점심시간 50분만에 주위에서 먹어야하는데. 갈데가 없다. 얼릉 많이 배워서 뭔가 만들고 싶다.

1.완성본 완성본 주소 이번에는 section부분이 아닌 슬라이드 부분을 제작하였습니다. 근데 아직 자바스크립트 코드는 없습니다. 그래서 닷버튼, 재생 버튼, 정지 버튼, 다음 버튼, 이전 버튼이 작동이 안됩니다. 아직은 배우는 중이라 HTML, CSS로 만들어 봤습니다. 2.슬라이드 코드 DOCTYPE html> 슬라이드 유형01 /* reset */ * { padding: 0; margin: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { /* 이미지 적용시 여백이 남았을때 사용 해야함. */ vertical-align: top; } /* 시각장애인(웹표준) */ .bl..

1.완성본 완성본들 모아놓은 주소 section 1번, 2번에 썻던거 3번 반복하네요. 이번에도 section태그 3번째 작업물입니다. 2.HTML&CSS코드 NOTICE 맛있는 빵 다양한 종류 빵은 매우 다양한 종류가 있지만, 여기에 몇 가지 대표적인 빵의 종류를 나열해 보겠습니다. 1.식빵 (White bread): 밀가루, 물, 효모, 설탕 등을 사용하여 만든 기본적인 빵으로, 부드러운 식감과 담백한 맛이 특징입니다. 2.프렌치 빵 (French bread): 프랑스에서 유래한 빵으로, 밀가루, 물, 효모, 소금을 사용하여 만들며, 바삭한 외피와 쫄깃한 내용물이 특징입니다. 3.베이글 (Bagel): 유대인 커뮤니티에서 유래한 빵으로, 매우 밀도가 높은 반죽으로 둥글게 만들어져, 끓는 물에 찐 후 ..

1. MySQL로 테이블 생성하기.(회원 정보를 넣기 전에 해야 할 일) 먼저 데이터 베이스를 생성하고 생성한 데이터 베이스를 지정해야합니다. 그리고 테이블을 생성합니다. 테이블을 생성합니다.(create table 테이블 이름;) create table member( memberID int(10) unsigned auto_increment, youEmail varchar(40) NOT NULL, youName varchar(10) NOT NULL, youPass varchar(20) NOT NULL, youBirth int(10) NOT NULL, youAge int(5) NOT NULL, regTime int(30) NOT NULL, PRIMARY KEY(memberID) ) charset=utf8;..

HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 학원에서 여태까지 스타일 변경이나 클릭 이벤트 관련해서 1개씩 손으로 타이핑 하면서 작업을 했습니다. quiz웹사이트3부터는 for문과 forEach문으로 스타일이나 클릭 이벤트를 적용하는 방법을 배웠습니다. 1.HTML 코드 Quiz객관식 확인하기 유형 1 2 3 4 정답입니다. 틀렸습니다. 정답 확인하기 설명 mailto:skadldldl123@gmail.com 코드설명 ★퀴즈01, 02의 HTML과 비슷합니다. (다른것은 문제가 3개 출력되는거라 "2번"이 총 3개 만들어집니다.) 1. main태그는 위에 완성본 이미지 전부를 담아줍니다. 2. div태그를 4개로 나누기 전에 이것들을 전부 담아 줄 / .quiz인 div태그를 생성합니다. ..

1.데이터베이스 보기 show databases; 생성된 데이터베이스를 확인할 수 있습니다. +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | sys | +--------------------+ 4 rows in set (0.01 sec) 2.데이터베이스 만들기 create database 이름(sample01); 데이터베이스를 생성 합니다. create database sample01; Query OK, 1 row affected (0.00 sec) mysql> show databases; +--------------------+ | Databa..

1.객체 : 데이터 불러오기 : hasOwnProperty() 객체에 상속되지 않은 속성 이름인 경우 true를 반환합니다. 이 메서드는 객체가 특정 프로퍼티를 갖고 있는지 확인할 때 사용됩니다. const obj = { a: 100, b: 200, c: "javascript" }; // 데이터가 있으면 true / 없으면 false console.log(obj.hasOwnProperty("a")); console.log(obj.hasOwnProperty("b")); console.log(obj.hasOwnProperty("c")); console.log(obj.hasOwnProperty("d")); console.log("a" in obj); console.log("b" in obj); console...

2번째 웹퍼블리싱 작업 결과 퍼블리싱 작업 결과 링크 코드 DOCTYPE html> 피그마1 /* reset */ * { padding: 0; margin: 0; } a { text-decoration: none; color: #000; } h1,h2,h3,h4,h5,h6 { font-weight: normal; } img { /* 이미지 적용시 여백이 남았을때 사용 해야함. */ vertical-align: top; width: 100%; } /* common */ .container { width: 1160px; margin: 0 auto; padding: 0 20px; /* background-color: rgba(0,0,0,0.3); */ } .nexon { font-family: "NexonLv..

1. 결괏값을 작성하시오 if( null ){ console.log("true"); } else { console.log("false"); } 정답 : false 설명 : false문은 0, null, undefined, "", false가 있습니다. 2. 결괏값을 작성하시오 let num = 0; while( num 6 ){ break; } console.log(num); } 정답 : 1, 2, 4, 5, 6 설명 : num이 3가 똑같다면 멈췄다가 시작합니다.(3 제외) num이 6과 비교할때 크다면 멈춥니다. 7. 결괏값을 작성하시오 for(let i=1; i { const str = "함수가 실행되었습니다."; return str; } console.log(func()); 정답 : 함수가 실행되었..

비트연산자 설명 비트 연산자는 컴퓨터 프로그래밍에서 비트(bit) 단위로 데이터를 다루는 연산자입니다. 비트 연산자는 이진수(bit)를 다룰 때 사용됩니다. 비트 AND 연산 (&): 두 비트가 모두 1일 경우에만 결과값이 1이 되는 연산입니다. 예를 들어, 1010과 1100을 AND 연산하면 1000이 됩니다. 비트 OR 연산 (|): 두 비트 중에 하나라도 1일 경우 결과값이 1이 되는 연산입니다. 예를 들어, 1010과 1100을 OR 연산하면 1110이 됩니다. 비트 XOR 연산 (^): 두 비트 중에 하나만 1일 경우 결과값이 1이 되는 연산입니다. 예를 들어, 1010과 1100을 XOR 연산하면 0110이 됩니다. 비트 NOT 연산 (~): 비트를 반대로 뒤집는 연산입니다. 0은 1로, 1..

퀴즈사이트 2번째 완성본 HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 링크 이번에는 "text"에다가 내용을 입력하고. "정답 확인하기" 버튼을 클릭하면 "정답"과 "오답"을 알려줍니다. HTML코드 Quiz정답 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 mailto:skadldldl123@gmail.com 코드설명 ★퀴즈01 HTML과 비슷합니다.(다른것은 8번부터입니다.) 1. main태그는 위에 완성본 이미지 전부를 담아줍니다. 2. div태그를 4개로 나누기 전에 이것들을 전부 담아 줄 / .quiz인 div태그를 생성합니다. 3. div태그 중 .quiz__header는 자바스크립트를 이용해서 "웹디자인 기능사 2012년 1회 기출" 이라고 들어갈 부분입니다. 4. div태그..

HTML 삽입 미리보기할 수 없는 소스 완성된 사이트 주소 완성된 사이트 웹디자인 기능사 기출문제를 내용에 작성을 합니다. 그리고 "정답 확인하기" 버튼을 클릭하면 답이 나옵니다. HTML 코드 Quiz . 정답 확인하기 연변대비 mailto:skadldldl123@gmail.com 코드 설명 1.main태그는 위에 완성본 이미지 전부를 담아줍니다. 2.div태그를 4개로 나누기 전에 이것들을 전부 담아 줄 / .quiz인 div태그를 생성합니다. 3.div태그 중 .quiz__header는 자바스크립트를 이용해서 "웹디자인 기능사 2012년 1회 기출" 이라고 들어갈 부분입니다. 4.div태그 중 .quiz__main은 div태그 3개(문제, 그림, 정답)를 담아줍니다. 5.div태그의 .quiz__m..

첫 웹퍼블리싱 작업 결과물 퍼블리싱 작업 결과 링크 코드 DOCTYPE html> 카드 유형01 /* reset */ * { padding: 0; margin: 0; } a { text-decoration: none; color: #000; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } img { /* 이미지 적용시 여백이 남았을때 사용 해야함. */ vertical-align: top; } /* common */ .container { width: 1160px; margin: 0 auto; padding: 0 20px; /* background-color: rgba(0,0,0,0.3); */ } .section.center{ text-align: center;..

01. 변수 : 데이터 불러오기 변수 x, y, z를 선언하고 데이터를 저장함 let x = 100, y = 200, z = "javascript"; //저장된 데이터를 호출 함. console.log(x, y, z); 정답 : 100, 200, javascript 02. 상수 : 데이터 불러오기 //변수 x, y, z를 선언하고 데이터를 저장함 const x = 100, y = 200, z = "javascript"; //저장된 데이터를 호출 함. console.log(x, y, z); 정답: 100, 200, javascript 03. 배열 : 데이터 불러오기 //[] : 배열을 생성 후 안에 데이터를 저장함. const arr = [100, 200, "javascript"]; //배열에 저장된 데이..

1.for문으로 table 실행 시키고 그중 5의 배수는 "빨간색"으로 출력하기 학원에서 table 태그를 배웠습니다. 그리고 학원에서 활용을 하라고 숙제를 내주었습니다. 알려준 table태그에 3의 배수만 출력하고. 5의 배수는 color를 입히라는 숙제였습니다. 여태까지 학원에서 알려준 짝수, 홀수 출력을 합쳐서 만들어봤습니다. HTML 삽입 미리보기할 수 없는 소스 코드설명 1.table 태그를 변수에 할당 합니다. 2.그리고 number을 선언합니다.(이값은 나중에 3의 배수를 저장할 값) 3.for 중첩문으로 10x10으로 반복하게 합니다. 4.그리고 number은 +3씩 더해서 3의 배수가 출력되게 해줍니다. 5.if문을 통해서 5로 나누고. 나머지가 0이면 5의 배수이니간 "color: re..

1. 빈칸을 채우십시오. var x = 100; var y = 200; var z = "javascript"; console.log(채우시오); console.log(채우시오); console.log(채우시오); 정답 : 100, 200, javascript 2. 빈칸을 채우십시오. let x = 100; let y = 200; let z = "javascript"; x = (채우시오) y = (채우시오) z = (채우시오) console.log(x); // 300 console.log(y); // 400 console.log(z); // jquery 정답 : x+y, y+200, jquery 3. 빈칸을 채우십시오. let x = 100; let y = 200; let z = "javascript"; ..

3월2일 학원 다닌지 3주차가 되었다. 시간이 금새금새 가는 듯 하다. 벌써 1달 다되간다니 이제 슬슬 학원에서도 퍼블리싱이랑 피그마를 조금씩 사용하기 시작했다. 얼릉 퍼블리싱이랑 피그마 본격 수업 시작했으면 좋겠다. ㅎㅎ

문자 관련 스타일 설명 CSS에서는 문자에 대한 스타일을 다양하게 지정할 수 있습니다. 주요한 문자 관련 속성들은 다음과 같습니다. color: 문자의 색상을 지정합니다. font-family: 문자의 폰트를 지정합니다. font-size: 문자의 크기를 지정합니다. font-weight: 문자의 두께를 지정합니다. line-height: 행간을 지정합니다. text-align: 텍스트의 수평 정렬 방법을 지정합니다. text-decoration: 텍스트에 밑줄, 취소선 등의 장식을 추가합니다. text-transform: 텍스트의 대문자/소문자 변환을 지정합니다. letter-spacing: 문자 간격을 지정합니다. word-spacing: 단어 간격을 지정합니다. text-shadow: 텍스트에 그림..

grid에 대해 알아보자 원하는 레이아우을 먼저 스케치하고 그것을 위해 필요한 속성을 추가하는 방식입니다. 현재 IE에서는 지원하고 있지 않으니 Chrome이나 firefox 또는 opera 최신버전에서 확인이 가능합니다. grid 요약설명 grid 속성은 CSS Grid Layout을 사용하여 요소의 레이아웃을 지정하는 데 사용됩니다. 이 속성은 요소의 부모 컨테이너에 적용되며, 이 컨테이너를 그리드 컨테이너라고합니다. grid 속성에는 grid-template-rows, grid-template-columns, grid-template-areas, grid-template, grid-row-gap, grid-column-gap, grid-gap, grid-auto-rows, grid-auto-colu..

flex에 대해 알아봅시다 Flex는 요소를 수평 또는 수직으로 배열하는 데 사용할 수 있으며, 요소들 사이의 간격, 정렬 및 분배를 지정할 수 있습니다. Flex를 사용하면 HTML, CSS, JavaScript를 사용하여 요소들의 레이아웃을 더욱 유연하게 조정할 수 있습니다. Flex 레이아웃은 부모 요소에 대한 display 속성의 값으로 'flex'를 설정하여 만들 수 있습니다. 이후 flex 컨테이너 요소의 자식 요소들은 flex 아이템이 되며, 이 아이템들은 flex-direction, justify-content, align-items 및 align-self 속성을 사용하여 컨테이너 요소 내에서 배치됩니다. Flex는 반응형 웹 디자인 및 모바일 애플리케이션 개발에 특히 유용합니다. Flex..

float이 뭘까? 웹페이지를 제작하다보면 가로(위 -> 아래)로 정렬이 됩니다. 이때 정렬 해주는 명령어 중 하나인 float이 있습니다. block요소는 원래 세로로만 나열이 되지만 float을 이용하여 가로로 배치할 수 있습니다. 밑에서 float을 지정하는 방법 + float 해제하는 방법도 나열해보도록 하겠습니다. float을 적용해보자 float은 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float 속성 1. left : 요소를 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 2. right : 요소를 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 3. flo..

조건문 사용하는 이유!!! 코딩을 하다보면 무조건 코드를 실행 시키는 것이 아니라 특정 조건을 걸고 그 조건에서 실행을 해야하는 경우가 많습니다. 이때 조건문을 사용하면 내가 원하는 조건이나 타이밍에 코드를 실행 시킬 수 있습니다. 프로그램의 유연성 향상: 조건문을 사용하면 프로그램이 다양한 조건에 대해 반응할 수 있습니다. 이를 통해 프로그램의 유연성이 향상되고 더 많은 상황에서 사용할 수 있습니다. 효율적인 문제 해결: 조건문을 사용하여 프로그램은 특정 조건에 따라 다른 작업을 수행할 수 있습니다. 이를 통해 특정 문제에 대한 효율적인 해결 방법을 제공할 수 있습니다. 코드의 가독성 향상: 조건문은 코드의 가독성을 높일 수 있습니다. 조건문을 사용하면 프로그램의 흐름이 명확해지며, 다른 사람이 코드를..

1. 사용자에게 입력 받은 것들을 숫자면 양수, 마이너스면 음수, 글씨는 문자열로 출력하기 수업시간에 배운 변수, 상수, 조건문, 함수를 사용하여 만들었습니다. 처음에는 힌트로 prompt를 사용하라는 말을 듣고 당황했습니다. 어떻게 양수, 음수, 문자열을 비교할까?? 20분 정도 고민해보니간.... 0보다 작으면 음수고. 0보다 크면 양수잖아??? 라고 생각이 갑자기 들어서 조건문을 걸어서 실행해보니 출력이 되었습니다. //사용자로부터 값을 입력 받습니다. let user = prompt("숫자를 입력하세요"); //입력 받은 값을 정수로 변환합니다. let number = parseInt(user); //if문의 조건이 만족되면 매개변수로 값을 받고 반환 중입니다. function func(a) { ..

1.함수 사용 방법 function 함수명() { 코드 } 함수 선언시에 function이라는 예약어를 사용합니다. 함수 이름을 적습니다. 중괄호 안에 실행할 여러개의 명령어를 묶습니다. 함수를 사용하는 이유 자바스크립트 프로그램은 단순히 하나의 동작만 하는게 아니라 여러가지 동작이 연결되어 실행이 됩니다. 동작해야 할 목적대로 여러개의 명령을 묶는 것을 "함수"라고 합니다. 소스를 함수로 분리 넣으면 필요할 때마다 원하는 기능만 따로 실행할 수도 있고. 같은 기능이 필요한 다른 곳에서 다시 사용할 수도 있습니다. 2.선언적 함수 선언적 함수(declarative function)는 함수를 선언할 때 함수 이름과 함께 function 키워드를사용하여 함수를 선언하는 방법입니다. 예를 들어, 다음은 add..

1.type 선택자 type 선택자는 HTML 요소의 유형을 기반으로 스타일을 적용합니다. 예를 들어, 모든 h1 요소에 대해 글꼴 크기를 32px로 지정하려면 다음과 같이 작성할 수 있습니다. h1 { font-size: 32px; } 2.ID 선택자 CSS에서 id 선택자는 특정 id 속성을 가진 요소를 선택합니다. 선택자는 # 기호 뒤에 id 이름을 적어줍니다. 예를 들어, #my-id는 id="my-id"인 요소를 선택합니다. #my-id { font-size: 35px; } 3.CLASS 선택자 .class 선택자는 HTML 요소들 중에서 특정 클래스 이름을 가진 요소들을 선택할 때 사용됩니다. 선택자 앞에 .을 붙여서 사용하며, 선택자의 이름은 클래스 이름과 동일합니다. 예를 들어, CSS의 ..