넓이(Width)에 비례하는 높이(Height) 만들기

일반적으로 HTML Element의 높이(Height) 값은 고정된 픽셀 값을 지정하게 되는데, 넓이(Width)가 가변적인 반응형 UI에서는 원하는 형태를 유지하기 어렵게 된다. 넓이 대비 비율, 즉, 종횡비를 맞추는 방식이 필요한데, 현재 CSS에 이에 대한 속성이 존재 하지 않기 때문에 약간의 Trick을 쓰거나 JavaScript를 이용해야 한다. CSS Padding 활용 See the Pen Aspect Ratio 1:1 by Andy Jung (@Samchogo) on CodePen. container Class 의 padding-top을 100% 설정하고 내부 요소의 포지션을 절대값(absolute)로 지정, container를 가득 채우는 방식으로 비율 적용을 했다. padding-top을 100%로 설정 했기 때문에,...

JSONP – 원격 데이터 전송

다른 도메인 또는 서버의 데이터를 가져오거나 화면에 표시할때 가장 많이 사용해 온 것이 IFRAME과 XMLHttpRequest인데 최신 브라우저들은 보안 문제로 이에 대한 제한 장치를 두고 있다. 바로 'Cross Domain' 이슈인데, 다른 도메인의 내용을 호출할때 차단해버리는 것이다. 즉, IFRAME과 XMLHttpRequest 는 사실상 같은 도메인 하에서만 사용할 수 있게 되었다고 볼 수있다. 이러한 Cross Domain 이슈 없이 다른 도메인의 데이터를 전송해서 받는 방법으로 JSONP 가 있다. JSONP는 ' XMLHttpRequest'를 사용하지 않고 'script' 태그를 사용하여 다른도메인의 파일을 읽는 방식을 사용한다. 1.처리할 함수 만들기 function...

Shortcode 내부에서 get_template_part 사용 방법

Sortcode 함수 내에서 , get_template_part()를 사용하여 HTML 결과 값을 리턴 하는 방법 function my_ads_shortcode( $attr ) { ob_start(); get_template_part( 'ads' ); return ob_get_clean(); } add_shortcode( 'ads', 'my_ads_shortcode' );

댓글에 구글 리캡챠(reCaptcha) v3 적용

Google reCaptcha v2 인터넷 상에서 자주 보와 왔던, '나는 로봇이 아닙니다.'는 구글의 reCaptcha Version2 이다. 근데 이 방식은 이용자에게 다소 불편을 주고, 보안상의 허점도 발견되어 Version3 가 더 선호 되고 있다. Google reCaptcha v2 intro V3에서는 숨겨진 필드(Hidden Field)를 통해 토큰을 전달하고 서버사이드에서 토큰을 검증하는 방식을 취하기 때문에 이용자의 별도 액션이 필요 없다. v3를 워드프레스 댓글에 적용하는 방법을 알아본다. 1. Google reCaptcha Key 받기 https://www.google.com/recaptcha/admin/create 로 이동하여 reCAPTCHA v3를 선택하여 Key를 발급 받습니다. Key는 두가자기 있는데, Site key는 입력폼 등의...

댓글 입력폼의 불필요한 요소 제거

별도의 댓글 플러그인을 설치하지 않거나 댓글 UI를 잘 지원하는 테마를 사용하지 않을 경우 워드프레서 자체의 댓글 UI가 보여 집니다.한국 사용자들에게는 다소 어색한 UI일 것입니다.그래도 뭐 대세에 지장 없다고 보고 사용하려고 해도 필요 없는 요소들이 몇몇 보입니다. 설정에서 제거 하는 것도 있고, 코드를 약간 수정해서 제거 하는 것도 있습니다. 1. 설정 변경 먼저 설정에서 제거 할 수 있는 것은 '나중을 위해 이름....'의 체크박스 부분입니다.관리자 메뉴의 '설정>토론'으로 들어가서 해당 부분의 체크를 해제 하면 되는데 아래 이미지 참고 하기 바랍니다. 2. 코드 수정...

중앙 정렬 문제(Perfect Centering Issue)

