개발35

• 

  완전 쉬운 티스토리 공감클릭 이미지 자동설정 방법 블로그 게시글을 보면 하단에 공감버튼이 있습니다. 포스팅을 읽는 사람마다 공감버튼을 눌러주면 좋겠지만 사실 잘 누르지 않죠 ㅠ_ㅠ 그래서 한분이라도 더 공감버튼을 누르게 하기 위해 공감클릭 유도 이미지를 게시글마다 자동으로 삽입되는 방법을 공유합니다 추가로 공감유도 이미지도 공유합니다! 이미지는 글 밑에 있습니다 공감 클릭 유도 이미지 자동삽입 설정하기 블로그관리 > 꾸미기 > 스킨 편집으로 들어갑니다 우측에 html 편집 버튼을 누릅니다 html 부분에서 Ctrl+F키를 누른 다음 article_rep_desc 를 검색합니다. article_rep_desc는 본문 내용이 나오는 부분입니다. 공감유도 문장 이미지로 넣을 경우는 위의 3줄, 글자로 넣을 경우는 아래 3줄을 복사해서 ##_article_re.. 개발/CSS 2022. 11. 4.

• 클립보드 텍스트 복사하기(execCommand 대체) execCommand로 클립보드 텍스트 복사하기를 사용했었는데 더이상 지원이 안되서 새로운 방법을 찾았습니다. navigator.clipboard.writeText 를 사용하면 클립보드에 텍스트를 복사할 수 있습니다. navigator.clipboard.writeText('복사할 문구'); 너무 간단하죠? navigator.clipboard.writeText("클립보드에 복사할 문구").then( () => { //성공했을 때 }, () => { //실패했을 때 } ); 복사 성공 / 실패했을 때의 액션도 추가할 수 있습니다. See the Pen Untitled by jess (@jess44) on CodePen. 사용 예제입니다. 응용하면 테이블 내용 복사 등 다양하게 활용할 수 있습니다. 개발/JavaScript 2022. 10. 31.

• 

  PSSecurityException 스크립트 보안 오류 해결 방법 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\~\AppData\Roaming\npm\express.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. PSSecurityException 보안 오류가 발생할 경우 스크립트 실행 정책 때문에 해당 오류가 발생하게 됩니다. 아래의 방법을 따라해 주세요. powershell을 관리자 권한으로 실행합니다 ExecutionPolicy 터미널에 위 명령어를 입력합니다. 현재 스크립트 실행 정책을 확인할 수 있습니다. 보안 오류가 나왔다면 아마 결과가 Restricted로 나올 것입니다. Restricted W.. 개발/Node.Js 2022. 10. 29.

• 

  티스토리 표 상단 배경색 자동설정 하는 방법 블로그에 글을 쓰다 보면 표를 사용하는 경우가 많은데요, 매번 표 상단 스타일을 설정하는게 너무 귀찮더라고요. 그래서 한번 설정해서 계속 사용할 수 있는 방법을 공유합니다. 블로그관리 > 꾸미기 > 스킨 편집을 누르면 "html 편집" 이라는 버튼이 있습니다. 이걸 눌러주세요. 그럼 오른쪽에 HTML, CSS, 파일업로드 탭이 보입니다. CSS 탭을 눌러주세요. 그럼 CSS 편집화면이 아래에 나타납니다. th { text-align: center; background-color: 원하는배경색; padding: 10px; } CSS 편집화면에 원하는 배경색 부분만 변경하신 후 위의 코드를 넣어주세요. 배경색 / 글자 가운데 정렬 / padding이 추가됩니다. 이런 식으로 넣어주면 됩니다. 넣어주신 후 적.. 개발/CSS 2022. 10. 28.

• REST API란? RESTful한 API 만드는 법 REST란? REST(Representational State Transfer)는 2000년 로이 필딩의 박사 학위 논문에서 소개된 용어 자원을 정의한 후 해당 자원의 상태(정보)를 주고 받는 행위를 말한다. RESTful이란? REST 아키텍처를 지켜 구현된 시스템을 RESTful이란 용어로 지칭한다. REST 아키텍처에 적용되는 6가지 기본 원칙 1. 클라이언트 - 서버 구조 클라이언트 - 서버를 분리하여 각 파트가 독립적으로 운영되므로 의존성이 줄어든다. 다양한 플랫폼에서의 이식성이 개선되며 서버 아키텍처를 단순화하여 확장성이 개선된다. 클라이언트는 리소스 URI 외의 정보가 필요하지 않으며 서버와 클라이언트는 인터페이스가 변경되지 않는 한 독립적으로 교체 및 개발이 가능하다 2. 무상태 클라이언트.. 개발/Web 2021. 1. 11.

• MySQL DB내의 모든 테이블 삭제 DB 내의 table만 삭제하고자 할 때, 아래의 'DB명' 부분을 테이블을 삭제할 db명으로 변경해 주면 테이블이 일괄 삭제된다. SET @tables = NULL; SELECT GROUP_CONCAT(table_schema, '.', table_name) INTO @tables FROM information_schema.tables WHERE table_schema = 'DB명'; -- specify DB name here. SET @tables = CONCAT('DROP TABLE ', @tables); PREPARE stmt FROM @tables; EXECUTE stmt; DEALLOCATE PREPARE stmt; 개발/SQL 2021. 1. 8.

• 

  CSS position 속성 - CSS 위치 지정 CSS의 position 속성으로 문서 상의 요소 배치방법을 지정할 수 있다. 값에 따라 배치 방법이 다른데, 값마다의 방법을 소개한다. static 기본값이다. top, left, right, bottom, z-index 속성이 적용되지 않는다. relative 자기 자신의 위치를 기준으로 top, left, right, bottom 값에 따라 위치가 지정된다. 오프셋은 다른 요소에 영향을 주지 않으며, 페이지 레이아웃에서 요소가 차지하는 공간은 static과 같다. 자신이 있던 위치 기준(빨간 선)으로 50px씩 이동하였다. position: relative; left: 50px; top: 50px; absolute 가장 가까운 부모 요소의 위치를 기준으로 top, left, right, bottom.. 개발/CSS 2021. 1. 4.

• 

  요소의 배치 순서 지정 - z-index 앞에 나와야 할 요소가 가려지는 등 난처할 때들이 있었다. z-index 속성을 사용하면 요소의 배치 순서를 정할 수 있어서 가려지는 현상을 해결할 수 있다. position이 static이 아닌 경우에만 적용이 가능하다. 5개의 겹쳐 있는 div이다. 이제 이 요소에 순서를 지정하여 배치 순서를 변경할 수 있다. 요소별 css에 z-index:값을 입력하면 값에 따라 순서가 바뀐다. z-index값이 클수록 앞으로 나오며, 보통 9999는 항상 상단에 위치해야 할 때, -1은 항상 뒤에 나와야 할 때 스인다. 역순 출력을 위하여 1번~5번 div에 각각 5~1의 z-index값을 부여했다. // HTML 1번 DIV 2번 DIV 3번 DIV 4번 DIV 5번 DIV // CSS div{ width: 1.. 개발/CSS 2021. 1. 4.

• 개발 시 유용한 사이트 모음 - cdnjs 라이브러리 파일 CDN 사이트. 웬만한 라이브러리는 다 있음. cdnjs.com/ cdnjs - The #1 free and open source CDN built to make life easier for developers Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 11% of all websites, powered by Cloudflare. We make it faster and easier to load library files on your websites. cdnjs.com - jsfiddle 소스를 웹상에서 미리 테.. 개발/Web 2021. 1. 4.

• 무료 아이콘/템플릿/웹디자인 관련 사이트 모음 아이콘 - flaticon 다양한 무료 아이콘 제공. 색상 변경도 가능함. 웹 사용도 가능하나 주소가 너..무 길어서 불편함. www.flaticon.com/kr/ Flaticon, 최대 무료 벡터 아이콘 데이터베이스 SVG, PSD, PNG, EPS 형식 또는 웹 폰트 형태로 모든 아이콘 다운로드 www.flaticon.com - Font Awesome css로 편리하게 사용할 수 있는 무료 아이콘 사이트. fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 템플릿 - BO.. 개발/Web 2021. 1. 3.

• 

  Google Fonts - 구글 무료 폰트 사이트 Google Fonts에서는 약 1,000가지의 무료 폰트를 제공한다. 한글 폰트가 글 쓴 시간 기준 26개밖에 없는 점이 아쉽지만, 영어 폰트가 대부분이므로 웹페이지 제작 및 이미지 작업 시 유용하게 사용할 수 있다. fonts.google.com/ 사이트에 접속하면, 폰트들이 나온다. 글자를 입력하면 입력한 글자대로 미리보기가 된다. 원하는 폰트를 하나 골라보자. 선택 후 + Select this style 버튼을 눌러 준다. 친절한 사용 안내법이 나온다. link의 주소를 사이에 넣은 후, css 안에 font-family 부분을 추가해 주면 사용 준비 끝. import 방식으로 css 안에 넣을 수도 있다. Google Fonts를 적용한 예제이다. 예쁜 폰트 찾아서 유용하게 사용하시길 :) Se.. 개발/CSS 2021. 1. 3.

• hr 태그 - 수평선 / 문단 나누는 선 넣기 hr 태그는 문단을 나눌 때 사용하는 수평선 태그입니다. 사용 방법은 간단하며 다양한 속성으로 스타일을 줄 수 있습니다. 태그를 넣으면 기본 수평선이 추가됩니다. 아래와 같은 3가지 방법으로 스타일 추가가 가능합니다. // 사용법 1 // 사용법 2 css 추가 .클래스명{ 스타일 } // 사용법 3 css 설정 hr{ 스타일 } 스타일 속성 width 가로 값. width: 가로크기 로 사용 height 세로 값. height: 세로크기 로 사용 border 선 속성. border: 선종류 선크기 선색깔 로 사용 text-align 정렬 설정. ie만 지원하며 text-align: 정렬위치 로 사용 margin-left 왼쪽 정렬. 크롬/파이어폭스용 margin-right 오른쪽 정렬. 크롬/파이어폭스.. 개발/CSS 2021. 1. 3.