전체보기884

728x90
[Javascript]HTMLCollection을 반환하는 주요 DOM 메서드 HTMLCollection을 반환하는 주요 DOM 메서드document.getElementsByTagName(tagName)특정 태그 이름을 가진 모든 요소를 선택합니다.예: document.getElementsByTagName('div')→ 태그를 모두 포함하는 HTMLCollection 반환.document.getElementsByClassName(className)특정 클래스를 가진 모든 요소를 선택합니다.예: document.getElementsByClassName('item')→ 클래스가 item인 모든 요소를 포함하는 HTMLCollection 반환.document.forms현재 문서의 모든 요소를 선택합니다.예: document.forms→ 문서의 모든 태그를 포함하는 HTMLColle..
[Javascript]DOM Script 이벤트와 선택자 이벤트HTML DOM에서 지원하는 스크립트 이벤트 종류는 웹 페이지에서 다양한 사용자 상호작용과 브라우저 동작을 처리하기 위해 사용됩니다. 주요 이벤트는 다음과 같은 그룹으로 나눌 수 있습니다.1. 마우스 이벤트onclick: 요소를 클릭했을 때 발생ondblclick: 요소를 더블 클릭했을 때 발생onmousedown: 마우스 버튼을 눌렀을 때 발생onmouseup: 마우스 버튼을 뗐을 때 발생onmousemove: 마우스가 요소 위에서 움직일 때 발생onmouseover: 마우스가 요소 위로 들어갈 때 발생onmouseout: 마우스가 요소를 벗어날 때 발생onmouseenter: 마우스가 요소 위로 들어갈 때 (버블링 없음)onmouseleave: 마우스가 요소를 벗어날 때 (버블링 없음)Click..
[운영일지]웹미니 라이프 스킨 1.4.1 버전 : webmini life 1.4.1업데이트 내역- 본문내 이전글/다음글 추가- '응원하기' 다크모드 지원  본문내에 이전글/다음글이 추가되었으며, 스킨편집에서 노출 설정이 가능합니다.관련글도 노출 설정이 스킨편집에서 가능하도록 수정되었습니다. '응원하기' 노출이 되는 블로그는 다크모드에서도 지원하도록 수정되었습니다.주의할점index.xml을 덮을경우 기존에 설정된 값들이 없어지므로 스킨편집 설정창을 새로 하나더 열어서 업로드하시고 기존 설정창에서 아무거나 수정 후 적용을 누르시면 기존 설정들이 다시 저장됩니다. 그후에 새로추가된 기능을 재설정하시면 됩니다. 스킨 구매하기
[운영일지]웹미니 라이프 스킨 1.3.4(패치) 버전 : webmini life 1.3.4업데이트 내역- 버전표기 오류 수정 (index.xml,  style.css)- 제목 그라데이션 설정 오류 수정 스킨편집에서 '제목 그라데이션 사용' 사용안할시 그라데이션 제거 되지 않은 문제 수정 기존 사용자는 아래 내용찾으셔서 해당 스타일 삭제해주세요. style.css.post-cover h2 { margin: 0 auto; font-weight: 600; font-size: 22px; line-height: 1.4; color: var(--defaultText); letter-spacing: -0.01em; overflow: hidden; background: linear-gradient(90deg, #8980ed..
[Javascript]많이 사용되고 유용한 JavaScript 라이브러리와 프레임워크 웹사이트에서 많이 사용되고 유용한 JavaScript 라이브러리들은 다양한 기능을 제공하며, 웹 개발을 더욱 효율적이고 편리하게 만들어 줍니다. 여기 몇 가지 인기 있고 유용한 JavaScript 라이브러리와 프레임워크를 소개합니다1. React용도: UI 구축설명: React는 Facebook에서 개발한 사용자 인터페이스(UI) 라이브러리입니다. 컴포넌트 기반 아키텍처를 사용하여 효율적으로 복잡한 UI를 관리할 수 있습니다. React는 Virtual DOM을 사용하여 성능 최적화와 빠른 렌더링을 제공합니다.추천 이유: 현대 웹 애플리케이션에서 가장 인기 있는 라이브러리로, 대규모 애플리케이션에 적합하고 많은 커뮤니티와 리소스가 존재합니다.링크: https://reactjs.org/ ReactReact..
[영화]25년전의 재미와 감동 그대로 글래디에이터2 관람 후기 바야흐로 글래디에이터 1을 본 게 군대시절이었다...이등병 때 1일 정비를 얻어서 눈치 보면서 본 기억이 난다. 군대 제대 후 집중해서 다시보긴 했는데, 명작으로 기억이 남았던 영화이다. 1편이 너무 명작이기에 2탄이 잘해봐야 본적이겠지라는 10%로의 생각을 갖고 영화를 관람하게 되었다.느낌은 1편과 비슷하면서 (초반 지루함도 비슷) 집중을 할 수밖에 없는 스토리와 분위기. 간단히 요약하자면 1편과 연결이 되고 주인공인 '막스무스'의 아들이 2편의 주인공이다.1편에 나왔던 꼬맹이가 2편에서는 주인공이며 아들이다. 솔솔히 재밌고 약간의 감동도 있다.개인적으로는 2편도 훌륭했으며, 1편을 안 본 사람도 2편을 보고 재밌어서 1편까지 찾아보게 되는 경우를 보았다. 런타임이 1탄과 비슷하게 좀 긴편이다.지금 이..
웹미니 스킨 블로그 등록 웹미니 스킨 구매를 해주신 분들은 이곳에 아래 양식에 맞춰 사용하시는 블로그 주소를 남겨주셔야 합니다.(비밀댓글로 남겨주세요) 등록 양식- 스킨명 : ex) 웹미니 라이프- 블로그 주소 : https://- 블로그 주소변경 : (변경이 있을경우만 해당)- 사용후기 등록 허락 : O or X 만약 블로그 주소가 변경되었다면, 기입해주세요. (구매는 1개의 블로그 기준입니다.)그리고 스킨 사용후기에 소개를 해드리고자 하는데 원하시면 O, 원치 않으시면 X라고 표기해 주시면 됩니다. 참고로 업데이트 버전은 구매한 곳에서 받으시면 됩니다.https://ctee.kr/item/store/33583 웹미니 스킨 구매를 해주셔서 감사드립니다.^^
[운영일지]웹미니 라이프 스킨 1.3.3 webmini life 1.3.3업데이트 내역- 본문글자크기 조절기능 추가 스킨편집에서 '본문 폰트사이즈 확대/축소' 기능을 설정할 수 있습니다.  화면크기 기능과 다르게 본문글자 기능은 본문에 글자 크기만 제어합니다. 기존 사용자중에 스킨을 수정해서 덮어씌우기가 어려울경우는 아래 코드를 추가해주시면 됩니다. script.js// 본문 글자크기조절코드// 본문 글자크기조절 end 위 주석을 찾아  안에 코드를 복사 후 넣어주세요. skin.html// 아래 코드를 찾으신 후본문 집중모드// 아래 코드로 변경합니다. 본문 집중모드 본문글자  style.css.post-cover .option_box { ..
[CSS]css 최신문법에서 추가되는 기능과 설명, 호환성 여부 CSS 기능 중 주목할 만한 몇 가지와 그 설명들입니다.브라우저에서 지원가능한 시기에는 구지 SASS를 사용할 필요가 없는 날이 오겠네요. 1. CSS Nesting설명:Sass와 같은 CSS 전처리기에서 제공되던 네스팅(Nesting) 기능이 이제 CSS 표준으로 도입되고 있습니다. 사용법:.container { color: black; .child { color: red; }} 장점: 코드를 더 간결하게 작성할 수 있고 구조적으로 이해하기 쉬움. 지원 여부:Chrome: 부분 지원 (플래그 설정 필요)Firefox: 미지원 (개발 중)Safari: 미지원 (예정)Edge: Chrome 기반으로 부분 지원호환성 팁: Sass 또는 PostCSS 같은 전처리기를 활용해 네스팅을 사용 가능. 2..
[정보]구리시에서 자동차 번호판을 변경하려면? 요점만 간단히 설명드리겠습니다.구리시 자동차 번호판 교부소를 방문합니다.기존에는 구리시청 입구 옆쪽에 있었지만, 이전을 해서 구리시청 안쪽으로 들어가서 우측 길따라 맨위쪽으로 끝까지 올라가면 나가는길 전에 위치해있습니다.  기존 번호를 유지하면서 번호판만 변경하려면 35,000원에 비용이 발생하며 10~20분이면 됩니다.만약 번호까지 변경하려면 자동차 교부소에서 변경신청을 하시고, 번호판 교부소에 가서 새로운 번호판을 장착해야합니다.만약 앞자리 3자리면 필름식 번호판과 사이즈가 동일해서 번호판 가드를 그대로 사용해도 됩니다만, 앞자리가 2자리인데 3자리로 변경시에는 사이즈가 달라 보조판 비용까지 듭니다. (보조판 10,000원 / 탈부착 3,000원) 준비물자동차 등록증신분증(여권, 주민등록증, 운전면허..
[영화]'보통의 가족' 인간의 죄의식과 양면성 영화의 제목을 보고 내용을 짐작할 수 있다.우리는 뭐가 옳고 그른지 교육과 학습을 통해 익숙해져 있다. 포괄적으로 도덕과 양심이라고 말할 수 있겠다. '보통의 가족'은 인간의 내면적인 모습을 전달하고 있다.포스터에서도 인간의 양면성을 암시하고 있다. 겉으론 나쁜사람처럼 보여도 그렇지 않은 사람이 있고, 봉사활동과 어려운 사람을 돕지만 본인과 직접 연관될 경우 또다른 모습을 보여주는 사람등등 형(설경구)와 동생(장동건)은 처음과 마지막이 서로 입장이 바뀌어 생각을 하게 된다. 과연 우리가 알고 있는 도덕과 양심은 학습을 통해 교육이 된것일까..아니면 인간이란 존재는 태어날때부터 이러한 감정이 탑재되어있는것일까.. 관객들도 '나는 저런 상황에서 저렇게 했을거야', '저건 도덕적으로 저렇게 하면 안되지' 등 ..
[운영일지]웹미니 라이프 스킨 1.3.2 webmini life 1.3.2업데이트 내역- 불필요한 코드 삭제 (skin.html / script.js)- 알림팝업 버튼 및 글영역내 버튼(.btn_buy) 애니메이션 효과 추가 스킨 구매하기
[Javascript]반복문의 종류와 사용 용도 JavaScript에서 for...of, for...in, forEach, map, filter, reduce는 모두 반복문이지만, 각기 다른 용도와 특성을 가지고 있습니다. 특정 상황에 맞는 반복문을 선택하는 것이 중요합니다. 아래에 각 반복문의 사용 용도와 차이점을 설명하겠습니다.1. for...of용도: 배열, 문자열, Map, Set 등의 iterable 객체의 값을 순회할 때 사용.언제 사용해야 할까?배열이나 iterable 객체의 요소 값을 순회할 때 가장 유연하게 사용 가능.요소의 순서대로 값을 읽어오는 작업에 적합.중간에 break 또는 continue로 반복을 중단하거나 건너뛰고 싶을 때 사용.const arr = [1, 2, 3];for (const value of arr) { con..
[Mac]Mac OS Sequoia 15.0 아이폰 미러링 지원 Mac OS Sequoia 으로 업데이트 되면서 아이폰 미러링 기능을 드디어 지원하게 되었다. 그동안 애플 사용자들이 원했던 기능인데 그로인해 사용하기가 더욱더 편리해졌다. 먼저 아이폰의 어플들을 맥에서도 이용하기 때문에 게임뿐만아니라, 인증 받아야할 경우 아이폰을 보고 확인을 해던것들이 맥에서 손쉽게 인증을 할수 있게 되었다. 업데이트 되면서 단점과 아직 다른 프로그램과 충돌(?)문제도 있고 버그가 아직 있다는 의견들이 있는데, 개선되리라 생각되고 그에 맞게 다른 소프트들도 빌드업하리라 생각된다.주요 업데이트 기능:iPhone 미러링: 맥에서 아이폰을 바로 제어하고 사용할 수 있습니다.Apple Intelligence: 인공지능 기반 도구가 도입되어, 문서 작성 시 자동 교정, 요약, 톤 변경 등을 지..
[나스]시놀로지 NAS에 웹서버 구축하기 6탄(도메인 접속시 다른 사이트로 리다이렉팅 시키기 .htaccess 이용) 시놀로지 NAS에 웹서버 구축하기 6탄 - 도메인 연결시 다른 사이트로 리다이렉팅 시키는 방법입니다. 이해를 돕고자 아래 url로 접속해보면 알수 있습니다.https://www.webmini.co.kr 위 주소로 접속시 https://webmini.tistory.com 으로 라다이렉팅 되는 걸 알수 있습니다.물론 도메인 제공업체에서 설정하는 여러 방법들도 있겠지만, 저는 시놀로지 NAS 웹서버를 통해 .htaccess 파일을 이용해서 리다이렉팅을 하고자 합니다. 먼저 도메인 업체에서 DNS레코드 설정을 하셔야합니다.본인이 구매하신 도메인 업체 사이트에 접속해서 DNS레코드 > A레코드 설정을 해주세요. (사이트마다 조금씩 다릅니다.)예를 들어 webmini.net 이나 www.webmini.net 로 접..
[CSS]버튼이나 링크에 애니메이션 제공해주는 라이브러리 버튼이나 링크에 마우스를 올렸을 때 적용할 수 있는 여러 애니메이션 효과를 제공하는 라이브러리입니다. 다양한 버튼 애니메이션을 구현해주며, 버튼 제작시 참고용으로도 괜찮은거 같습니다.https://ianlunn.github.io/Hover/ Hover.css - A collection of CSS3 powered hover effects ianlunn.github.io설치방법사용하려면 먼저 라이브러리를 포함시켜야 합니다. 두 가지 방법으로 사용할 수 있습니다:(1) CDN으로 포함하기HTML 파일의  (2) 직접 다운로드하여 사용하기https://github.com/IanLunn/Hover 에서 파일을 다운로드합니다.프로젝트에 hover.css 파일을 포함시킵니다.HTML 파일에 해당 CSS 파일을 링크..
[AI]카카오톡으로 chat GPT 가져오기 (메신저봇 사용) - 개선된 버전 기존 버전에서 개선된 버전입니다. https://webmini.tistory.com/1080 (기존버전) [AI]카카오톡으로 chat GPT 가져오기 (메신저봇 사용)요새 chat GPT가 대세죠.현재는 GPT를 통해 다양하게 이용중인데요. 저역시 업무간에 코드오류 체크, 생성등 너무 효율적으로 잘사용하고 있습니다. GPT란GPT는 "Generative Pre-trained Transformer"의 약webmini.tistory.com셋팅 방법은 위에 게시글을 참고해주시고, 코드만 아래 내용으로 변경하시면 됩니다.개선된 코드const scriptName = "GPT";let key = "API 입력"; // OpenAI 사이트에서 발급받은 API 키 입력function response(room, msg,..
[Javascript]비동기 처리 Promise, async/await 살펴보기 javascript에서 비동기 처리를 다루는 방법으로는 Promise와 async/await이 있습니다. 이 두 가지 방법은 비동기 작업(예: API 호출, 파일 읽기 등)을 처리하는 데 매우 유용합니다.1. Promise 예제Promise는 비동기 작업이 성공했는지 실패했는지에 따라 결과를 처리할 수 있는 객체입니다.// 비동기 작업을 시뮬레이션하는 Promise 생성const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { const success = true; // 작업이 성공했다고 가정 if (success) { re..
[Javascript]고차함수, 익명함수, 콜백함수 설명 및 예제 1. 고차 함수 (Higher-Order Function)고차 함수는 하나 이상의 함수를 인수로 받거나, 함수를 반환하는 함수입니다.// 고차 함수: 함수를 인수로 받음function higherOrderFunction(callback) { console.log("고차 함수가 호출되었습니다."); callback(); // 전달받은 함수를 호출}// 인수로 전달될 함수 (익명 함수 형태로 작성)higherOrderFunction(function() { console.log("이 함수는 콜백 함수로 전달되었습니다.");}); 고차 함수는 함수를 인수로 받아 호출합니다.2. 익명 함수 (Anonymous Function)익명 함수는 이름이 없는 함수로, 변수에 할당하거나 다른 함수에 전달될..
[React]리액트 기본 폴더 구조(SCSS포함) React 애플리케이션의 폴더 구조는 프로젝트의 복잡도와 팀의 선호도에 따라 다를 수 있습니다. 1.기본 폴더 구조my-react-app/│├── public/ # 정적 파일 (HTML, 이미지, 아이콘 등)│ ├── index.html # 기본 HTML 파일│ └── ...│├── src/ # 소스 코드 폴더│ ├── assets/ # 이미지, 폰트, CSS 파일 등│ ├── components/ # 재사용 가능한 컴포넌트│ ├── hooks/ # 커스텀 훅│ ├── pages/ # 페이지 컴포넌트│ ├── services/ # API 요청, ..
반응형