qqqwe

동적 사이트 만들기 메인 페이지 어떤 일이라도 노력하고 즐기면 그 결과는 빛을 바란다고 생각합니다. 신입의 열정과 도전정신을 깊숙히 새기며 배움에 있어 겸손함을 유지하며 세부적인 곳까지 파고드는 개발자가 되겠습니다. 코드 설명 include 함수: 다른 PHP 파일에서 코드를 가져올 때 사용하는 함수입니다. 이 코드에서는 ../connect/connect.php, ../connect/session.php, ../include/head.php, ../include/skip.php, ../include/header.php 파일을 가져와서 사용하고 있습니다. $_SESSION: PHP에서 제공하는 전역 변수 중 하나로, 웹 브라우저와 웹 서버 간에 데이터를 저장하는 데 사용됩니다. 이 코드에서는 session..

패럴렉스 효과 HTML Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 5 5 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 section1 늦었다고 생각할때가 정말 너무 늦었다. 그러니 지금 당장 시작해라. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 피할수 없으면 즐겨라 04 section4 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가? 05 section5 한번의 실패와 영원한 실패를 혼동하지 마라 06 section6 평생 살 것처럼 꿈을 꾸어라.그리고 내일 죽을 것처럼 오늘을 살아라. 07 section7 1퍼센트의 가능성..

명언 사이트 HTML CSS CSS 설명 @import 구문을 사용하여 폰트를 가져와서 font-family 속성에서 사용하고 있습니다. 이 폰트는 외부에서 가져온 것으로 추측됩니다. .wrap 클래스는 배경 이미지의 크기를 전체화면으로 늘리는 역할을 하고 있습니다. .main 클래스는 내부의 요소들을 중앙에 위치시키기 위해 display, justify-content, align-items 속성을 사용하고 있습니다. 이 클래스는 또한 글씨체, 크기, 색상 등을 지정하는 역할도 합니다. .author 클래스는 padding-top 속성을 사용하여 .main 클래스와 일정한 간격을 두고 있는 것으로 보입니다. 이 코드는 해당 웹페이지에서 .wrap, .main, .author 클래스가 사용되며, font-..

로또 번호를 추첨해주는 사이트 HTML 로또 번호 추첨기 추첨하기 CSS JAVASCRIPT JAVASCRIPT 설명 해당 코드는 HTML, CSS, JavaScript를 사용하여 로또 번호 추첨기를 구현한 것입니다. HTML 요소는 로또 번호 추첨기를 위한 구조를 만들어놓은 것으로, 랜덤한 번호를 생성하고 출력하는 부분은 JavaScript에서 구현되었습니다. JavaScript에서는 우선 querySelectorAll() 함수를 이용하여 HTML에서 class가 num인 요소들을 선택하였습니다. 이는 추후에 로또 번호를 출력할 때 필요한 요소입니다. 그리고 querySelector() 함수를 이용하여 HTML에서 button 요소를 선택하였습니다. 이 요소는 추첨 버튼이며, 클릭 시 로또 번호를 랜덤..

