워드프레스 내장 에디터 사용시 미디어 ui 깨지는 현상

Kboard를 사용하거나, 플러그인을 개발할 경우 Front에서 워드프레스 내장 에디터를 사용하는 경우가 많다. 그런데 유독 특정 테마에서 미디어 라이브러리 부분이 UI가 이상해지는 현상이 있다 이 문제 때문에 엄청난 구글링을 했으나 적절한 해결책을 찾지 못했고, 아래와 같이 CSS 코드를 사용중인 테마의 style.css 파일에 추가하는 일종의 편법으로 해결할 수 있었다. .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute !important; width: 1px; word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear...

CSS 변수(Variables)가 Explorer에서도 작동하게 하는 방법(css-vars-ponyfill)

CSS Custom properties(CSS Variables)를 통해 많은 것을 할 수 있지만, 가장 유용한 것이 CSS에서도 변수를 사용할 수 있다는 것이다. 그런데, 항상 문제가 되는 것이 Explorer와 같은 Legacy Browser가 CSS 변수를 지원하지 않기 때문에, 그 유용함에도 불구하고 섣불리 사용하기 어렵다는 점이다. 이 문제를 해결해 주는 유용한 JavaScript 라이브러리를 소개 하고자 한다. css-vars-ponyfill 설치 요즈음엔 JavaScript 라이브러리를 서버에 직접 적용하기 보다는 해당 라이브러리가 제공하는 CDN을 사용하는 것이 가장 간편하다. HTML 파일의 head 영역안에 다음과 같이 코드를 추가하면, 사실상 기본 환경은 끝. <script...

CSS 변수 사용(CSS Variables)

CSS는 원래 프로그램 언어가 아니라, Mark-up 언어이기 때문에, 변수를 사용할 수 없었다. 간단한 CSS에서는 굳이 변수를 사용할 필요가 없지만, 복잡하고 코드량이 많은 CSS에서는 자주 사용하는 값을 변수로 할당하고, 재사용하는 것이 필요해 진다. 오랜동안 CSS 변수 사용 등 CSS의 기능성을 추가 해 주는 Less와 같은 자바스크립트 라이브러리 또는 Sass와 같은 Processor가 널리 사용 되어 왔는데, 사실 그 불편함은 적지 않았다고 볼 수 있다. 최근에 CSS Custom Properties가 지원되면서 CSS 파일 또는 코드 내에서 별도의 외부 라이브러리 없이 변수를 사용할 수 있게...

opacity 와 rgba

opacity 속성은 배경색의 ‘Alpha’ 값을 부여하여 투명하게 만들어 줍니다. div { background-color: red; opacity: 0.6; } opiacity 속성이 부여된 element의 모든 child element들에도 해당 속성이 적용 됩니다.즉, 아래와 같이 특정 child element에 opacity 값을 다르게 부여해도 상위의 opacity 값이 적용됩니다. .parent { opacity:0.5; } .child { opacity:1; } 만약 배경 색깔은 반투명하게 하고, Text는 원래의 투명도를 유지하고 싶다면, opacity 속성이 아닌 ‘rgba’를 사용해야 합니다. .origina{ background-color: rgb(76, 175, 80); } .origina-alpha{ background-color: rgba(76, 175, 80, 0.5); }

PHP 오류 메시지 표시

브라우저가 업그레이드 되면서, php 오류가 표시되지 않아 개발에 불편함이 있습니다. 서버의 php 세팅 변경을 하는 방법이 있는데, 웹호스팅 환경을 사용하는 분들은 직접 변경하기가 애매할 수 있습니다. 이 경우 간단히 php 파일 최 상단에 다음 코드를 추가 해 주면 됩니다. error_reporting(E_ALL); ini_set("display_errors", 1);