xoouxa

안녕하세요 ヾ(≧▽≦*)o 오늘은 그동안 내가 원하는대로 작업했던 사이트들을 한 번에 모아 반응형까지 가능하게 작업해주도록 하겠습니다. 📜 순서는 헤더, 슬라이드, 이미지, 이미지 텍스트, 카드, 배너, 텍스트, 푸터 순으로 나눠 작업하였습니다. 📌 여기서 잠깐 ! 반응형이란 ? 반응형 웹 디자인은 브라우저 창의 크기나 기기의 크기에 따라 웹 페이지의 레이아웃과 내용이 자동으로 조정되는 것을 의미합니다. CSS를 사용하여 미디어 쿼리(Media Query)를 만들고, 해당 미디어 쿼리에서 원하는 스타일을 지정하면, 브라우저가 해당 미디어 쿼리를 만족시키는 경우, 해당 스타일이 적용됩니다. 이를 통해, 브라우저 창의 크기에 따라 레이아웃이 변경되는 것을 구현할 수 있습니다. ✍🏻 what i made ✍🏻..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 여섯 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다. 이번에도 다섯번째와 같이 정보처리기능사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다. Quiz 객관식(여러문제) 확인하기 / 슬라이드 유형 1 2 3 4 5 6 정답 ! 오답 ! 다음 문제보기 gnsrdbi@naver.com 기존 4번의 객관식 페이지와 동일하지만 이번 페이지에선 각각의 Tag를 만들어 script를 통해 html문서에 넣어 줄 것이라 문제의 보기 부분을 지워줍니다. 새로 추가된 CSS .quiz__main h4 { text-align: center; padding-top: 5px; font-family: DungGeunMo; } JAVASCRIPT qui..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 다섯 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다. 이번엔 정보처리기사 60문제를 주제로 퀴즈 이펙트를 만들어 보도록 하겠습니다. 영역 지정해주기 Quiz 객관식 확인하기(여러문제) 유형 1 2 3 4 5 yuna243441@naver.com 보기를 네 개 만들어주기 위해서 label, choice를 만들어 줍니다. 스크립트 작성 2006년 04월 기출문제로 60문제를 만들어 보았습니다. //문제 정보 const quizInfo = [ { infoType: "정보처리 기능사", infoTime: "2006년 4회", infoNumber: "20060401", infoQuestion: "Accumulator(누산기)에 대한 설명으로 가장..

안녕하세요 o((>ω< ))o 오늘은 자바스크립트 테스트 오답풀이를 한 번 해보도록 하겠습니다. 여러분들도 함께 지금까지 공부 한 내용들을 제대로 배웠는지 간단하게 테스해보세요! 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); } 정답 : 1 3 true 설명 : indexOf는 순서대로 a의 자리값을 반환하고, lastIndexOf는 뒤에서부터 a값을 찾고 앞에서부터 a의 자리값을 찾아 반환합..

안녕하세요 ヾ(≧▽≦*)o 오늘은 내가 원하는대로 푸터 유형의 페이지를 만드는 작업을 한 번 해보도록 하겠습니다. 검색 이펙트에 적용되는 자바스크립트 속성 - 데이터 저장하기 : 변수 - 데이터 실행하기 : 화살표 함수 - 데이터 불러오기 : for()문, forEach()문 -배열 객체 : indexOf(), search() - 요소 객체 : querySelector(), querySelectorAll() - 요소 메서드 : element.style.속성명 : CSS 스타일 설정 - 요소 속성 : textContent, dataset - 이벤트 객체 : keyup 기본 reset css 설정 @font-face { font-family: 'CookieRun'; font-weight: 400; font-..

안녕하세요 ヾ(≧▽≦*)o 오늘은 내가 원하는대로 푸터 유형의 페이지를 만드는 작업을 한 번 해보도록 하겠습니다. ✍🏻 what i made ✍🏻 기본 CSS값 설정해주기 css리셋은 웹사이트의 스타일링을 일관되게 만들기 위해 사용되는 기술입니다. 초기설정을 해두면 폰트나 마진, 패딩값이 먹혀 편리합니다. 푸터 섹션 구성해주기 푸터 강아지 유치원 찾아보기 강아지 유치원 이야기 유치원 등록하기 유치원 견생친구들 강아지 놀이터 찾아보기 강아지 놀이터 놀이터 장소 알아보기 놀이터 이용시간 알아보기 대형견 사이트 찾아보기 대형견 전용 유치원 대형견 전용 놀이터 소중한 우리네 강아지 유기견 가족 돼 주기 소개하기 유기견 이야기 유기견 도와주기 유기견 입양하기 행복한 강아지 만들기 알아보기 우리 강아지 이야기 근처..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 세 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다. 자바스크립트 마우스 이펙트 첫 번째, 두 번째와 비슷하지만 다르게 구상하고 새로운 걸 추가해주었습니다. (마우스 이펙트 첫 번째 바로가기 : https://xoouxa58.tistory.com/44 https://xoouxa58.tistory.com/45) reset CSS 마우스 이펙트 페이지를 10페이지를 만들어 줄건데 10페이지마다 폰트를 다르게 할 거라 각각 페이지별로 폰트를 지정해 줍니다. 저는 폰트어썸이라는 사이트에서 폰트를 다운받았습니다. @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.cs..

코드입니다. 완성본 입니다. https://leeyouna21.github.io/web2023/animation/canvas/svg/webgl/webgl01.html" height="900" data-mce-src=" https://leeyouna21.github.io/web2023/animation/canvas/svg/webgl/webgl01.html">

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 두 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다. 자바스크립트 마우스 이펙트 첫 번째와 비슷하지만 다르게 구상하고 새로운 걸 추가해주었습니다. (마우스 이펙트 첫 번째 바로가기 : https://xoouxa58.tistory.com/44) reset CSS 마우스 이펙트 페이지를 10페이지를 만들어 줄건데 10페이지마다 폰트를 다르게 할 거라 각각 페이지별로 폰트를 지정해 줍니다. 저는 폰트어썸이라는 사이트에서 폰트를 다운받았습니다. @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); @import url('https://webfontworld..

안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 첫 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다. reset CSS 마우스 이펙트 페이지를 10페이지를 만들어 줄건데 10페이지마다 폰트를 다르게 할 거라 각각 페이지별로 폰트를 지정해 줍니다. 저는 폰트어썸이라는 사이트에서 폰트를 다운받았습니다. @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); @import url('https://webfontworld.github.io/miryang/MYArirangGothic.css'); @import url('https://webfontworld.github.io/woori/Wooridaum.css'..