• webmini life skin Ver 1.3.2 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

전체보기853

728x90
[운영일지]웹미니 라이프 스킨 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 요청, ..
[React]리액트 설치 및 프로젝트 진행 과정 개발 환경 설정node.js 가 설치되어있는지 확인합니다.node -vnpm -v 설치가 안되어있다면 node.js 공식사이트에서 설치합니다.https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다. React 프로젝트 생성Create React App 사용Create React App은 React 프로젝트를 쉽게 시작할 수 있도록 도와주는 도구입니다.터미널을 열고, 프로젝트를 생성할 디렉토리로 이동합니다.다음 명령어를 입력하..
[블로그 운영팁]블로그를 처음 시작하는 분들을 위한 블로그 운영 총정리 지금 처음 블로그를 시작하는데 너무 늦은 건 아닐까요?아무것도 모르는데 어떤것 부터 시작해야 할까요?늦지 않았습니다. 이유는 꾸준히 블로그 주제에 맞게 전문적으로 글만 올린다면 몇 달 안에 상위블로그가 될 수 있습니다.늦게 개설한 게 중요한 게 아니라 꾸준히 글을 올리냐가 더 핵심입니다. 3가지로 요약해 봤습니다.1. 블로그부터 개설하자.2. 주제를 정하자.3. 꾸준히 글을 올리자. 제일 기본이고, 기본은 쉬워 보여도 어렵습니다.운영하면서 여러 필요작업이 있습니다. 그걸 부가적으로 설명하고자 합니다.블로그부터 개설하자블로그는 다양하며 블로그마다 장/단점이 있습니다.크게 설치형 블로그와 제공형 블로그가 있습니다. 1. 설치형 블로그설치형 블로그는 사용자가 블로그 소프트웨어를 직접 서버에 설치하여 운영하는 ..
[운영일지]웹미니 라이프 스킨 1.3.1 webmini life 1.3.1업데이트 내역- 알림팝업 모바일 버전 디자인 변경(반응형)- 알림팝업 '오늘 하루 보지 않기' 기능추가- 알림팝업 이미지 업로드 기능추가- 알림팝업 버튼 사이즈 및 소소한 스타일 수정- 사업자등록정보 고객센터 추가   스킨 구매하기
[웹접근성]aria-lable 속성과 title 속성의 차이점과 쓰임새 웹접근성 고려 시 aria-label와 title를 언제 어떻게 쓰는지 비슷해서 헷갈릴 수 있어 차이점과 쓰임새를 알아보도록 하겠습니다.  aria-label과 title은 추가정보를 제공하지만 사용 방법과 목적성이 다릅니다. title 속성title은 추가 정보를 제공하는 툴팁(도구 설명)이라고 보시면 됩니다.예를 들어 '바로가기'란 버튼이 있을경우 클릭하면 어디로 가는 버튼인지에 대한 추가 설명을 제공할 때 사용합니다.도움말 개념입니다. 홈으로 위처럼 버튼 텍스트에 대한 추가 설명을 제공하기 위해 사용되는것이 title 속성입니다.button 태그에만 해당되는것은 아니고, 이해하기 쉽게 button 태그를 예시로 했습니다.aria-label 속성aria-label은 스크린 리더와 같은 보조 기술을 사..
[영화]'행복의 나라'와 '서울의 봄' 그 이야기와 실존인물들 오래간만에 영화 리뷰를 해본다.'서울의 봄'이 먼저 개봉하고 '행복의 나라'가 그 후에 개봉했지만, 시대적으로 보면 '행복의 나라'를 계기로 전두환이 군사적 반란을 일으킨 '서울의 봄'이라고 생각하면 된다. 결국 그안에 있는 인물은 '전두환'이다.한 사람의 욕망.. 그리고 욕심.정치적 이야기라, 다루기가 조심스럽지만 역사를 바탕으로 제작한 영화에 초점을 맞춰서 리뷰해 본다. 1979년 10월 26일그날은 대한민국 역사상 잊을 수 없을 일이 발생한다.박정희 대통령 피살사건..중앙정보부 부장 김재규가 박정희 대통령을 피살하는 사건이 발생한다.당시 남산(중앙정보부)은 막강한 권력을 가지고 있었다. 그럴 수밖에 없는 것이대한민국 중앙정보부(중정, KCIA)는 1961년 박정희 장군이 주도한 5·16 군사 쿠데타..
[운영일지]웹미니 라이프 스킨 1.3.0 webmini life 1.3.0업데이트 내역관리자 옵션1. 페이지 전환시 로딩이미지 설정가능 (로티 json 추가) + 로딩시간, 이미지 수정가능2. 알림팝업 추가3. 본문 집중 모드 추가4. 본문 제목 그라데이션 효과 선택(일반 or 그라데이션)5. 로고 애니메이션 추가6. 공지사항 스크롤 기능 추가 배포용1.3.0 부터 유료판매 배포 버전 스킨 구매하기
웹미니 라이프 스킨 특징 웹미니 라이프 티스토리 스킨 특징- 검색엔진최적화(SEO)- 웹접근성 준수- 반응형 지원- 기업용 블로그에도 적합- 프로모션 기능- 자동 다크모드 지원- 화면 확대 기능- 내비게이션 꾸미기- 카테고리 펼침/접기 지원- 본문 집중모드- 공지사항 스크롤 기능- 메인 알림팝업 기능- 로티(lottie) 애니메이션 기능- 업데이트 지원검색엔진최적화(SEO)구글, 네이버, bing을 옵션을 통해 쉽게 등록가능합니다.시멘틱 웹, 의미있는 마크업으로 SEO에 최적화되어있습니다. 웹접근성 준수티스토리 특성상 코드 수정 못하는 부분까지 웹접근성에 최대한 초점을 맞춰서 제작되었습니다.반응형 지원통일성 있게 모바일에서도 반응형으로 지원이 됩니다.기업용 블로그에도 적합옵션에서 사업자번호 등록 시 자동으로 정보조회 링크가 생성..
스킨 옵션 설정하기 webmini life skin은 다양한 기능들을 제공합니다. 기능요약- 다크모드 지원- 반응형 지원- 카테고리 닫힘/펼침 기능- 메뉴,카테고리 location(위치) 저장- 페이지 이동시 로딩바 표시- 레이아웃 좌/우측 설정- 네비게이션 색상 사용자 설정- 메인 슬라이드 프로모션- 자동 목차 기능(사용/미사용)- 검색최적화(SEO) 설정- 블로그 전체 확대/축소 기능- Mac 스타일 코드뷰- 본문 집중모드- 제목 그라데이션 타입- 공지사항 스크롤 기능- 메인 알림팝업 기능- 로고 애니메이션 효과 설정 다크모드'일반모드'와 '다크모드' 모드를 지원합니다. PC or Mobile에서 자동 or 다크모드 설정을 했을경우 디바이스에 따라 변경이 되며, 자동으로 시간대에 맞춰 모드 변환이 됩니다. 그외 사용자가..
[운영일지]웹미니 라이프 스킨 1.2.0 webmini life 1.2.0업데이트 내역관리자 옵션1. 페이지 전환시 로딩이미지 설정가능 (로티 json 추가)2. 카카오채널 추가시 사이드바 노출3. 사용하지 않은 옵션 정리4. 사업자 설정가능(자동 정보조회 연결) 코드수정1. 라이브러리, 폰트등 스킨내에 포함(폰트,폰트어썸)2. 스킨외 라이브러리, 폰트등 라이선스 표기3. 다크모드 코드 업데이트4. CSS 중복제거 및 코드정리5. 로고 등록 부분 배포용에 맞게 수정6. javascript 업데이트7. 네이게이션 메뉴 위치 저장 오류수정1. 로딩이미지 설정시 adfit 스크립트 못불러오는 문제 수정 배포용으로 초점을 맞춰 사용자가 쉽게 설정할 수 있도록 코드 수정중
[운영일지]메크로 스팸 댓글 소탕하기 100개의 스팸 댓글보다 하나의 정성스런 댓글이 더 소중하다.. 사이트 운영당시 스팸 댓글로 인해 저품질로 나락한 적이 있었다.열심히 운영하고 시간 투자해서 만든것들이 한순간에 그 모든 노력이 수포로 돌아가는 경험을 했었다. 티스토리는 초창기부터 운영을 해왔는데 정상적인 댓글은 글내용을 바탕으로 달린 댓글들이었다.올바른 댓글은 글쓴이도 기분이 좋아지게하고, 소통한다는 느낌이 든다. 방문통계와 글통계를 확인해보면 통계 수치에 비해 댓글이 하나도 없는 것들도 많다.그런데 어느순간부터 그 반대의 증상이 나타나기 시작한다.방문자는 없는데 댓글이 달리기 시작하고 공감하트가 방문자 수치보다 높아지기 시작한다. 최근에 올라온 스팸성 댓글만 몇백개는 되는듯하다. 메크로 댓글메크로는 말그대로 몇 개의 자동 댓글 메시지를..
기본 모듈 설정하기 웹미니 라이프(webmini life) 스킨 사용 매뉴얼스킨 사용 시 관리자에서 몇 가지 기본적인 설정이 필요합니다. 모듈 설정하기티스토리 관리자페이지로 진입합니다.콘텐츠카테고리 관리카테고리별 글 수를 '표시합니다'로 변경꾸미기사이드바 설정구글 애드센스 광고수익 > 애드센스 관리에서 구글 심사 후 사이드바 활성화를 해주셔야 사이드바에 노출이 됩니다.  만약 사이드바 설정에서 모듈이 안 보인다면 광고설정에서 '사이드바'를 비활성화 저장을 했다가  활성화로 바꿔서 저장해 보시면 사이드바 모듈에 노출됩니다. 구글 스카이 광고구글 애드센스에서 직접 코드를 생성해서 가져와야 합니다.디스플레이 광고 (수직형 160*600)으로 생성  생성된 광고 코드는 skin.html을 여시고 아래 부분을 찾아서 교체해 주시면 ..
반응형