Vue.js 예제 프로그램입니다. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script> <title>Vue.js TEST</title> </head> <body> <h1>Vue.js Sample</h1> <p id=”app”>{{ message }}</p> <script> const { createApp, ref } = Vue; createApp({ setup() { const message = ref(‘Hello, world!’); return { message } } }).mount(‘#app’); </script> </body> </html> 5번 줄에서 Vue.js 프레임워크 로드를 위한 스크립트 파일을 … “Vue.js 예제 프로그램 만들기” 더 읽기
TypeScript는 Microsoft에서 개발하고 유지 관리하는 JavaScript의 상위 집합입니다. 즉, JavaScript 코드를 포함하며, 추가적으로 정적 타입 시스템을 제공하여 JavaScript 개발의 단점을 보완하고 생산성을 높이는 것을 목표로 합니다. 핵심 특징 정적 타입 변수, 함수 매개변수, 반환 값 등에 타입을 명시적으로 지정할 수 있습니다. 이를 통해 컴파일 시점에 오류를 발견하고, 코드의 안정성과 가독성을 향상시킬 수 있습니다. JavaScript 호환성 … “TypeScript, 무엇인가?” 더 읽기
Vue.js(Vue)는 사용자 인터페이스(UI)를 만들기 위한 프로그레시브 JavaScript 프레임워크입니다. 프로그레시브 프레임워크라는 점이 Vue.js의 중요한 특징입니다. 이는 다음과 같은 의미를 가집니다. 점진적인 도입 기존 프로젝트에 Vue.js를 조금씩 적용할 수 있습니다. 전체 프레임워크로 한 번에 전환할 필요 없이, 필요한 부분부터 Vue.js를 사용해 UI를 개선할 수 있습니다. 유연성 Vue.js는 다양한 도구 및 라이브러리와 함께 사용할 수 있도록 설계되어 있어, … “Vue.js, 무엇인가?” 더 읽기
이 포스트에서는 PHP에서 배열을 합치고 나누는 법을 설명합니다. 우선, 단순히 배열을 합치는 것은 array_merge() 함수 하나면 충분합니다. 아래 코드를 봅시다. <?php header(“Content-Type: text/plain”); $South_Korea = array(‘서울경기’,’강원도’,’충청도’,’경상도’,’전라도’); $North_Korea = array(‘황해도’,’평안도’,’함경도’); print_r($South_Korea); print_r($North_Korea); $Unified_Korea = array_merge($South_Korea,$North_Korea); print_r($Unified_Korea); ?> 이 코드의 실행 결과는 다음과 같습니다. Array ( [0] => 서울경기 [1] => 강원도 [2] => 충청도 [3] => … “PHP 배열 합치고 나누기” 더 읽기
이 포스트에서는 PHP에서 배열의 특정 원소를 삭제하는 방법을 설명합니다. PHP에서 배열을 다루다 보면 특정 원소를 삭제해야 할 상황이 발생할 수 있습니다. 이 경우 여러 방법이 있지만, 간단하게 처리할 수 있는 방법은 두 가지입니다. 하나는 unset() 함수를 사용하는 것이고, 다른 하나는 array_splice() 함수를 사용하는 것입니다. 일단, 아래의 코드를 봅시다. <?php header(“Content-Type: text/plain”); $LE_SSERAFIM = array(‘사쿠라’,’김채원’,’허윤진’,’카즈하’,’김가람’,’홍은채’,); unset($LE_SSERAFIM[4]); … “PHP에서 배열의 특정 원소 삭제하기” 더 읽기
이 포스트에서는 PHP에서 객체를 만드는 방법을 설명합니다. 객체를 만드는 방법은 클래스에서 객체를 만듭니다. 클래스가 필요없는 간단한 객체의 경우는 그냥 배열을 객체로 변환하는 방법을 쓸 수도 있지만, 대개는 클래스를 정의해서 만듭니다. 빵을 일정한 모양으로 빚어내기 위해서는 빵틀이 필요한 것처럼, 일정한 구조의 객체를 만들기 위해 클래스를 정의합니다. 일단, 아래의 코드를 봅시다. <?php header(“Content-Type: text/plain”); class GirlGroup { … “PHP 객체 만들기” 더 읽기
이 포스트는 HTML5에서 추가된 <meter> … </meter> 태그에 관한 내용입니다. 이 태그는 HTML5에서 추가된 유용한 태그 <progress> 포스트에 설명한 <progress> 태그와 마찬가지로 수치 막대를 표시하기 위한 태그입니다. 다만 다른 점이 있다면, <progress> 태그는 진행 상황을 막대로 표시하기 위한 태그이고, <meter> 태그는 진행 상황이 아닌 것 중 미터로 나타내기 적합한 수치(알려진 범위 내에서의 스칼라 측정 또는 … “HTML5에서 추가된 유용한 태그 <meter>” 더 읽기
이 포스트에서는 웹 사이트에서 내부 요소를 추가하는 jQuery 코드에 대해서 서술합니다. 요소를 추가하는 방법은 추가 위치에 따라 다음과 같이 4가지로 분류할 수 있습니다. 형제 요소를 지정해서 해당 요소의 다음에 추가 형제 요소를 지정해서 해당 요소의 앞에 추가 부모 요소를 지정해서 해당 요소의 끝부분에 자식 요소로 추가 부모 요소를 지정해서 해당 요소의 첫부분에 자식 요소로 추가 … “jQuery로 웹 사이트 내부 요소 추가하기” 더 읽기
이 포스트에서는 스크롤바의 모양을 바꾸는 CSS에 대해서 서술합니다. 다음 HTML 코드를 봅시다. <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1″ /> <title>Scrollbar CSS Sample</title> <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> <style type=”text/css”> /* Webkit (Chrome, Edge, Opera, Safari) */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background-color: #aaa; } ::-webkit-scrollbar-thumb { background-color: … “스크롤바 모양 바꾸는 CSS” 더 읽기
이 포스트에서는 웹 브라우저의 밝은/어두운 테마에 따라 다른 모양으로 표현되는 웹 페이지를 만들기 위한 CSS에 대해 서술합니다. CSS의 미디어쿼리에는 웹 브라우저의 테마(밝게/어둡게)에 따른 반응형 미디어쿼리도 있습니다. 근래의 웹 브라우저(특히 모바일 브라우저)에서는 밝은 테마와 어두운 테마를 선택하는 것을 지원하는데, 기본적으로 밝은 배경의 웹 페이지를 만들어 두고 웹 브라우저의 테마를 어둡게 했을 경우 그 테마에 맞춰 어두운 … “어두운 테마에서 다르게 표시되는 CSS 만들기” 더 읽기