Jin

html 구조입니다. Javascript Parallax Effect08 패럴랙스 이펙트 : 가로 효과 1 2 3 4 5 6 7 8 9 10 01 02 03 04 05 06 07 08 09 css 입니다. #header { position: fixed; z-index: 10000; } .parallaxs__wrap { position: fixed; left: 0; top: 0; display: flex; } .parallaxs__item { width: 100vw; height: 100vh; position: relative; } #section1 {background-color: #111;} #section2 {background-color: #222;} #section3 {background-colo..

패럴랙스 이펙트 01 Section1 슬픔은 병이잖아, 고치기 위해서 살기로 했어 분명, 살아가는게 낫게 해 줄거야.-보노보노 02 Section2 무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니다. 03 Section3 성공하는 사람이 되지 말고 가치 있는 사람이 되십시오. 04 Section4 언제나 현재에 집중할수 있다면 행복할것이다 05 Section5 인생에서 가장 큰 후회 중 하나는 자신이 아니라 다른 사람들이 원하는 모습이 되는 것이다. 06 Section6 진짜 어려움은 자신에 대해 생각하는 방식을 극복하는 것입니다. 07 Section7 신은 용기있는자를 결코 버리지 않는다. 08 Section8 단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살..

완성된 사이트 입니다. const allMusic = [ { name :"1. 마마마마", artist : "Easda sas", img : "music_view01", audio : "music_audio01" },{ name :"2. 마마마마", artist : "Easda sas", img : "music_view02", audio : "music_audio02" },{ name :"3. 마마마마", artist : "Easda sas", img : "music_view03", audio : "music_audio03" },{ name :"4. 마마마마", artist : "Easda sas", img : "music_view04", audio : "music_audio04" },{ name :"5..

완성된 화면 입니다. html코드 입니다. GAME Effect JIN GAME WORLD 뮤직 듣기 뮤직 듣기 뮤직 듣기 뮤직 듣기 스크립트 입니다. $(".icon1").draggable({ containment: ".icon__box", scroll: false, start: function() { $(".cursor img").attr("src", "img/game_mouse01.png"); $("#header").css("background-color","red"); $("#footer .info").html("현재 빨간 뮤직듣기를 클릭했습니다.") }, stop: function() { setTimeout(function() { printAgent(); }, 1000); // 1초 후에 실행 ..

교육 관련 사이트를 조사 하였습니다. 대부분의 교육 사이트들은 깔끔하고 차분한 디자인을 채택하였습니다. 제작하려는 사이트는 문제를 문제를 푸는 사이트로 사용자가 사이트에 들어왔을 떄, 쉽고 빠르게 문제를 풀 수 있도록 최신 기출문제 영역을 사이트의 상단 바로 밑에 배치 하였습니다. 보기 쉬운 UI로 접근성이 용이하게 하였습니다. https://www.momntalk.com/main.mnt 커뮤니티 부분은 맘톡이라는 사이트의 커뮤니티 영역을 짜집기 하였습니다. https://www.intraxkorea.kr/intrax_intrax/ 공지사항 부분은 인트락스라는 사이트의 공지사항 부분을 짜집기 하였습니다. https://creverse.com/ 푸터 부분은 크렌버스라는 사이트의 푸터부분을 참고 하였습니다...

https://jinyongjang.github.io/web2023-PHP/html/board.html

패럴렉스 효과는 웹사이트의 시각적인 효과를 증대시켜주는 역할을 합니다. 또한 사용자에게 더욱 동적이고 생동감 있는 웹사이트 경험을 제공해줄 수 있습니다. 하지만, 과도하게 사용하면 사용자에게 불편함을 줄 수 있으므로 적절히 활용하는 것이 중요합니다. 패럴랙스 효과를 사용하여 사이트를 제작 하였습니다. 완성된 화면 Skrollr Skrollr은 자바스크립트 라이브러리 중 하나로, 스크롤 이벤트에 반응하여 웹 페이지 요소의 애니메이션을 제어할 수 있게 해줍니다. 이 라이브러리를 사용하면 스크롤 위치에 따라 웹 페이지의 요소를 동적으로 조작하여 다양한 효과를 구현할 수 있습니다. Skrollr을 사용하기 위해서는 먼저 skrollr.js 파일을 다운로드하고 웹 페이지에 포함해야 합니다. 그리고 요소에 data..

패럴랙스(Parallax)는 웹 디자인에서 많이 사용되는 효과 중 하나로, 여러 레이어를 겹쳐 놓고 스크롤링에 따라 각각의 레이어가 서로 다른 속도로 움직이는 것으로 화면 전환 효과를 만드는 방식입니다. Javascript Parallax Effect01 패럴랙스 이펙트 : 메뉴 효과 1 2 3 4 5 6 7 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 메뉴9 01 Section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 Section2 산다는것 그것은 치열한 전투이다. 03 Section3 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 04 Section4 언제나 현재에 집중할수 있다면 행복할것이다. 05 Section5 진정으로 웃으려면 고통을 참아야하며 ,..

이번 시간은 슬라이드 버튼을 이미지 내부에 보이도록 하고, 닷 버튼 대신 썸네일 이미지를 추가하였습니다. Javascript Slider Effect07 슬라이드 이펙트 : 썸네일 슬라이드(버튼, 썸네일) 1 2 3 4 5 6 7 prev next ebmdols@naver.com object-fit object-fit 속성은 이미지나 비디오와 같은 대체 콘텐츠를 표시할 때, 해당 콘텐츠를 포함하는 요소의 크기에 맞게 조정하거나 자르는 방법을 제어하는 데 사용됩니다. 이 속성은 CSS의 background-size 속성과 유사한 역할을 합니다. fill: 대체 콘텐츠를 요소의 크기에 맞게 늘리거나 축소합니다. 가로세로 비율이 유지되지 않으며, 콘텐츠가 찌그러질 수 있습니다. contain: 대체 콘텐츠가 ..

Javascript Slider Effect04 슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴) 1 2 3 4 5 6 7 prev next 다음 슬라이드로 넘어가기 위한 버튼을 만들고 이미지 밑부분에 닷 메뉴 버튼을 추가였습니다. 닷 메뉴와 양 옆 슬라이드로 움직이기 위한 버튼을 선택자로 추가 하였습니다. slider.forEach(() => dotIndex += "이미지");는 slider 배열의 이미지 갯수만큼 .dot 클래스를 가진 a 태그를 생성하고 dotIndex 변수에 추가합니다. sliderDot.firstChild.classList.add("active") 는 .slider__dot 클래스를 가진 요소의 첫 번째 자식인 a 태그 중에서 첫 번째 이미지의 닷 메뉴가 활성화되도록 합니다. ..

저번 시간과 비슷하지만 슬라이드 방향이 위로 향하도록 제작 하였습니다. Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ebmdols@naver.com 이번에는 슬라이드가 윗방향으로 움직여야 하므로 width가 아닌 height 값을 변경해 주어야 합니다. 개별적은 이미지의 height 값을 520px로 변경하였고 움직이는 영역의 총 height 길이를 2600으로 변경해 주었습니다. 슬라이더를 포함하는 클래스가 "slider__wrap"인 컨테이너 요소가 있습니다. 컨테이너 요소 내에 "slider__img" 클래스가 있는 요소가 있습니다. 이는 슬라이더의 보이는 영역을 나타냅니다. 보이는 영역 요소 내에 "slider__inner" 클래스가 있는..

이미지가 자동으로 자연스럽게 왼쪽 방향으로 슬라이드 되는 것처럼 보이는 효과입니다. Javascript Slider Effect04 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 구성은 저번 시간과 비슷하지만 움직이는 영역 부분의 총 width 값을 불러와야 하기 때문에 4800px로 변경해 주었습니다. 마지막 이미지를 복사하여 앞으로 불러와주는 형식입니다. sliderInner 요소에 sliderClone 요소를 추가한 후, sliderEffect 함수를 setInterval 함수를 사용하여 일정 시간 간격으로 실행합니다. sliderEffect 함수는 슬라이드를 이동시키는 역할을 합니다. currentIndex 변수는 현재 보여지고 있는 슬라이드의 인덱스를 저장하며, 이 값이 증가함에 따라 ..

저번 시간과 다르게 슬라이드가 위/아래로 움직이도록 제작하였습니다. html 코드입니다. Javascript Slider Effect01 슬라이드 이펙트 : 위/아래로 움직이기 1 2 3 4 5 6 ebmdols@naver.com 구성은 저번시간과 같습니다. 이미지 슬라이더에 필요한 요소들을 선택합니다. (sliderWrap, sliderImg, sliderInner, slider) 현재 보여지는 이미지의 인덱스와 전체 이미지 갯수, 이미지 변경되는 시간&간격을 변수로 지정합니다. setInterval() 함수를 사용하여 일정 시간마다 이미지가 변경되도록 합니다. jQuery를 사용하여 슬라이더가 일정한 속도로 움직이도록 합니다. animate() 메서드를 사용하여 슬라이더가 부드럽게 움직이도록 합니다...

html 코드입니다. Javascript Slider Effect01 슬라이드 이펙트 : 좌로 움직이기 1 2 3 4 5 6 ebmdols@naver.com 구성은 저번 시간과 같습니다. 이미지만 다른 이미지를 사용하기 위해 바꾸어 주었습니다. .slider__wrap 클래스는 슬라이더 전체를 감싸는 영역을 설정합니다. 이 영역은 화면 전체를 차지하며, 내부의 요소들을 수직 가운데 정렬합니다. .slider__img 클래스는 이미지가 보이는 영역을 설정합니다. 이 영역은 이미지를 보여주는 화면의 크기를 정의하며, overflow 속성을 통해 이미지 영역을 벗어나는 부분은 잘리도록 설정합니다. .slider__inner 클래스는 이미지가 움직이는 영역을 설정합니다. 이 영역은 display: flex 속성..

이번 시간은 저번에 제작한 마우스 이펙트 내용과 비슷하게 제작하였습니다. Javascript Slider Effect01 슬라이드 이펙트 : 트랜지션 효과 1 2 3 4 5 6 ebmdols@naver.com 구조는 이미지 5장이 겹친 상태로 짜두었습니다. .slider__wrap: 슬라이더를 감싸는 div 요소로, 전체 화면을 차지하며 가운데 정렬되어 있습니다. .slider__img: 실제 이미지가 보여지는 영역을 나타내는 div 요소입니다. width와 height 속성으로 이미지의 크기를 지정하고, overflow 속성으로 이미지가 div의 영역을 넘어갈 경우 숨기도록 설정합니다. .slider: 실제 이미지가 배치되는 div 요소입니다. position: absolute 속성으로 .slider_..

어제에 이어서 오늘도 제작중인 사이트에 기능을 추가하였습니다. 타이머 기능에 ??분 ??초가 나오도록 추가 하였고, 이용자가 모달창의 이름 입력란에 이름을 입력하면 omr창의 윗쪽에 이용자의 이름이 나오도록 하는 기능과 답을 제출하면 점수가 나오는 기능을 추가하였습니다. ??분 ??초에서 초의 앞자리가 10미만이 되면 십의 자리에 0을 추가하기 const displayTime = () => { if(questionTimeRemain { const value = cbtViewName.value; cbtName.innerHTML = value; } value는 input 요소의 값을 가져옵니다. 모달창 부분의 이름 입력란의 선택자는 cbtViewName, omr 창 부분의 이용자 이름이 들어갈 영역은 cbt..

어제 제작한 사이트에 이어서 몇가지의 기능을 더 추가 하였습니다. html 코드입니다. Quiz 객관식 CBT 유형 1 2 3 4 5 5-1 6 7 7-1 2020년 1회 정보처리기능사 기출문제 1. 객체지향 프로그램에서 데이터를 추상화하는 단위는 ? 클래스 메서드 상속 메시지 객체지향 언어는 ___입니다. 객체지향언어 2. 다음 빈칸을 채우시오. 객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다.객체지향 언어는 ____ 입니다. 클래스 메서드 상속 메시지 객체지향 언어는 ___입니다. 객체지향언어 수험자 : 장진용 전체 문항 : 60 문항 남은 문항 : 59 문항 59분 10초 제출하기 기능사 시험 도전하기 정보처리기능사 2..

헤더(메뉴) 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지 / 텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 슬라이드 영역 event 사막여우를 알아가는 사이트 사막여우의 생태, 특징, 생활 습관, 보호 활동 등에 대한 정보를 제공하는 사이트 입니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 여우의 생활 사막여우는 사막에서 생활 합니다. 사막여우 털의 특징 털은 갈색 또는 회색으로 된 부드러운 모피를 가지고 있으며, 눈동자는 크고 밤에 더 잘 보이도록 도와주는 반사체를 가지고 있습니다 자세히보기 사막 여우의 서식처 사막여우는 북아프리카와 아시아의 사막 지역에 서식하는 ..

6번째 퀴즈 이펙트 사이트 제작입니다. 저번 시간에 이어서 다른 방식으로 퀴즈 사이트를 제작하였습니다. 한 문제씩 풀 때마다 다음 문제로 넘어가는 방식입니다. html 코드입니다. Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 5-1 6 정답입니다!🤦‍♂️ 틀렸습니다!🤬 다음 문제 ??점 ?? ebmdols@naver.com quiz__main 영역에 총 몇 문제가 남았는지 표시하기 위해 quiz__main 클래스 밑으로 태그를 넣어 주었습니다. quiz__info와 quiz__check 이름의 div 박스는 각각 총 점수와 총 맞힌 갯수를 풀력하기 위해 넣었습니다. 또한 태그를 넣었습니다. 스크립트 코드입니다. // 선택자 부분 quizCount: 현재 퀴즈 질문을 추적하는 카운터 변수입니..

정보처리 기능사 2006년 문제 풀이 사이트를 만들었습니다. 번호를 선택한 후 정답 확인 버튼을 누르면 정답과 해설이 출력 됩니다. Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 웹디자인 기출 헤더와 푸터는 저번에 제작한 방식과 동일합니다. 문제 정보에 대한 스크립트 코드 입니다. 배열안에 객체가 있고 그 안에 객체가 있는 방식입니다. 선택자 부분은 querySelector 메소드를 사용하여 quiz__wrap 클래스를 가진 요소를 선택한 후, 그 결과를 quizWrap 변수에 저장합니다. 이는 나중에 동적으로 생성될 HTML 코드를 quiz__wrap 요소의 자식 요소로 추가하기 위해 사용됩니다. 또한, let을 사용하여 quizScore 변수를 선언하고, 초깃값을 0으로 할당합니다. 이 ..

"Search Effect"는 인터넷 검색 엔진에서 검색어를 입력할 때 나타나는 결과와 관련된 용어로 사용됩니다. 1 2 3 4 5 6 ❤자바스크립트 CSS 속성 검색하기 indexOf() / search() 검색하기 CSS 속성 갯수 : 0개 align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. all : 요소의 속성을 초기화 또는 상속을 설정합니다. animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다. animation-delay : 애니메이션 지연 시간을 설정합니다. animation-direction :..

html 코드입니다. 푸터 사막여우 사이트 소개하기 사막여우 이야기 사막여우 도움주기 사막여우와 함께살기 사막에 사는 종류 Fennec fox Pale fox Cape fox Blanford's fox 사막여우 노하우 충분한 운동하기 같이 갈 수 있는 곳 산책하기 좋은 곳 관련 커뮤니티 사막여우 먹이 강아지 사료 당근과 양배추 전용 물병 낮보다는 밤 주의해야할 음식 사막여우 냄새 자체적인 냄새 배설물 냄새 처리 방법 전용 탈취제 같이 오래 살기 사막여우의 수명 야생에서의 수명 사람과 같이살 때의 수명 사막여우 접종하기 2023 진블로그 사막여우 사이트 Portfolio is power All Right Reserved 6개의 영역으로 나누어 주기 위해 6개의 div박스를 footer__menu 클래스 안..

마우스가 이동하는 방향에 따라 2개의 동그란 커서가 따라 다니는 효과입니다. html 코드 Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Success usually comes to those who are too busy to be looking for it. 성공은 보통 바빠서 찾아갈 시간이 없는 사람들의 것이다. ebmdols@naver.com mouse__cursor와 mouse__cursor2 div 박스를 만들어 마우스를 따라 다니는 2개의 원을 만들 것입니다. p태그 안의 단어를 span으로 감싸서 단어 영역에 마우스가 들어가면 커서 모양이 변화하게 만들 것입니다. 이번 시간에는 헤더 부분과 푸터 부분에도 마우스 효과를 줄 것입니다. ..

마우스가 이동하는 방향에 따라 뒷배경이 보이는 마우스 효과를 만들었습니다. Javascript Mouse Effect01 마우스 이펙트 - 마우스 따라다니기 1 2 3 4 5 6 Behind the cloud is the sun still shining. 구름 뒤엔 여전히 태양이 빛나고 있다. ebmdols@naver.com header의 6개의 li태그는 각 페이지의 번호를 의미 합니다. mouse__cursor는 마우스의 모양을 만들기 위함이고 mouse__text는 화면 중간에 글씨를 적기 위해 만들어 주었습니다. 스타일 코드 입니다. .mouse__wrap의 cursor: none으로 커서를 보이지 않게 작업했습니다. overflow: hidden는 요소의 내용이 자신의 경계를 벗어나면 해당 요소..

웹 사이트를 구성할 때 텍스트 영역은 매우 중요합니다. 텍스트 영역은 사용자가 사이트에서 읽을 수 있는 모든 텍스트를 포함하는 영역을 말합니다. 주요 텍스트 영역은 다음과 같습니다. 헤더(Header): 사이트 상단에 위치한 영역으로 로고, 메뉴, 제목 등의 텍스트를 담습니다. 푸터(Footer): 사이트 하단에 위치한 영역으로 저작권 정보, 연락처 등의 텍스트를 담습니다. 본문(Content): 헤더와 푸터 사이에 위치한 중요한 텍스트 영역으로, 사이트의 핵심 정보를 담습니다. 사이드바(Sidebar): 주요 본문 영역 옆에 위치한 영역으로, 부가적인 정보나 링크 등을 담습니다. 모달창(Modals): 페이지 내에서 팝업 형태로 떠오르는 작은 창으로, 주로 사용자에게 추가 정보나 알림을 제공하기 위해 ..

자바스크립트 퀴즈사이트 만들기 저번시간은 여러개의 주관식 문제를 만들었지만 이번 시간은 radio 버튼을 이용한 객관식 퀴즈 사이트를 만들었습니다. html 코드 입니다. Quiz 객관식 확인하기 유형 1 2 3 4 5 웹디자인 기출 정답입니다! 틀렸습니다! 정답 확인하기 ebmdols@naver.com quiz__choice 클래스를 만들어 주었습니다. input type = "radio"는 여러 개의 선택지 중에서 하나를 선택할 수 있도록 하는 라디오 버튼을 생성합니다. 각 라디오 버튼은 고유한 값을 가지고 있으며, 사용자는 이 중 하나를 선택할 수 있습니다. 라디오 버튼은 하나의 그룹으로 묶여 있으며, 그룹 내에서는 한 번에 하나의 버튼만 선택할 수 있습니다. id="choice1" : 라디오 버튼..

저번과 같이 기준선을 잡고 각각의 영역에 맞는 text와 image를 넣어줍니다. 배경 이미지는 피그마의 plugin에서 'unsplash' 룰 통해 적용하였습니다. 배경 이미지를 어둡게 하기 위해 전체 범위를 rectangle로 덮어주고 배경색을 검정색으로 채워준 뒤, layer의 pass through를 50%로 낮추어 줍니다. 다음은 이 이미지를 코드로 만들어 보겠습니다. html코드 입니다. 메인 슬라이드 영역 event 사막여우를 알아가는 사이트 사막여우의 생태, 특징, 생활 습관, 보호 활동 등에 대한 정보를 제공하는 사이트 입니다. 자세히 보기 상담 신청 이전 이미지 다음 이미지 첫번째 이미지 두번째 이미지 세번째 이미지 플레이 정지 태그는 외부 CSS 파일을 연결할 때 사용합니다. "Nex..

저번 시간에는 주관식을 한문제만 확인하는 유형이었지만 오늘은 한 페이지에서 여러 문제의 주관식을 확인하는 유형의 사이트 입니다. html 코드입니다. Quiz 주관식 확인하기 유형 1 2 3 4 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 . 정답입니다! 틀렸습니다! 정답 확인하기 ebmdols@naver.com javascript 코드 입니다. 선택자로 각 영역의 상수 이름을 선언하고 문제 정보를 배열안의 객체로 표현하여 총 3개로 나누었습니다. querySelectorAll() 메서드를 사용하여 클래스가 quiz인 3개의 div태그를 한번에 묶어줄 수 있습니다. querySelectorAll() 메서드는 문서 내에서 주어진 CSS 선택자와 일치하는 모든 요소를..

자바스크립트 이미지 유형 페이지는 HTML, CSS, 자바스크립트를 사용하여 이미지 파일을 로드, 표시, 제어하는 웹 페이지입니다. 피그마에서 프레임을 1920*800으로 설정후 다음 레이아웃 그리드 설정을 columns를 12개로 설정하고 margin 값을 380으로 설정합니다. 다음은 이 그림을 코드로 작성해 보겠습니다. 여우의 생활 사막여우는 사막에서 생활 합니다. 사막여우 털의 특징 털은 갈색 또는 회색으로 된 부드러운 모피를 가지고 있으며, 눈동자는 크고 밤에 더 잘 보이도록 도와주는 반사체를 가지고 있습니다 자세히보기 사막 여우의 서식처 사막여우는 북아프리카와 아시아의 사막 지역에 서식하는 작은 크기의 개과 동물입니다 자세히보기 태그 위의 태그는 외부 파일을 문서에 연결하는데 사용합니다. 웹폰..

정답을 맞추면 강아지가 웃고 틀리면 우는 방식의 사이트를 제작 하였습니다. 먼저 html 코드입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 ebmdols@naver.com 다음은 자바 스크립트 코드 입니다. css 스타일 시트는 어제 만든 사이트와 똑같이 적용됩니다. 어려운 용어를 정리해 보겠습니다. querySelector : 웹 개발에서 사용하는 JavaScript의 메서드 중 하나로, 문서 객체 모델(DOM)에서 특정 CSS 선택자로 요소(element)를 찾아 반환하는 역할을 합니다. 메서드: 객체(object)에 속한 함수(function)입니다. 객체는 자바스크립트에서 데이터와 해당 데이터를 조작하는 함수를 하나의 단위로 묶어 놓은 것을 말하며, 메서드는 이러한..