티스토리

SILVERTORY
검색하기

블로그 홈

SILVERTORY

wisesilver.tistory.com/m

IT 개발 관련 정보

구독자
3
방명록 방문하기

주요 글 목록

  • [ NEWS ] 연예 · 유머 · 사건사고 · 이슈 (2023.04.20 업데이트) 공감수 0 댓글수 0 2023. 2. 22.
  • 구글 일별 인기 검색어 (실시간) 공감수 0 댓글수 0 2020. 7. 10.
  • ‘itemListElement’ 입력란이 누락되었습니다. 해결방법 티스토리 블로그가 구글에서 노출되려면 구글 서치 콘솔에 내 사이트맵을 등록해야 합니다. 필자의 경우 6월 23일 구글 서치 콘솔에 사이트맵을 등록했는데, 6월 25일 탐색경로 문제가 발견됐다는 메시지를 받았습니다. 문제 현상 및 해결방법 관련 오류에 대해 검색해보니, 블로그에 글이 하나도 작성돼있지 않은 빈 카테고리가 원인이였습니다. 오류가 발견된 당시 필자의 블로그는 SCSS, PLUGIN, FONT 폴더가 비어있는 상태였고, 해당 카테고리를 삭제했습니다. 이 외에도 구글 서치 콘솔에 사이트맵을 등록한 후 블로그 스킨을 변경하거나, 사이트맵 파일(sitemap.xml)이 처음부터 오류가 있을 경우 같은 문제 현상이 생길 수 있습니다. 문제 해결 7월 9일 문제가 해결됐다는 메시지를 받았습니다. 공감수 0 댓글수 0 2020. 7. 10.
  • CSS 체크박스, 라디오 커스텀 스타일 실무에서 자주 사용하는 체크박스, 라디오 커스텀 스타일입니다. See the Pen 체크박스, 라디오 버튼 커스텀 디자인 by wisesilver (@wisesilver) on CodePen. 공감수 0 댓글수 0 2020. 7. 7.
  • 무료 로딩 이미지 다운로드 사이트 무료 로딩 이미지 다운로드 사이트를 소개합니다. Preloaders.net Preloaders.net - Loading GIF, SVG & APNG (AJAX loaders) generator More than 1000 free and premium ajax loader (loading animated GIF, SVG and APNG) spinners, bars and 3D animations generator for AJAX and JQuery icons8.com 이 사이트는 스피너, 로딩 바 등을 포함하는 많은 아이콘을 제공합니다. 이 아이콘 중 하나를 선택한 다음 원하는 대로 사용자 정의할 수 있습니다. 실제로 전경색 및 배경색을 변경하고, 애니메이션 속도, 아이콘의 너비 및 높이를 조정하고, 색상.. 공감수 1 댓글수 0 2020. 7. 6.
  • CSS flex, grid 속성 쉽게 이해하기 flex, grid 속성에 대해 작성된 글입니다. flex 본문 바로가기 grid 본문 바로가기 CSS flex 1. 기본 구성 플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다. 플렉스 요소에 width, height 속성을 추가합니다. Colored by Color Scripter cs /* CSS */ .item { width: 100px; height: 100px; } cs 2. flexbox flex는 단일 레이아웃 방향이므로 flex 항목은 행 또는 열로 정렬됩니다. 기본값은 rows입니다. 컨테이너 요소에 display: flex 속성을 추가합니다. display 1. flex : block 특성의 컨테이너를 정의합니다.. 공감수 5 댓글수 0 2020. 7. 3.
  • 포토샵 이미지 배경 제거 이미지 객체를 분리하는 방법과 프로세스에서 가장자리를 부드럽게 유지하는 방법을 알려 드리겠습니다. STEP 1 펜 도구 (P)를 선택 후 시작점을 클릭합니다. STEP 2 클릭할 다른 지점을 클릭 후 마우스를 떼지 않은 상태에서 커서를 움직이면 곡선의 모양을 제어할 수 있습니다. 너무 멀리 드래그하지 마십시오. 드래그하는 핸들은 윤곽선 위에 있어야합니다. 면적이 커질수록 포인트를 더 가까이 배치해야 합니다. 취소하기를 두려워하지 말고 너무 멀리 떨어진 지점에 놓으면 다시 시도하십시오. STEP 3 전체 개체를 다 살펴본 후 첫 번째 점을 클릭하면 윤곽선이 닫힙니다. STEP 4 때로는 개체의 내부 윤곽선도 있습니다. 같은 방법으로 선택하십시오. STEP 5 경로를 선택 항목으로 바꾸려면 Ctrl+Ente.. 공감수 0 댓글수 0 2020. 7. 3.
  • 포토샵 알아두면 유용한 팁 30가지 모든 포토샵 사용자가 알아야 할 30가지 팁을 살펴봅시다. 1. 스크린샷없이 색상값 확인 색상을 잡기 위해 스크린샷을 중지하십시오. 스포이드 도구를 선택하고 포토샵을 최소화한 다음 스포이드를 캔버스로 클릭 후 포토샵 외부로 드래그하십시오. 2. 포토샵 Custom brush 설치 포토샵에 사전 설치된 brush만 사용하면됩니다. brushes에 들어가서 gear 아이콘을 클릭하고 Import Brushes를 선택 하여 인터넷에 제공되는 수천 개의 brush 중 하나를 설치하십시오 . 3. 비 텍스처 만드는 방법 검정색으로 채워진 새 레이어를 만들고, Noise를 추가 한 다음, 경사 Motion Blur를 추가하고, 레이어를 화면으로 설정하여 비가 내립니다. 약간의 대비를 추가하면 즉시 비가 내립니다. .. 공감수 1 댓글수 0 2020. 7. 3.
  • 잘 모를 수 있는 CSS 속성 place-Items: center, diplay: grid 조합 두 개 속성을 조합하면 요소를 가로 및 세로로 가운데에 맞출 수 있습니다. CSS is awesome Yes, this is a hero section made for fun. See more Colored by Color Scripter cs /* CSS */ .hero { display: grid; place-items: center; } cs margin: auto, display: flex 조합 이 방법도 마찬가지로 가로 및 세로 가운데에 맞출 수 있습니다. cs /* CSS */ .parent { width: 300px; height: 200px; background: #ccc; display: flex; } .child { wi.. 공감수 0 댓글수 0 2020. 7. 3.
  • 모바일 디바이스별 해상도, OS 버전 (2023.02.21 업데이트) name phys. width phys. height CSS width CSS height pixel ratio phys. ppi OS Launch Date Apple iPhone 14 Pro Max 1290 2796 430 932 3 460 iOS 16.0 2022.09 Apple iPhone 14 Plus 1284 2778 428 926 3 458 iOS 16.0 2022.09 Apple iPhone 14 Pro 1179 2556 393 852 3 460 iOS 16.0 2022.09 Apple iPhone 14 1170 2532 390 844 3 460 iOS 16.0 2022.09 Apple iPhone 13 Pro Max 1284 2778 428 926 3 458 iOS 15.0 2021.09 .. 공감수 14 댓글수 8 2020. 6. 28.
  • CSS 한줄, 여러줄 말줄임 표시하기 실무에서 자주 사용하는 CSS 말줄임(...) 표시하는 방법에 대해 알아봅시다. 한 줄 .text { text-overflow: ellipsis; white-space:nowrap; overflow:hidden; } cs 여러 줄 예를 들어 3줄 이상 말줄임 처리를 하고 싶다면 3줄에 해당하는 높이를 height 값으로 넣고, -webkit-line-clamp에 라인 수를 넣으면 됩니다. 참고로 IE에서는 말줄임(...) 표시는 안되고, 설정한 라인 수 이상일 경우 숨김 처리됩니다. .box { display: -webkit-box; height: 60px; word-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-o.. 공감수 1 댓글수 0 2020. 6. 28.
  • 새 에어컨에서 냄새가 날 경우 조치 방법 문제 현상 온도를 25도 이상 높이거나, 에어컨을 끄면서 자동건조 기능이 작동할 때 퀴퀴한 냄새가 납니다. 문제 원인 에어컨 구입 초기에 새 제품 특유의 냄새가 날 수 있습니다. (에어컨 제조 및 포장과정에서 생성된 냄새라고 하네요) 문제 해결 1. 에어컨의 온도를 최저로 설정합니다. (파워모드가 있다면 작동시켜서 최대 냉방으로 가동시킵니다.) 2. 1시간 정도 작동시킨 후 송풍기능으로 1시간 더 작동시킵니다. (실내기 내부의 수분을 건조시켜서 냄새 발생을 현저히 줄일 수 있습니다.) 실생활 팁 LG에어컨의 경우 자동건조 설정 후 에어컨을 끄면 자동건조 100초 작동 후 전원이 꺼지는데, 자동건조 기능보다는 송풍기능을 30분 정도 작동시키는게 실내기 내부 수분을 건조시키에 더 좋습니다 . 공감수 2 댓글수 0 2020. 6. 28.
  • CSS 브라우저 지원 여부 확인 사이트 CSS는 브라우저 버전별로 지원 여부가 다르기 때문에 웹사이트 제작 시 지원 여부를 확인해야 이슈 발생 및 재작업을 피할 수 있습니다. 소개할 사이트는 CSS 브라우저 버전별로 지원 여부를 확인할 수 있는 대표적인 사이트입니다. Can I use : https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis De.. 공감수 0 댓글수 0 2020. 6. 27.
  • CSS 삼각형, 원 그리기 CSS 도형의 장점 이미지 파일보다 용량이 줄어들기 때문에 웹페이지 로딩 속도 개선에 도움을 줄 수 있습니다. width, height 등 속성값 변경을 통해 자유롭게 크기 조절이 가능합니다. 실무 활용 예시 말풍선 불릿 삼각형, 원 그리는 방법 CSS로 평행사변형, 사다리꼴, 육각형별 등 다양한 도형을 그릴 수 있지만, 활용도가 높은 삼각형과 원을 그리는 방법에 대해 알아봅시다. See the Pen CSS 도형 by wisesilver (@wisesilver) on CodePen. 공감수 0 댓글수 0 2020. 6. 27.
  • 티스토리 네이버 웹마스터도구 수집보류 해결방법 네이버 웹마스터도구 웹페이지 수집이란? 검색로봇이 미처 방문하지 못한 사이트의 주요 웹페이지를 사용자가 직접 수집요청을 하는 기능입니다. 수집보류 해결방법 블로그관리 > 주소설정에서 포스트 주소를 '숫자' 상태로 설정한 후 웹페이지 수집 요청을 합니다. 수집 요청 후 포스트 주소를 '문자' 상태로 변경합니다. 네이버 수집요청결과에서 수집성공 확인 후 포스트 주소를 '숫자' 상태로 재변경합니다. 공감수 0 댓글수 0 2020. 6. 27.
  • 반응형 웹 작업 시 알아두면 유용한 CSS 이미지 유동적인 이미지는 반응형 디자인의 중심입니다. 이미지를 유동적으로 만드는 것은 매우 쉽습니다. 예를 들어, 이미지가 600px 너비 컨테이너 내에 표시되면 이미지는 600px입니다. 컨테이너 크기를 350px로 조정하면 이미지는 사용 가능한 최대 너비 (이 경우 350px)로 자동 크기가 조정됩니다. 그러면 모든 화면 크기에 맞게 이미지 크기가 자동으로 조정됩니다. img { max-width: 100%; height: auto; } cs HTML5 비디오 HTML5 반응형 video는 CSS 파일에 다음을 추가하면 됩니다. video { max-width: 100%; height: auto; } cs YouTube 동영상 CSS 파일에 다음을 추가하면 됩니다. Colored by Color Sc.. 공감수 1 댓글수 0 2020. 6. 25.
  • 디바이스 해상도별 미디어쿼리 해당 미디어쿼리는 반응형 사이트를 구현할 때 디바이스별 화면 크기에 따라 스타일 지정이 가능합니다. 전체를 다 사용할 필요는 없고, 필요한 유형을 선택해서 사용하시면 됩니다. [ 관련글 ] · [IT/ETC] - 모바일 디바이스별 해상도, OS 버전 (2020.07.07 업데이트) /* Media Queries */ /* Smartphones, small screens (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones, small screens (landscape) ----------.. 공감수 0 댓글수 0 2020. 6. 25.
  • 2020년 모바일 UI/UX 디자인 트렌드 UI 디자인은 모바일 애플리케이션의 첫인상입니다. 앱의 UI 디자인이 클라이언트 중심적이고 매력적인 콘텐츠가 있으면 성공을 막을 수 있는 것은 없습니다. 그러나 UX 환경은 지속적으로 변화하고 있고, 시간이 지남에 따라 새로운 것들이 개발되고 있습니다. 그리고 UI 디자인은 모바일 산업에서 가장 변화가 많은 영역으로, 산업의 다른 많은 영역에 영향을 미칩니다. UI / UX 란? UI 디자인이란 무엇입니까? UI 디자인은 사용자 인터페이스 디자인을 나타냅니다. UI는 사람이 상호 작용할 수 있는 모바일 앱의 그래픽 레이아웃입니다. 여기에는 사용자가 클릭하는 버튼, 읽은 텍스트, 슬라이더 등이 포함될 수 있습니다. UX 디자인이란 무엇입니까? UX 디자인은 사용자 경험 디자인을 나타냅니다. 모바일 앱에 대.. 공감수 1 댓글수 0 2020. 6. 25.
  • placeholder 줄바꿈 처리 placeholder 줄바꿈을 하려면 을 추가합니다. cs 공감수 0 댓글수 0 2020. 6. 24.
  • 외부영역 클릭 시 레이어 팝업 닫기 외부영역 클릭할 경우 레이어팝업이 닫히는 스크립트입니다. See the Pen 외부영역 클릭시 레이어팝업 닫기 by wisesilver (@wisesilver) on CodePen. 공감수 3 댓글수 3 2020. 6. 24.
  • 이미지 용량 최적화 이미지의 특성을 고려하지 않고 올바르지 않은 확장자로 이미지를 저장할 경우에도 용량이 커질 수 있습니다. 또한 올바른 확장자로 이미지를 저장했더라도 원본 이미지 용량이 너무 크면 홈페이지 로딩이 느려질 수 있습니다. 그렇기 때문에 홈페이지 제작 시 이미지의 원본 화질을 최대한 유지하면서 용량을 줄이는 과정이 필요합니다. 이미지 파일 형식 GIF 보통 로딩바 이미지 같은 애니메이션 이미지의 경우 GIF로 저장합니다. 256색 이하의 색상으로 표현되는 아이콘, 이미지 (PNG가 10~30% 정도 더 뛰어난 압축률을 제공하기 때문에 256색 이하 이미지는 PNG로 저장합니다.) 애니메이션 이미지 또는 투명한 부분까지 저장이 가능하나 반투명한 알파값은 표현 불가 투명한 부분과 이미지의 경계가 뚜렷한 경우 사용 .. 공감수 0 댓글수 0 2020. 6. 24.
  • 웹 개발 입문자에게 추천하는 HTML, CSS 사이트 HTML, CSS 같은 경우 기본개념을 알지 못하면 해당 역할을 알면서도 실무에 제대로 응용을 하지 못하는 경우가 많습니다. 프로트엔드개발자 뿐만 아니라 백엔드개발자도 유지보수 등 기본 화면 제작을 위해 어느정도 HTML, CSS를 익힐 필요성이 있습니다. 1. 웨버 스터디 입문 추천합니다. 참고서처럼 개념이 자세히 서술돼있습니다. 웨버스터디 웹 제작을 처음 접하는 사람들을 위한 무료 강의. 웹 제작, 웹 디자인을 위한 HTML과 CSS에 대해 보다 쉽게, 보다 깊이 다룹니다. 초보자부터 숙련된 개발자까지 모두 함께 할 수 있는 사이트 webberstudy.com 2. 생활코딩 입문 ~ 중급 이상 추천합니다. HTML, CSS, jQuery, Javascript, Github 등 실무에 유용한 정보를 익.. 공감수 0 댓글수 0 2020. 6. 23.
  • 개발 소스 비교 사이트 두개의 소스를 비교할 수 있는 유용한 사이트를 소개하고자 합니다. 필자의 경우 사이트 재구축 전 변경된 CSS 소스와 싱크를 맞추기 위해 해당 사이트를 이용했는데, 별도의 프로그램 설치가 필요없어서 간편하게 사용할 수 있습니다. 1. Diffichecker Diff Checker Try our desktop app Offline mode, advanced features and more www.diffchecker.com 소스 비교 가능한 사이트입니다. UI가 단순해서 쉽게 사용 가능하지만, 소스가 많을 경우 위치 찾기가 번거로운 단점이 있습니다. 2. DiffNow DiffNow www.diffnow.com 소스, 파일, URL 비교 가능한 사이트입니다. 위치 찾기 기능이 있어 소스를 비교하기에 용이합.. 공감수 0 댓글수 0 2020. 6. 23.
  • 애드센스 신청방법 및 승인 TIP 애드센스란? 애드센스는 구글이 운영하는 수익 배분 사업의 일환으로 운영되기 시작하였다. 수익 배분 사업을 쉽게 풀이하자면 광고 게재 사업 정도라고 보면 된다. 광고주들이 구글에게 광고를 의뢰하면 구글은 개인 사이트 및 블로그에 광고를 게시한다. 이로부터 구글이 일정 수익 이상을 받으면 고객에게 광고료를 지급하는 방식이다. 애드센스 신청자격 블로그의 경우, 설치형 블로그 또는 이글루스나 티스토리 자유롭게 보장된 블로그에만 적용이 된다. 애드센스 신청방법 1. 애드센스 홈페이지 이동 Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다.. 공감수 0 댓글수 0 2020. 6. 23.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.