HTML 문서 작성 시 은근히 어려운 것이 바로 중앙 정렬이다. 가로 정렬은 그나마 쉬운 방법이 있지만, 세로 정렬(Vertical Align)은 일종의 Trick을 사용해야만 가능한 경우도 있다.최신 CSS 표준에서는 Flexbox 속성으로 중앙 정열이 까다로운 상황을 쉽게 해결할 수 있는데, 여기서 Flexbox 포함하여 다양한 중앙 정열 방식에 대해 정리한다. 가로 정렬 특정 요소를 가로로 정렬 하는 것은 비교적 간단하다.가장 많이 사용하는 것이 'text-align:center' 속성인데, 이는 text 요소 또는 inline, inline-block 속성을 가진 요소에만 적용 된다. inline 속성이 없는 일반 Element를 가로 중앙 정렬을...

Google fonts를 사용한 Web Font 사용법

Google의 자비로 인해 Web Font 사용이 상당히 쉬워졌습니다.폰트 파일을 서버에 설치할 필요 없이 단 한줄이면 사실상 다양한 웹폰트를 사용할 수 있다고 볼 수 있습니다. Google Font 설정 HTML 문서의 head 영역에 아래와 같이 Style Link를 삽입 합니다. <link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Roboto&display=swap" rel="stylesheet"> 'Nanum+Gothic|Roboto' 이부분이 폰트 이름인데 현재 Nanum Gothic과 Roboto 폰트를 사용할 수 있게 된 상태입니다.폰트를 추가하려면 https://fonts.google.com/ 에 가서 원하는 폰트를 선택한 후 해당 폰트의 이름을 구분자 '|'를 사용하여 위의 코드에 추가해 주면 됩니다.만약 'Lato'라는 폰트를 추가하려면 아래와 같이 코드를 수정해...

붙여넣기(Paste)시 HTML 제거

Input 박스 또는 Editable Element에 복사/붙여넣기 할 때 HTML이 제거된 Plain Text만 붙여넣는 JavaScript 코드 object.addEventListener("paste", function(e){ // 기존 Paste process 중지 e.preventDefault(); // Clipboard로부터 Text 추출 var text = (e.originalEvent || e).clipboardData.getData('text/plain'); // 웹페이지가 아닌 html 코드 자체를 복사했을 경우 text가 추출되지 않기 때문에 별도로 다시 textContent 추출 var temp = document.createElement("div"); temp.innerHTML = text; document.execCommand("insertHTML", false, temp.textContent); });

Scrollbar를 숨기는 확실한 방법

Scrollbar를 없애는 가장 일반적인 방법은 아래와 같이 overflow 속성을 활용하는 방식이다. body{ overflow:hidden; } 그런데, 이렇게 하더라도 내부의 iframe과 같은 요소가 다이나믹하게 길어져서 아래로(스크롤 밖으로) 밀어 낼때 간혹 Scrollbar가 생기는 경우가 있다.이런 경우를 막고 어떤 경우든 스크롤이 생기지 않게 하려면 아래와 같이 별도의 class를 만들어 주는 것이 좋다. .example { overflow : hidden; /* Hide scrollbar for IE and Edge */ -ms-overflow-style: none; } /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar { display: none; } /* How...

클립보드로 복사하기 – Pure JavaScript

JavaScript에서 문자열(String)을 Clipboard로 저장(복사)하는 간단한 함수가 내장되어 있을 것으로 생각했는데, 찾지 못했다.(있을 수도....) Textarea 에서 마우스로 선택된(Select) 문자열이 있을 경우 간단히 'document.execCommand('copy')' 함수를 사용하면 되지만, JavaScript 코드 상의 문자열을 Clipboard로 저장 하려면, 별도의 작업이 필요하다.이에 대해 잘 정리된 함수를 아래에서 참고 할 수 있다. https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/ function copyStringToClipboard (str) { // Create new element var el = document.createElement('textarea'); // Set value (string to be copied) el.value = str; // Set non-editable to avoid focus and move outside of view el.setAttribute('readonly', '');...