100S00

AJAX란? AJAX는 "Asynchronous JavaScript and XML"의 약자로, 웹 페이지에서 데이터를 동적으로 로드하고 표시하기 위한 기술입니다. 이 기술은 서버와 브라우저 사이의 비동기식 통신을 이용하여 웹 페이지를 다시 로드하지 않고도 웹 페이지의 일부분만을 업데이트할 수 있습니다. 예를 들어, 사용자가 웹 페이지에서 버튼을 클릭하면, 이벤트가 발생하고 자바스크립트를 사용하여 서버로부터 추가 데이터를 요청하고, 서버는 이를 처리한 후 필요한 데이터만을 다시 클라이언트로 보냅니다. 그러면 클라이언트 측에서는 이 데이터를 사용하여 웹 페이지의 일부분을 업데이트합니다. AJAX는 웹 페이지를 더욱 동적이고 반응형으로 만들어 주며, 사용자 경험을 향상시키는 데 도움이 됩니다. 이 기술은 다양..

jQuery "jQuery"는 JavaScript를 기반으로 한 라이브러리로, 웹 페이지를 다양한 방식으로 조작할 수 있는 기능을 제공합니다. 예를 들어, HTML 요소를 선택하고 조작하거나, 이벤트 처리 및 애니메이션 기능을 제공합니다. jQuery는 간단하고 직관적인 문법을 제공하여, 빠르고 효율적인 웹 개발을 지원합니다. React React는 Facebook에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는 데 사용됩니다. React는 가상 DOM(Virtual DOM) 개념을 이용하여 빠른 렌더링을 지원하며, 컴포넌트 기반 아키텍처를 갖추고 있어 유지보수와 재사용성이 높습니다. Angular Angular는 Google에서 개발한 자바스크립트 프레임워크로, 웹 애플리케이션을 만드는..

콜백함수 콜백 함수(callback function)는 다른 함수에게 인자로 전달되어 특정 이벤트가 발생하거나 작업이 완료될 때 호출되는 함수를 말합니다. 예를 들어, 웹 브라우저에서 사용자가 버튼을 클릭하면 클릭 이벤트가 발생하고, 이벤트 핸들러 함수를 호출합니다. 이때 이벤트 핸들러 함수가 콜백 함수가 될 수 있습니다. 즉, 클릭 이벤트가 발생하면 브라우저는 인자로 전달된 콜백 함수를 호출합니다. 또 다른 예로는 비동기적인 작업을 수행하는 함수에서 콜백 함수를 사용하는 경우가 있습니다. 이 경우, 비동기 작업이 완료될 때까지 기다리지 않고 다른 코드를 실행할 수 있으며, 비동기 작업이 완료되면 인자로 전달된 콜백 함수를 호출하여 작업 결과를 처리합니다. 콜백 함수는 자바스크립트에서 널리 사용되며, 비..

오늘의 블로그는 코딩 일기입니다! 오늘은 사이트의 슬라이드 영역을 스와이퍼를 사용하여 간단하게 구현해 보았습니다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 스와이퍼도 gsap jquery와 같이 라이브러리 cdn를 가져와 사용합니다. 이런 사이트들을 많이 알아두면 유용하게 쓸거 같다. direction: 'horizontal': 스와이퍼의 방향을 수평으로 설정합니다. loop: true: 슬라이드..

웹디자인 기능사 E-4 유형 웹디자인 기능사 E-4 유형을 구현해 봤습니다. menu1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 menu2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 menu3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 menu4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 첫번째론 제일 크게 두 개의 구역으로 나눠줍니다. 내용이 들어갈 top박스와 footer 박스로 나눠 줍니다. footer가 120px로 고정인 반응형 웹으로 만들거라서 footer를 120px로 설정해주고 top height 값을 calc(100vh - (footer의 height값으로 설정해줍니다,)) top박스 안에는 3개의 구역으로 나눠주며 aside 와..

