본문 바로가기

테크노트44

이 웹사이트에 치명적인 오류가 있습니다. 워드프레스 페이지 오류 요즘 들어 운영하고 있는 워드프레스의 프러그인 오류가 자주 발생하여 아래와 같은 내용을 포스팅하려 합니다. 요런 에러 메시지 (처음에는 당황스럽죠?) 재설치, 재설정을 할 생각을 하면 한숨이 나옵니다. (해결방법) | 순서 FTP 프로그램을 이용해 워드프레스 서버에 접속 (오라클 클라우드 FTP 연결방법) wp-content 폴더로 이동 wp-content 폴더 “plugins” 폴더의 이름을 “plugins.hold” 로 변경 워드프레스 재접속 워드프레스 관리자페이지 접속해서 플러그인 비활성화 확인 wp-content 폴더 “plugins.hold” 를 다시 “plugins” 로 변경 | 블로그에서 오류 메세지 확인 “이 웹사이트에 치명적인 오류가 있습니다.” 문구를 확인하고 당황하지 말고 위 순서대로.. 2023. 7. 23.
github push 할 때 Access Denied 에러 메시지는? github에서 본인인증 방식이 변경되었다. 기존 인증방식인 패스워드에서 개인토큰으로 발급을 받고 해당 토큰을 통해 인증하는 방식으로 변경 그러므로 개인토큰을 모르고 있는 경우 토큰을 받아야 하고 push할때 인증방식에서 토큰으로 입력해야 한다. (1) Personal Access Token 발급 개인 토큰을 발급 받으려면 github 계정으로 로그인한 후에 settings > Developer settings 에 접속 맨 좌측 하단에 Developer settings 를 선택한다. 다시 해당 하단의 Personal access tokens 를 누른다. 좌측 메뉴 중 Tokens(classic)을 다시 선택하면 우측화면 상단에 Generate new token 이 보일 것이다. 그것을 선택해서 해당 토큰.. 2023. 4. 8.
spring boot를 설치해 보자 예전 spring이 막 나오던 시절에는 spring도 eclipse pugin 형태로 설치하여 사용하였다 하지만 그 로드 속도나 태생적인 한계의 java swing 형태로 만들어져 있는 프로그램이기에 사용기에는 가히 불가능할정도로 느려지기도 하여 결국 패키지 형태의 spring tools의 묶음이 배포되기에 이르게 된 것이다. 사실 안드로이드 스튜디오도 마찬가지로 eclipse plugin의 형태로도 가능하나 속도문제와 메모리 사용 문제로 그것도 별도 패키지 묶음으로 별도 이름의 안드로이드 스튜디어로를 사용할 수 있다. 최근에는 무척 쾌적해진 프로그램 무게로 쾌적한 개발환경을 제공하고 있다. 각설하고 아래와 같이 처음으로 스프링 개발을 위한 스프링 개발 환경을 만들어 보자 스프링은 자바언어로 만들어진 프.. 2022. 12. 18.
CSS 반응형 웹(Mobile Responsiveness)의 기초 반응형 웹이 무엇일까요? 하나의 웹 템플릿으로 모든 디바이스에서 해당 컨텐츠들을 잃어버리지 않고 편안한 폰트사이즈와 레이아웃으로 보고자 하는 것이 목적 일 것입니다. 그런데 반응형 웹 말고 적응형 웹도 있다는 사실을 아시나요? 사실 모바일 시대가 도래하면서 반응형 웹을 구현하는 것이 쉽지가 않았습니다. 왜냐하면 재구축을 해야 하기 때문이죠 그래서 기존에 데스크탑 용 템플릿을 그대로 두고 추가되는 디바이스에 필요한 css 템플릿을 추가하는 형태로 운영하였습니다. 그 2가지의 특징을 알아보겠습니다. 이 중에서 반응형 웹이 현재로서는 대세이고 범용 기술입니다. 그리고 우리가 이것도 이해해야 합니다. 웹개발 그중에서 CSS 개발할때 모바일 퍼스트(mobile first)로 개발할지 데스크탑 퍼스트(desktop.. 2022. 5. 25.
CSS 포지션(position) CSS 에서 포지션에 대한 이해와 사용은 중요합니다. CSS에서 포지션(position)이란? HTML에서 요소(엘리먼트)를 화면상에 어떻게 배치할 지를 지정하는 속성입니다. 즉 포지션 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치하고 어떤 방식으로 사용할지를 결정할 수 있습니다. 포지션 속성을 지정하는 값은 5가지가 있습니다. static, relative, absolute, fixed, sticky 1) static position - static 포지션은 기본 포지션입니다. - 즉, 명시적으로 기술하지 않으면, static 이라고 보면 됩니다. - 포지션은 내부적으로 top, bottom, left, right 속성들이 있지만 static 포지션인 경우는 위치상으로 아무런 변화가 없습니다. .. 2022. 5. 10.
CSS 디스플레이 타입 (display types) css에서 개념적으로나 사용상으로 중요한 부분 중 하나가 css 디스플레이 타입에 대한 내용입니다. 이것을 사용하기전에 해당 개념에 대해서 이해하는 것이 필수적입니다. (1) 요소의 종류 * 연습 소스 *block태그(영역설정,한줄엔터)* 제목태그 1 제목태그 2 *inline태그(영역불가,한줄연결)* 링크태그 1 링크태그 2 *inline-block태그(영역설정,한줄연결)* 1 2 (2) display 속성 사용법 위의 3가지 요소를 가지고 아래와 같이 디스플레이를 선언해서 사용합니다. * 연습 소스 *block태그(영역설정,한줄엔터)->inline태그* 제목태그 1 제목태그 2 *inline태그(영역불가,한줄연결)->block태그* 링크태그 1 링크태그 2 *inline-block태그(영역설정,한줄연.. 2022. 4. 29.
CSS에서 사용하는 크기조정(Pixels, rem, em) 픽셀은 절대 단위이며 rem과 em은 상대 단위입니다. (1) 픽셀 (pixel) 정의 정의 : 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 많이 사용되는 단위가 픽셀(px)입니다 즉, 실생활에서 1cm가 항상 1cm 인 것처럼, 1px도 항상 1px입니다 1px(=0.02645833cm) (2) rem 정의 rem은 root em의 약자입니다. 즉 최상단(root)의 기준으로 크기를 맞추겠다는 의미인데 최상위 태그인 html에 정의된 사이즈를 기준으로 배수하겠다는 것입니다. (3) em 정의 em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것 em은 이와 같이 상위의 부모요소의 폰트사이즈를 기준으로 하기 때문에 아래와 같이 해당 요소를 계속 중.. 2022. 4. 6.
크롬개발자도구를 알아보자 구글에서 만든 웹 브라우져인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다. html, css, javascript의 개발을 위한 생산성 극대화가 가능합니다. 개발자를 위한 도구처럼 보이지만 html 스타일을 위한 크기, 간격, 색깔 등 정확한 값을 다루는 도구이므로 디자이너에게도 중요합니다. (1) 크롬 개발자 모드 변경 방법 크롬 개발자모드로 진입하는 방법을 몇가지 제공합니다. 웹사이트에서 F12를 누른다 웹사이트에서 오른쪽 버튼 클릭하여 검사 메뉴를 선택한다. 단축키를 사용 (윈도우: ctrl+shift+i , 맥: command+option+i) (2) 크롬 개발자 모드 메뉴 (3) 크롬 개발자 모드 설명 Elements # HTML 코드를 분석하고 실.. 2022. 1. 31.
html 폼(form)태그의 GET방식과 POST방식 폼태그는 웹페이지에서의 입력 양식을 의미합니다. 웹 프론트단 개발시 로그인이나 등록화면에서 자주 사용하는데요 폼태그를 배울 때 중요한 것 중 하나는 폼태그의 method 속성을 이해하는 것입니다. Method방식에는 get방식과 post방식이 존재합니다. (1) GET 방식 parameter를 헤드에 붙여서 보내기 로서 URL에 노출되는 방법, 보안 취약 (예시) http://localhost/login.php?id=turtlecoding&pswd=turtlecoding (2) POST 방식 parameter를 바디에 붙여서 보내기 로서 URL에 안보임 (예시) http://localhost/login.php 일반적인 태그 예시 아이디 비밀번호 (3) 입력(input) 태그 개요 입력태그인 태그 다양하게.. 2022. 1. 28.