반응형

코딩 공부 162

패럴랙스 이펙트(parallaxEffect) : 텍스트 효과

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

자바스크립트 코딩테스트 입문 (1)

코딩테스트 입문 Day 1 사칙연산 출처 : https://programmers.co.kr/ 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 몫 구하기 문제 정수 num1, num2가 매개변수로 주어질 때, num1을 num2로 나눈 몫을 return 하도록 solution 함수를 완성해주세요. 제한사항 0 < num1 ≤ 100 0

패럴랙스 이펙트(parallaxEffect) : 나타나기

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

패럴랙스 이펙트(parallaxEffect) : 숨김 메뉴 / 탑 버튼

패럴랙스 이펙트란? 패럴랙스 이펙트는 사용자가 스크롤을 내리거나 올릴 때, 배경과 함께 웹 페이지의 요소들이 서로 다른 속도로 움직이는 것을 말합니다. 이는 일반적으로 CSS와 JavaScript를 사용하여 구현되며, 웹 페이지를 더욱 동적이고 인터랙티브하게 만들어줍니다. 웹사이트 패럴랙스 이펙트를 사용하면 사용자가 웹 페이지를 스크롤 할 때, 배경 이미지와 함께 다양한 요소들이 움직이는 것처럼 보입니다. 예를 들어, 웹 페이지에 일러스트나 이미지를 배경으로 사용하면 이를 이용하여 사용자의 눈길을 이끌거나 페이지의 구조를 강조할 수 있습니다. 또는 텍스트나 버튼과 같은 요소들도 패럴랙스 이펙트를 이용하여 동적인 효과를 줄 수 있습니다. 패럴랙스 이펙트는 웹 디자인의 트렌드 중 하나로, 사용자 경험을 개선..

웹디자인 기능사 실기 연습하기 - 산업대학교

웹디자인 기능사 실기 연습 HTML 산업대학교 대학소개 총장인사말 학교소개 홍보관 켐퍼스안내 입학안내 수시모집 정시모집 편입학 재외국민 정보서비스 대학정보알림 정보공개 정보서비스안내 커뮤니티 공지사항 참여게시판 자료실 미래를 이끄는 열정 산업대학교 당신이 원하는 교육 산업대학교 미래를 향한 우리의 도전 산업대학교 산업대학교 새로운 소식 2023년 신입생 모집중2023.05.01 융합 전공 멘토링 및 튜터링 학생 모집2023.05.01 학과 및 학년별 장기자랑 대회2023.05.01 미래 직업 워크숍 및 박함회2023.05.01 우리학교 풍경 산업대학교 2023 체육대전 바로가기 개인정보처리방침 정보 공개 홈페이지 운영지침 15073 경기도 안산시 산기대학로 237 (정왕동) 산업대학교 COPYRIGHT(..

웹디자인 기능사 실기 연습하기 - 강원천문대

웹디자인 기능사 실기 연습 HTML 강원천문대 강원천문대 천문대소개 인사말 오시는길 이용안내 프로그램 관람시간표 이달의 별자리 천문대예약 예약하기 예약확인 예약취소 커뮤니티 공지사항 방문후기 자유게시판 천문과학교육관 시설 소개 영상 강의실로 놀러오세요! 천문과학교육관 이용 안내 어린이를 위한 천문 과학관! 별을 보는 고요한 정상 강원천문대로 놀러오세요! 공지사항 갤러리 강원천문대 2023년 휴관일 안내2023.05.01 강원천문대 2023년 온라인 예매 안내2023.05.02 강원천문대 휴관일 및 이벤트 안내2023.05.03 강원천문대 주차장 이용 및 숙박 안내2023.05.04 강원천문대 온라인 예매하기 예매하기 이달의 별자리 구경하기 바로가기 강원천문대 개인정보처리방침 저작권보호정책 이메일무단수집거..

리액트(REACT) - 02

리액트란? React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다. 장점 가독성과 유지보수성 : React는 컴포넌트 기반으로 작성되어, 코드의 가독성과 유지보수성을 높일 수 있습니다. 각각의 컴포넌트는 독..

코딩 공부/REACT 2023.05.10

PHP와 AJAX를 사용하여 유효성 검사하기

AJAX란? AJAX는 Asynchronous JavaScript and XML의 약어로, 비동기식 자바스크립트와 XML을 이용하여 웹 페이지를 동적으로 갱신하는 기술입니다. 이 기술은 페이지 전체를 새로고침하지 않고도 서버로부터 데이터를 요청하고, 받은 데이터를 이용하여 웹 페이지의 일부분을 동적으로 변경하거나 업데이트할 수 있도록 합니다. 이를 통해 사용자 경험을 향상시키고, 불필요한 네트워크 트래픽을 줄일 수 있습니다. AJAX는 XMLHttpRequest 객체를 사용하여 서버와 비동기식으로 통신합니다. 이 객체를 사용하여 서버에 데이터를 요청하고, 받은 데이터를 처리할 수 있습니다. AJAX는 XML 뿐만 아니라 JSON, HTML, 텍스트 등 다양한 데이터 형식을 처리할 수 있습니다. AJAX는..

코딩 공부/PHP 2023.05.09

리액트 (REACT)

리액트란? React는 Facebook에서 개발한 자바스크립트 라이브러리입니다. React는 웹 애플리케이션의 사용자 인터페이스를 구축하기 위한 컴포넌트 기반 접근 방식을 사용합니다. 이러한 방식은 애플리케이션의 복잡도를 줄이고 유지 보수성을 높이는데 도움이 됩니다. React는 가상 DOM(Virtual DOM) 개념을 사용하여 애플리케이션의 성능을 최적화합니다. React는 데이터가 변경될 때마다 전체 페이지를 다시 로드하는 것이 아니라 변경된 부분만 업데이트합니다. 이는 더 나은 사용자 경험을 제공하고, 빠른 애플리케이션 응답 속도를 유지하는 데 도움이 됩니다. 장점 가독성과 유지보수성 : React는 컴포넌트 기반으로 작성되어, 코드의 가독성과 유지보수성을 높일 수 있습니다. 각각의 컴포넌트는 독..

코딩 공부/REACT 2023.05.08

마우스 이펙트 사이트 만들기(4)

마우스 이펙트란? 마우스 이펙트(Mouse Effect)란 마우스를 움직이는 동안 마우스 포인터가 가지는 효과를 말합니다. 이는 주로 웹 사이트나 앱 디자인에서 사용되며, 마우스 움직임에 반응하는 다양한 효과가 있습니다. 예를 들어, 마우스를 움직이면 배경색이 바뀌거나, 이미지가 움직이거나, 텍스트가 확대되거나 축소되는 등의 효과가 있습니다. 이를 통해 사용자의 마우스 조작에 반응하여 화면을 보다 생동감 있게 만들어줍니다. 마우스 이펙트는 웹 개발에서 CSS, JavaScript 등을 이용하여 구현됩니다. 사용자 경험을 높이기 위해 다양한 마우스 이펙트를 적용할 수 있습니다. 이번 마우스 이펙트에서는 사진 안에서 마우스 커서가 보이지 않게 해주었습니다. 마우스 이펙트(4) 사이트 코드 Javascript..

728x90
Adventure Time - BMO