본문 바로가기

Dev128

썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 썸네일 이미지 비율유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 썸네일이나 대표이미지의 가로 세로 비율이 고정된 영역에 다양한 이미지의 가로세로 비율이 다를 때, 해당 영역의 크기에 딱 맞춰서 넘치는 영역은 잘려 보이게 하는 것은 조금 복잡하다. 이미지 자체만으로 하려면 서버에서 자체적으로 이미지를 해당 비율에 맞춰서 잘라 주어야 하겠지만, 원본 소스를 유지한체 스타일시트 CSS만으로 해결하려면 어려움이 따른다. 이미지가 세로가 긴 포트레이트일 수도 있고, 가로가 긴 랜드스케이프일 수도 있기 때문이다. CSS는 자체적으로 어느 쪽이 긴 지 알 수 없다. SCSS.. 2020. 10. 11.
제이쿼리 팁 특정 태그에 CSS 적용 jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 크롬/IE color 해석 방식 차이 [제이쿼리 팁] 워드프레스 포스팅 글 내용 중 특정 태그에 CSS를 적용하라 크롬/IE color 해석 방식 차이. jquery .each(), .text(), .addClass(), $(this), .css(), .replace() 요즘 특허 사이트의 콘텐츠용 사이트를 의뢰받아서 워드프레스로 제작 중인데요. 워드프레스 적용 자체는 별 것 아닌 작업이지만, 우리의 까다로운 클라이언트님의 소소한 요청이 워드프레스나 워드프레스 테마의 PHP를 건드리지 않고, 원하는 모양을 만들어 달라는 고난도 요청이 좀 많다. 이 번 요청은 이미 클라이언트가 작성해 둔 글 내용에서 링크들을 특정 모양을 "디자인 스타일대로 CSS를 입혀라"라는 미션입니다. 단! 제한 조건은 클라이언트는 html이나 css에 대해 전혀 모르고.. 2020. 10. 3.
text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 글자르기 width:auto. 글이 길 경우 CSS 말줄임...로 표시 게시판을 개발할 때 귀찮은 작업 중의 하나가 제목을 리스트 폭에 맞춰서 말을 줄이는 것이다. 서버 단에서 미리 길이를 계산해서 출력할 수도 있지만, 사이트 특성상 게시판의 종류가 다양하다거나 하면, 은근히 귀찮은 압박으로 다가오게 된다. 이럴 때 유용한 것이 text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 조합이다. 이걸 쓰면 글이 길 경우 CSS 말줄임...로 표시된다. 금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 -추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택 이렇던 녀석이 이렇게 바뀐다. 소스에서 볼드처리 해둔 부분이 중요한 부분인데, vf_360을 id로 스타.. 2020. 9. 23.
jQuery selector함수 slice() - start, end 까지 index 요소 일부만 선택 between jQuery selector함수 slice() - start, end 까지 index 요소 일부만 선택 between 1번부터 10번까지 형제 요소들이 있을 때 이 중에서 2번부터 5번까지만 선택해서 jquery로 동작을 시키고 싶을 때가 있다. 이럴 때 사용하는 함수가 바로 jquery slice() 메쏘드다. 즉 나열된 요소의 일부만 선택하는 선택자 메쏘드다. 사용방법 사용방법은 다음과 같다. $('selector').slice(2,5).addClass('newClass'); 이와 같이 실행하면, 선택된 요소들에서 eq(2),eq(3),eq(4),eq(5) 가 선택되어서 addClass함수에 의해 'newClass'라는 클래스명이 부여된다. 비단 클래스만 부여하는 것이 아니라 당연히 제이쿼리 제어를 .. 2020. 9. 19.
JSP에러 : HTTP Status 500 에러메세지- sda7: write failed, user block limit reached 가끔 JSP 서버에서 작업하다 보면 아파치가 에라 모르겠다! 배 째! 이럴 때가 있다. 바로 HTTP Status 500 에러 메시지 때문이다. 그중에서 sda7: write failed, user block limit reached를 만나게 되는 경우가 있는데... 이건 사실 별건 아니다. 톰캣의 로그를 살펴보면 위와 같이 에러가 나 있는데, 할당된 디스크 공간을 다 사용했다는 뜻이다. JSP호스팅 서버에서 웹 하드 용량을 살펴보니, 가득 차서, 불필요한 파일을 삭제해서 공간을 삭제해주니, 별문제 없이 제대로 웹페이지가 열렸다. 성남시청 홈페이지는 성남시 IDC에 웹서버를 두고 있다. JSP에러가 난 것은 내 개인 포트폴리오 상에서의 에러다. 2020. 9. 16.
CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다. 더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-; 군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다. 그러면서 단어는 음절단위에서 개행하지 않게 해 달란다. 아하~ 나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다. 그분들의 갈증을 해소해드리고자, 브라우저별로 속성 값이 어떻게 적용되는지를.. 2020. 9. 14.
php 엑셀 다운로드 한글 깨짐 문제 해결 php로 제작된 웹사이트에서 엑셀 다운로드를 받는데 한글로 된 엑셀 파일명이 깨지는 경우가 있다. 문서 제목이 엑셀 다운로드이다보니, ms 엑셀 2010 다운 같은 것을 기대하고 들어온 분들이 많은 것 같다. 그런 분들은 이 곳을 참조! 엑셀 2010 무료 다운 엑셀 2010 무료 다운 파워포인트 2010 무료설치 마이크로소프트 엑셀 2010 무료 다운 로드 설치 blog1.ezip2020.com 예전에는 잘 되다가 갑자기 안된다는 보고가 생기는데, 그럴리는 없다. 처음부터 안되는 것이다. 크롬 브라우저에서는 한글 파일명으로 엑셀 파일 다운로드가 가능하지만 IE에서는 한글 파일명의 한글이 깨지고 이상한 문자로 만들어서 엑셀 파일명까지 인식이 안되는 문제가 생긴다. 보통 php 엑셀 다운로드 소스는 다음과.. 2020. 9. 10.
자바스크립트로 구현한 rgb 색상표 + CSS 16진수 rgb 색상코드 자바스크립트로 구현한 RGB 색상표 + CSS 16진수 색상 코드 2015.08.29 11:11 RGB 색상표를 CSS 16진수(HEX) 색상 코드로 표현하기 퍼블리싱을 할 때 디자인팀에서 지정한 색의 색상을 CSS로 표현할 때 포토샵의 스포이드로 찍어보면 RGB 색상표에서 HEX값을 알 수 있다. 이 RGB 색상표는 #1930a2와같이 표현되는데 난해한 암호 같아 보이지만 다 뜻이 있는 문자의 조합이다. 위에서 일부러 색을 2 글자씩 잘라서 다르게 썼는데, 명민한 사람이라면 금방 눈치챘을 것이다. RGB라는 말의 뜻부터 이해한다면 따로 설명하지 않아도 감이 따악 올 것이다. RGB의 뜻은 R=Red, G=Green, B=Blue를 뜻한다. 그러니 위의 코드에서 #을 제외한 나머지 6자리의 각 두 자리는.. 2020. 9. 7.
워드프레스 이미지를 자르는데 에러가 발생했습니다. 에러. php gd 설치 워드프레스에서 이미지를 업로드 한 다음에 크기 변형이 아닌 자르기 옵션을 사용할 때 에러가 발생하는 경우가 종종 있습니다. 특히 사이트 파비콘을 만들려고 할 때 에러가 발생할 때가 종종있습니다. 워드프레스는 php를 기반으로 한 CMS이기 때문에 php의 GD함수를 사용합니다. 워드프레스 에러 해결방법 시리즈1 파비콘도 만들어 주기 때문에 외부 유틸을 이용해서 파비콘을 만들필요 없이 아무 사진이나 올리고 정사각형으로 잘라서 만들면 됩니다. 그런데 실컫 마음에 드는 이미지를 골라서 업로드해서 손을 바들바들 떨면서 잘랐는데, "이미지를 자르는데 에러가 발생했습니다." 라고 무책임한 에러가 뜰 때가 있습니다. 영문판에서는 There has been an error cropping your image. 라는 에.. 2020. 9. 4.
자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() 자바스크립트 시간 제어 함수 setTimeout(), setInterval(), clearTimeout() 자바스크립트를 이용해서 일정한 시간 간격마다 혹은 일정한 시간이 지난 뒤에 특정 이벤트를 발생시키거나 동작을 취해야 할 경우가 종종 있다. 이럴 때 사용하는 자바스크립트 시간 함수가 바로 setTimeout()와 setInterval()이다. setTimeout(), setInterval()의 가장 큰 차이점은 한 번만 실행하느냐, 계속 반복적으로 실행하느냐의 차이다. 위의 두 예제처럼 단 한번만 적용하고 싶다면 setTimeout을 사용하고, 일정한 시간간격으로 반복 적용하고 싶다면 setInterval()을 사용하면 된다. setInterval에서 1000이라는 숫자는 밀리세컨드로 해당 숫자의 .. 2020. 8. 31.
자바스크립트 link Canonical javascript createElement appendChild window.location.href 결론부터 말하자면 삽질이다. 어느 날 갑자기 구글 애드센스 광고가 뜨지 않길래 확인해 보니 개인 도메인으로 설정된 무료 도메인의 루트 도메인에서 구글 애드센스 정책 위반이 떴다. 무료 도메인은 내도메인.한국 의 주소를 사용했다. 이게 해결이 안되면 광고를 게재할 수가 없단다. 난감하게도... 이 도메인 주소로 네이버 유입이 제법 있다. 그래서 혹시나 301 redirection이라도 써 볼까 했지만 그럴 방법이 전혀 없다. 돈을 쓰면 가능하겠지만... 일단 새로 호스팅을 받지 않는다는 전제 하에 그렇다. 그래서 궁리한 것이 내 도메인 한국의 단일 페이지 수정에서 Canonical를 설정해주고, 자바스크립트 location.href로 리다이렉션을 걸어서 옮기는 방법을 생각해 봤다. 결과는 앞서 말한 데로 .. 2020. 8. 30.
[CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle 결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다. div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다. 보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는 vertical-align:middle을 사용한다. 하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다. 이 때 div의 display속성을 table-cell로 부여함으로써 마치 테이블셀에서의 수.. 2020. 8. 29.

티스토리툴바