수시로 바뀌는 명언 사이트 HTML JAVASCRIPT / json const quotesURL = "../json/dummy01.json"; function func(){ fetch(quotesURL) .then(response => response.json()) .then(data => { const result = document.querySelector("#result"); const random = Math.floor(Math.random() * 30); // 0 ~ 29 사이의 수 result.querySelector(".quote").innerHTML = data.quotes[random].quote; result.querySelector(".author").innerHTML = ` - ${..

슬라이드 이펙트 일곱번째 HTML Javascript Slider Effect03 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 8 prev next kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT 설명 images 배열: 이미지 경로가 저장된 배열입니다. imageSlider() 함수: 슬라이더를 만드는 함수입니다. 인자로는 슬라이더를 감싸는 부모 요소와 이미지 경로를 저장한 images 배열을 받습니다. slider 객체: 슬라이더를 구성하는 요소들을 저장한 객체입니다. parent는 슬라이더를 감싸는 부모 요소를, images는 이미지를 출력할 요소를, thumnails는 썸네일을 출력할 요소를, prevBtn과 nextBtn은 이전..

슬라이드 이펙트 여섯번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 6 prev next 이미지1 CSS JAVASCRIPT JAVASCRIPT 설명 // 닷 버튼을 누르면 이미지 넘어가기 이미지 슬라이더에 있는 닷 메뉴를 클릭하면 해당 이미지로 이동하도록 하는 기능입니다. 설명을 자세히 보면, 먼저 init() 함수를 통해 이미지 갯수만큼 닷 메뉴를 생성하고, 첫번째 닷 메뉴에 'active' 클래스를 추가하여 활성화 시킵니다. 그 후, dotActive 변수에 모든 닷 메뉴를 선택하여 forEach() 메소드를 이용하여 클릭 이벤트를 등록합니다. 클릭 이벤트 발생 시, 눌린 닷 메뉴에 'active' 클래스를 추가하고, ..

슬라이드 이펙트 다섯번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT설명 우선 문서 객체 모델(DOM)을 이용하여 HTML에서 슬라이더와 관련된 요소들을 선택하고 변수에 할당합니다. 이미지가 움직이는 영역과 보여지는 영역, 그리고 개별 이미지를 나타내는 요소를 선택합니다. 그리고 현재 보이는 이미지(currentIndex) 변수와 이미지의 갯수(sliderCount)를 설정합니다. 또한 이미지 변경 간격 시간(sliderInterval)과 이미지 가로값(sliderHeight)도 설정합니다. 그리고 첫 번째 이미지를 복사(clone)하여 마지막..

슬라이드 이펙트 네번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT JAVASCRIPT설명 currentIndex 변수를 증가시키면서 현재 보이는 이미지의 인덱스를 업데이트합니다. sliderInner 요소에 대해 transition 속성을 0.6초로 설정하고, translateY() 함수를 사용하여 요소를 수직으로 이동시킵니다. sliderHeight * currentIndex 값은 currentIndex와 sliderHeight 값을 곱한 결과로, 현재 보이는 이미지의 위치를 계산하기 위해 사용됩니다. currentIndex와 sliderCount 값이 같으면..

슬라이드 이펙트 세번째 HTML Javascript Slider Effect03 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS CSS 설명 기존에 .slider__inner에 들어가 있던 width : 4000px;을 빼서 flex속성의 이미지들을 가로 정렬에서 세로 정렬로 바꿨다. JAVASCRIPT 자바스크립트 설명 sliderInner.style.transition = "all 0.6s"; 이 부분은 슬라이더가 이동할 때 애니메이션 효과를 주기 위해 스타일 속성에 트랜지션을 추가하는 것입니다. 이 경우 "all 0.6s"는 모든 스타일 속성이 0.6초 동안 변화하도록 설정합니다. setInterval(() => {...}, slider..

슬라이드 이펙트 두번째 HTML JAVASCRIPT 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT 자바스크립트 설명 이 코드는 자바스크립트를 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다. 먼저, sliderInner 요소의 transform 속성을 사용하여 이미지를 이동시킵니다. 이미지가 보이는 부분은 sliderInner 요소 내부에서 translateX 함수를 사용하여 -800px 만큼 이동합니다. 이때, currentIndex 변수는 현재 보이는 이미지의 인덱스를 나타냅니다. 이어서, sliderInner 요소의 transition 속성을 사용하여 이미지 전환 효과를 구현합니다. 이 속성은 all 0.6s로..

슬라이드 이펙트 HTML Javascript Slider Effect02 슬라이드 이펙트 기본적인 효과 : 트랜지션 효과 1 2 3 4 5 kshkmn0929@naver.com CSS JAVASCRIPT 자바스크립트 설명 이 코드는 자바스크립트를 사용하여 이미지 슬라이더의 동작을 구현하는 코드입니다. 우선, 코드의 첫 부분에서는 슬라이더 요소들을 DOM으로부터 가져오고, 현재 보이는 이미지의 인덱스, 전체 이미지 갯수, 이미지 간격 시간을 변수로 설정합니다. 이어서 setInterval 함수를 사용하여 일정 시간마다 이미지를 전환하는 함수를 호출합니다. 이 함수에서는 다음 이미지의 인덱스를 계산한 후, 현재 보이는 이미지와 다음 이미지의 투명도를 조절하여 전환 효과를 구현합니다. 이때, 다음 이미지의 인..

웹디자인 기능사 오답노트 1과목 : 디자인 일반 1.색의 3속성 중 사람의 눈이 가장 예민하고 강하게 반응하는 대비는? 1. 명도대비 2. 색상대비 3. 보색대비 4. 채도대비 정답 : [1] 해설 명도대비:명도가 다른 두 색의 영향에 의해 명도차가 다르게 지각되는 현상. 주위 색에 따라 더욱 밝게 느껴지거나 더욱 어둡게 느껴짐. ex) 흰바탕에 회색 점/검은바탕에 회색 점 동시대비 중 가장 예민하게 작용함. 색의 3속성은 색상, 명도, 채도이다. 3속성 중 고르라고 하였으니 일단 3번 보색대비는 제외해야 한다. 2. 색의 주목성에 대한 설명으로 옳지 않은 것은? 1. 명시도가 높으면 색의 주목성이 높다. 2. 채도 차이가 클수록 주목성이 높다. 3. 빨강은 초록보다 주목성이 높다. 4. 명도와 채도가 ..

1과목 : 전자 계산기 일반 1. 현재 수행 중에 있는 명령어 코드(Code)를 저장하고 있는 임시 저장 장치는? 1. 인덱스 레지스터(Index Register) 2. 명령 레지스터(Instruction Register) 3. 누산기(Accumulator) 4. 메모리 레지스터(Memory Register) 정답 : [2] 해설 가. 인덱스 레지스터(Index Register) : 특정한 값을 주소와 계산하여 새로운 주소를 만드는 방법 나. 명령 레지스터(Instruction Register) : 현재 실행중인 명령을 기억하는 레지스터 다. 누산기(Accumulator) : 연산된 결과를 기억하는 레지스터 라. 메모리 레지스터(Memory Register) :메모리 레지스터는 실제는 MAR과 MBR를 ..

퀴즈 사이트 만들기 일곱번째 추가 정리 JAVASCRIPT 사용자가 빈칸에 입력한 이름에 따라서 수험자 이름이 바뀌게 하기 HTML 문서에서 클래스 이름이 "cbt__name"인 요소를 찾아 cbtName 변수에 할당합니다. HTML 문서에서 클래스 이름이 "cbt__view"인 요소의 하위 요소 중 클래스 이름이 "name"인 요소를 찾아 cbtName2 변수에 할당합니다. cbtName2 요소의 value 값을 valueName 변수에 할당합니다. cbtName 요소의 innerHTML 속성에 valueName 변수 값을 할당합니다. 즉, 이 코드는 cbtName2 요소에서 입력된 값을 가져와 cbtName 요소의 내부 HTML 코드로 추가하는 역할을 합니다. 예를 들어, cbtName2 요소에 "J..

퀴즈 사이트 만들기 일곱번째 추가 정리 JAVASCRIPT 버블버튼 이 코드는 JavaScript에서 상수 bubbleBtn을 선언하고, 그 값으로 화살표 함수를 할당하는 것입니다. 할당된 화살표 함수는 clip이라는 내부 함수를 정의하고, 그 함수를 반환합니다. 내부 함수 clip은 3개의 매개변수 v, min, max를 가지며, v가 min과 max 사이의 값으로 제한됩니다. 만약 v가 min보다 작으면 min 값으로 대체되고, v가 max보다 크면 max 값으로 대체됩니다. v가 min과 max 사이에 있으면 그대로 반환됩니다. 예를 들어, clip(3, 5, 10)을 호출하면 3이 5와 10 사이에 없으므로 5가 반환됩니다. clip(7, 5, 10)을 호출하면 7이 5와 10 사이에 있으므로 7..

퀴즈 사이트 만들기 일곱번째 HTML 2020년 1회 정보처리기능사 기출문제 수험자 : 황상연 전체 문제수 : 60문항 남은 문제수 : 59문항 제출하기 59분 10초 JAVASCRIPT 코드 설명 선택자 부분 cbt는 문제를 선택하는 버튼의 집합을 나타내는 NodeList입니다. document.querySelectorAll() 메소드를 사용하여 클래스 이름이 cbt인 모든 요소를 선택합니다. cbtQuiz는 문제를 출력하는 부분을 나타내는 요소입니다. document.querySelector() 메소드를 사용하여 클래스 이름이 cbt__quiz인 요소를 선택합니다. cbtOmr은 OMR 카드를 출력하는 부분을 나타내는 요소입니다. document.querySelector() 메소드를 사용하여 클래스 ..

01. 다음의 결괏값을 작성하시오. (X) { let num = 0; while(false){ num++; if( num == 3 ){ continue; } if( num > 10 ){ break; } } console.log(num); } 문제 풀이 이 코드는 먼저 변수 num을 0으로 초기화합니다. 그런 다음 while 루프를 시작합니다. 그러나 while 조건은 false이므로 루프 내부의 코드는 한 번도 실행되지 않습니다. 따라서 num은 여전히 0으로 유지됩니다. 마지막으로 console.log(num)은 0을 출력합니다. 정답 0 02. 다음의 결괏값을 작성하시오. { let a = 6, b = 9, c = 3, result; result = ++a + b++ + ++c; console.log..

마무리 문제 1 이미지 위에 마우스 포인트러를 올려 놓았을때 다른 이미지로 바뀌엇다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 처음 사진으로 바뀌는 코드를 짜보았습니다. HTML 이미지에 마우스를 오버해보세요 JAVASCRIPT 코드 설명 우선 첫째 줄에서 img1 변수에는 HTML 문서에서 class가 "image1"인 요소를 가져와 저장합니다. 둘째 줄에서도 마찬가지로 img2 변수에는 class가 "image2"인 요소를 가져와 저장합니다. 그 다음 줄에서 img2 요소의 display 속성을 "none"으로 설정하여, 초기에는 img2가 보이지 않도록 합니다. 그 후, document.querySelector("img")를 사용하여 문서 내 첫 번째 요소를 가져와, 마우스 이벤트를 등록합니..

문자열 활용하기 원시 유형과 객체 앞에서 단순히 값만 가지고 있을 경우에는 '원시 유형'이고 프로퍼티와 메서드를 가지고 있을때는 '객체'라고 설명했습니다. 그런데 사실 자바스크립트에서는 원시 유형이어도 프로퍼티와 메서드를 사용할 수 있습니다. 자바스크립트에서 number와boolean, string 유형은 별도로 프로토타입 객체가 만들어져 있습니다. 즉, 숫자는 Number 객체, 문자열은 String 객체라는 식으로 만들어졌는데, 이런 객체를 '래퍼 객체(wrapper object'라고 부릅니다. number나 boolean, string과 같은 원시 유형에서 프로퍼티나 메서드를 사용하면 일시적으로 원시 유형을 해당 객체로 변환합니다. 그리고 프로퍼티나 메서드의 사용이 끝나면 해당 객체는 메모리에서 사..

사이트 만들기 지금까지 만든 사이트 조각들을 한 사이트에 모아서 제대로된 사이트 하나를 디자인 해보았습니다. 사이트 사이트를 합치면서 요소들의 속성들에 대해서 기본적인 세팅을 해주었고 미디어쿼리를 통해 반응형웹으로 디자인 하였습니다. 기본 CSS 세팅 /* 여백 초기화 */ body, div, dl, dd, dt, ul, li, ol, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, table, th, td, input, figure, figcaption, blockquote { margin: 0; padding: 0; } /* 폰트 초기화 */ body, button, input, select, table, textarea { font-fa..

퀴즈 사이트 만들기 여섯번째 직접 만들어본 퀴즈 사이트입니다. 답을 선택하면 틀린답인지 정답인지 구별하여 강아지가 알려주고, 답을 선택하면 나오는 다음 문제 버튼을 누르면 다음 문제로 넘어갑니다. HTML Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 kshkmn0929@naver.com JAVASCRIPT 자바스크립트 설명 quizInfo 안에 배열 안에 객체 데이터를 저장하는 방식을 이용하여 정보처리기능사 문제 6개를 저장합니다. 문제출력 이 함수는 매개변수로 인덱스 값을 받아와서 해당 인덱스에 해당하는 퀴즈 정보를 화면에 출력하는 기능을 가지고 있습니다. 함수 내부에서는 문자열 템플릿 리터럴을 사용하여 HTML 요소들을 동적으로 ..

코딩 일기 어려웠던 부분들을 다시 한번 공부하고 배웠던걸 복습하는 시간을 가지고 정리해 봤습니다. innerText DOM 요소의 텍스트 내용을 반환하거나, 텍스트 내용을 설정하는 데 사용됩니다. HTML 태그를 제거하고 텍스트만 반환합니다. classList DOM 요소의 클래스 이름을 관리하기 위한 속성입니다. add, remove, toggle, contains 등의 메소드를 제공하여 클래스를 추가, 제거, 전환 및 검색할 수 있습니다. addEventListener 이벤트를 처리하기 위한 메소드로, 지정된 이벤트에 대한 콜백 함수를 등록합니다. 이벤트 유형과 콜백 함수를 지정할 수 있으며, 이벤트가 발생하면 콜백 함수가 실행됩니다. textContent DOM 요소의 텍스트 내용을 반환하거나, 텍..

퀴즈 사이트 만들기 다섯번째 정보처리기능사 문제 풀이용으로 만들어본 퀴즈 사이트 다섯번째 입니다. 스크립트 코드만 정리하여 보여드리드록 하겠습니다. JAVASCRIPT // 문제 정보 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2007년 04월 01일(2회)", infoNumber: "20070201", infoQuestion: "flip-flop의 종류에 해당하지 않는 것은?", infoChoice: { 1: "R-S", 2: "J-K", 3: "D", 4: "R" }, infoAnswer: "4", infoDesc: "R 플립플롭은 존재 하지 않습니다." },{ infoType: "정보처리 기능사", infoTime: "2007년 04월 01일(2..

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); } 문제 풀이 배열을 선언하고 초기화합니다. join() 메소드를 이용하여 배열의 각 요소를 구분자로 결합한 문자열을 생성합니다. join("*") : 구분자로 *을 사용하여 문자열을 생성합니다. join("-") : 구분자로 -을 사용하여 문자열을 생성합니다. join("") : 구분자를 사용하지 않고 각 요소를 연속적으로 이어붙여 문자열을 생성..

서치 이펙트 CSS의 속성 데이터들을 저장 시켜놓고 검색창에 검색을 하면 일치하는 정보들만 화면에 출력되게 만듭니다. 과정 코드입니다. HTML 1 2 3 4 5 6 자바스크립트 CSS 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 1개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animatio..

사이트 만들기 푸터 유형편 보더콜리를 주제로 한 사이트 푸터 유형 부분입니다. 기준선과 레이아웃 그리드는 카드, 이미지, 슬라이드,텍스트 유형과 동일합니다. 피그마 디자인 아래는 코드로 만든 과정입니다. HTML 푸터 네이버 카페 강아지를 사랑하는 모임 보돌이 다방 유기견 도움주기 블로그 알렉스 보더콜리를 사랑한 늑대 제주농부 유튜브 보더로운생활 강혁욱의 보듬TV 언제나가을 ALWAYSFALL 보더콜리 장점 높은 지능 민첩성 충성심 보더콜리 단점 지치지 않는 체력 과도한 충성심 보더콜리 분양 더독스 도그마루 주세요닷컴 2023 CSS CSS 코드 설명 text-decoration: 텍스트의 장식을 지정하는 속성입니다. 기본값은 none이며, underline, overline, line-through, ..

마우스 이펙트 03 마우스 이펙트에 대한 세번째 사이트입니다. 마우스를 움직이면 정해진 범위만큼 마우스를 따라다니며 위 사이트를 HTML, CSS, JAVASCRIPT를 만들었고 아래는 코드들입니다. HTML Javascript Mouse Effect03 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Either you decide to stay in the shallow end of the pool, or you go out in the ocean. 당신은 수영장의 구석에 머무를지 바다로 나갈지를 당신 스스로 결정할 수 있다. kshkmn0929@naver.com CSS JAVASCRIPT 코드 설명 const cursor = document.querySelector(".mouse__curs..

마우스 이펙트 02 마우스 이펙트에 대한 사이트 두번째 제작입니다. 위 사이트를 HTML, CSS, JAVASCRIPT를 만들었고 아래는 코드들입니다. HTML Javascript Mouse Effect02 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 I love the sea because it gives up so much without complaining 나는 바다를 사랑한다. 왜냐하면 바다는 아무런 불평도 없이 많은 것을 나눠주기 때문이다. kshkmn0929@naver.com CSS CSS 설명 justify-content : Flexbox 레이아웃에서 flex items의 주 축(main axis)을 따라 정렬하는 방법을 설정합니다.justify-content 속성은 flex-c..

마우스 이펙트 01 마우스 이펙트에 대한 사이트를 만들어 봤습니다. 사용자가 마우스를 움직이거나 특정한 위치로 이동 시키면 마우스가 반응하여 커서가 변화 합니다. HTML 구조 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 The cure for anything is saltwater sweat, tears or the sea. 무언가를 치유하는 것들은 모두 소금물이다. 땀, 눈물, 바다와 같이 말이다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px kshkmn0929@naver.com CSS javas..