WEB Dev Note

반응형 웹사이트를 제작할 때, 긴 문장을 출력해야 할 경우, 화면 끝에서 단어가 중간에 잘려버리는 문제가 발생한다. 유저의 화면 크기를 예상할 수 없기 때문에 일일이 엔터를 쳐주는것도 불가능한 상황. 이것을 간단히 해결하는 방법을 공유하고자 한다. function lmh_text_block($text) { $result = "".str_replace(" "," ",preg_replace("!\s+!", " ", $text)).""; $result = str_replace(" "," ",$result); return $result; } PHP 함수를 위와 같이 추가하고, .lmh-text-block { display: inline-block; white-space: nowrap; } 이렇게 CSS 클래스를..

iOS나 macOS의 반투명하고 흐린 효과를 웹에서 구현할 수 있다. 예를 들면 아래와 같은 효과. .element-blur 클래스에 3px의 blur 효과를 주는 CSS는 아래와 같다.@supports (-webkit-backdrop-filter: none) { .element-blur { -webkit-backdrop-filter: blur(3px); } } 이렇게 해두면 .element-blur 클래스가 적용된 객체 뒤로 깔리는 모든 요소가 실시간으로 흐리게 처리된다 (스크롤 할때도 마찬가지). 더불어 -webkit-backdrop-filter 에는 blur(), invert(), grayscale() 효과를 줄 수 있으며, 아래 이미지로 설명한다. 이미지 출처: https://webkit.org/..

모바일 웹킷 기반 브라우저, 즉 아이폰이나 아이패드의 사파리 브라우저에서 유동적(dynamically)으로 생성된 객체에 z-index가 제대로 적용되지 않는 문제가 있다. 이는 애플에서도 알고 있는 공식적인 문제인데 조만간 패치가 나오지 않는 이상 아래와 같은 방법으로 우회하여 해결한다. z-index가 적용된 객체의 CSS에 아래를 추가한다. -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-5px); 설명하자면, z-index는 이차원 공간에서 객체를 정렬하지만, preserve-3d를 적용하고 translateZ() 값을 주면 삼차원 공간에서 객체를 위치시킨다. 따지고보면 같은 말인데 모바일 웹킷에서 삼차원으로 해야 작동하는..

Ultimate CSS Gradient Generator는 ColorZilla라는 FireFox 부가기능으로 유명한 Alex Sirota가 제작한 툴이다. 단 한번의 클릭, 혹은 몇번의 클릭으로 그라데이션을 표현하는 CSS를 쉽게 얻을 수 있다. Preview 오른쪽 아래에 IE를 체크하면 Internet Explorer에서 어떻게 보이는지 테스트할 수 있다. (여담: IE9에서도 저렇게 보일까? 언제쯤 표준에 가까워지기라도 할까?) Ultimate CSS Gradient Generator 바로가기

무슨 이유에서인지 아래와 같은 CSS가 Internet Explorer에선 적용되지 않는다. input[type=checkbox] { margin: 10px; border: 1px solid red; } 물론 각각의 checkbox마다 클래스를 주면 적용할 수 있지만 용량 낭비고 시간 낭비다. (이거 뭐 Internet Explorer 때문에 몇줄의 코드를 추가해야 하는건지 -_-) 어쨌든 이와 같은 상황을 해결하기 위해 jQuery를 이용하면 된다. 바로 위에 아래와 같은 코드를 추가한다. 페이지를 모두 로드하고 jQuery가 발동되며 해당 페이지의 input[type=checkbox]를 찾아 설정된 스타일을 입힌다.