acctent-color (브라우저 지원 : Chrome 93, Firefox 92, Edge 93, Safari 15.4) acctent-color를 사용하여 색상을 설정하면, 브라우저는 그에 맞게 스타일을 설정해준다. 다르게 말하면, 버튼이나 진행 표시 줄, 라디오/체크 박스 등 HTML 요소의 색상 변경을 손쉽게 할 수 있으며 관리에 용이하다. 이전에는 색상을 변경하려면 배경 색, 테두리 선, hover 등 세부적으로 직접 설정해야 했는데, acctent-color를 사용하면 단 한 줄만으로 나머지 요소에 대한 세부적인 설정이 필요 없다. 브라우저에서 작업자가 설정한 강조색에 맞춘 요소들로 표현한다. acctent-contrast (브라우저 지원 : Safari 15) 배경색이 있는 상태에서 텍스트..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 정답: 190 해설: i i+1 % 4 연산 sum 0 1 1 + 1 1 2 2 * 2 2 3 3 xxxxxxxx 3 4 0 - -2 4 5 1 + 3 5 6 2 * 18 6 7 3 xxxxxxxxxxx 7 8 0 - 10 8 9 1 + 19 9 10 2 * 190 04. 다음의 결괏값을 작성하시오 { let i = 0; let sum = 0; while(i < 10){ i = i + 1; if(i % 2 =..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 3 == 0) sum -= i; if( i % 3 == 1) sum += i; if( i % 3 == 2) sum *= i } console.log(sum) } 정답:129 해설: while 루프는 i가 10보다 작은 동안 실행됩니다. 루프의 처음에 i와 sum 변수가 초기화됩니다. 루프 내부에서 i는 1씩 증가하면서, i를 3으로 나눈 나머지에 따라 다른 조건문이 실행됩니다. 만약 i를 3으로 나눈 나머지가 0이면, i를 sum에서 빼줍니다. 만약 i를 3으로 나눈 나머지가 1이면, i를 sum에 더해줍니다. 만약 i를 3으로 나눈 나머지가 2이면, i를 sum에 ..

웹디자인기능사 2013년 10월 12일 필기 기출문제 22. 자바 스크립트에서 현재 활성화된 창을 닫는 명령어가 아닌 것은? 1. self.close() 2. top.close() 3. window.close() 4. opener.close() 정답 : 4 해설 : opener는 현재 창을 생성한 창을 가리키는 명령어 27. URL의 일반적일 표현식으로 맞는 것은? 1. 프로토콜://화일경로/화일명 2. 프로토콜://호스트주소[:포트번호]/화일경로/화일명 3. 포트번호://프로토콜/화일경로/화일명 4. 포트번호://프로토콜/호스트주소/화일경로/화일명 정답 : 2 해설 : 32.다음 네트워커 관련 장비에 대한 설명에 해당하는 것은? 1. 라우터 2. 리피터 3. 허브 4. 게이트웨이 정답 : 2 해설 : ..

2015년07월19일 필기 기출 문제 3번.디자인의 원리 중 비례에 대한 설명이 잘못된 것은? 1. 균형을 가장 많이 고려하여 구성해야 한다. 2. 부분과 부분, 부분과 전체에 균형이 잡혀있음을 말한다. 3. 조형을 구성하는 모든 단위의 크기를 결정한다. 4. 객관적 질서와 과학적 근거를 명확하게 드러내는 구성 형식이다. 정답 : 1 해설 : 비례란 부분과 부분, 부분과 전체의 연관시켜서 상대적으로 설명하는 것으로 부분사이의 상호관계에 대한 일정한 비율로 분포,면적,길이 등의 대비관계를 말한다. 9번.가시광선에 대한 설명으로 틀린 것은? 1. 빛의 파장 중 380nm에서 780nm 사이의 범위로 눈으로 지각되는 영역을 말한다. 2. 백색광이 프리즘을 통해 나타나는 색띠를 말한다. 3. 라디오나 텔레비전,..