이미지 중앙정렬 & 이미지 테두리 & 그림설명 달기 [css, preg_replace] 정보
이미지 중앙정렬 & 이미지 테두리 & 그림설명 달기 [css, preg_replace]
관련링크
첨부파일
본문
이미지가 깔끔하게 나오게 할 방법이 없을까... 생각하다가 한번 해 보았습니다.
사진 테두리 넣을때 원레 CSS를 이용하면 그냥 가능합니다. 이미지 속성에 padding을 넣고
배경색만 설정해주면 멋진 테두리가 완성됩니다.
그러나 항상 문제는 우리 익스플로러씨... 이방법은 익스플로러 모든 버전에서 padding이 적용되지 않습니다.
파이어폭스나 기타 최신 브라우저에서는 적용이 되는 곳이 있습니다.
그러나 익스플로러에서는 안보이고 파이어 폭스에서는 보이고 이렇게 되면 안되겠죠?
그래서 편법을 쓰다가 응용해서 그림에 설명까지 달아 보았습니다.
----------------------------------------------
우선 그림으로 설명해 드리겠습니다.
위와 같이 geditor를 조금 수정합니다.
그러면 주소 입력난 밑에 설명을 넣을수 있는 폼이 생깁니다.
여기에 설명을 넣으면 <IMG alt="" 에 설명으로 넣은 문구가 들어갑니다.
geditor를 사용하지 않으셔도 img 태그에 alt속성만 수동으로 넣어주면 동일한 효과를 볼 수 있습니다.
그리고 출력시에 css와 preg_replace를 이용해서 아레와 같이 출력합니다.
우선 preg_replace로 출력물에 테그를 추가하고 수정하는 법부터 보겠습니다.
$view[content] = preg_replace("/(<IMG[^>]*).(align=left).([^>]*?>)/", "\\1\\3", $view[content]);
$view[content] = preg_replace("/(<IMG[^>]*?>)/", "<div class='image_wrapper'>\\1</div>", $view[content]);
$view[content] = preg_replace("/(<IMG[^>]*alt=).([^\"]*).([^>]*?>)/", "\\1\"\\2\"\\3<p><strong>Figure discription</strong> : \\2</p>", $view[content]);
제가 정규표현식을 이번에 처음해보는거라... 불필요한 표현이 있을지도 모르니 고수분들께서는 좀더 나은 표현식이 있으면.. 알려주세요^^;;
우선 첫라인과 둘째 라인부터 설명 드리겠습니다
----
$view[content] = preg_replace("/(<IMG[^>]*).(align=right).([^>]*?>)/", "\\1\\3", $view[content]);
$view[content] = preg_replace("/(<IMG[^>]*).(align=left).([^>]*?>)/", "\\1\\3", $view[content]);
----
CSS에서는 이미지 정렬 속성을 오른쪽이나 왼쪽으로(align=right || align=left)로 주면 IMG display 속성이 inline으로 설정되고,
중앙정렬이나 속성을 설정하지 않으면 block으로 설정됩니다.
이건 테두리를 만들때 아주 중요한 요소로 inline으로 설정되면 특성상 높이가 설정되지 않아
DIV로 테두리를 씌울수가 없습니다. 그림 윗부분에 걸치는 박스가 만들어 집니다.
첫라인과 둘째 라인은 이런 오른쪽 왼쪽 정렬을 사용자가 실수로나 고의로 입력 했을때 그 부분을 삭제하는 라인입니다.
그리고 세번째 라인
----
$view[content] = preg_replace("/(<IMG[^>]*?>)/", "<div class='image_wrapper'>\\1</div>", $view[content]);
----
출력되는 내용중 모든 img태그바깥에 테두리 생성용 div wrapper를 생성합니다.
마지막라인
----
$view[content] = preg_replace("/(<IMG[^>]*alt=).([^\"]*).([^>]*?>)/", "\\1\"\\2\"\\3<p><strong>Figure discription</strong> : \\2</p>", $view[content]);
----
IMG 태그 안에 있는 alt에있는 문구를 뒤에 <p>문구</p>로 감쌉니다. 이렇게 완료되면
구조가 아레와 같이 됩니다.
----
<div class="image_wrapper">
<img href="이미지경로" alt="그림설명">
<p>Figure discription : 그림설명</p>
</div><!-- end image_wrapper-->
----
이제 사전 작업은 완료 되었고
CSS를 수정 할 시간 입니다.
.image_wrapper {
margin: 0;
padding: 5px 0;
text-align:center;
background-color: rgb(206,130,99);
}
.image_wrapper p {
font-size: .9em;
margin:0;
padding:0 30px;
text-indent: 0 !important;
}
위와 같이 이미지관련해서 CSS를 생성해주면 게시판에 나오는 모든 이미지들은 중앙정렬되고 테두리가 생성되며 alt에 적은 그림 설명이 출력됩니다.
참고: http://bequietzero.com/elincoco/bbs/board.php?bo_table=new&wr_id=9
지금 한창 만드는 중이라 URL이 부정확 할 수도 있어요^^;;
image_wrapper를 잘 조절해 주면 왼쪽으로도 부유시킬 수 있고 오른쪽으로도 부유시킬수 있습니다.
아그리고 참고로 geditor를 수정하는 법을 설명 해 드리겠습니다.
제가 홈페이지를 처음 만들어 보는거라...
자바 스크립트를 처음 접해 봅니다.
그래서 맞는 수정인지 잘 모르지만...
그냥 문맥상 대충 수정한거라 불필요 한게 잇을지 모릅니다.
경로: geditor/geditor.js 파일 530라인 부근 insert_image 함수
650라인 부근
/* 내가 수정 */
var alt_div = document.createElement("alt");
alt_div.style.fontSize = 12;
alt_div.innerHTML = '설명 : ';
var input_alt = document.createElement("input");
input_alt.type = 'text';
input_alt.style.height = '22px';
input_alt.size = 30;
input_alt.value = '';
alt_div.appendChild(input_alt);
/*내가 수정 끝*/
650라인 부근에 주소 입력 폼을 추가하는 소스를 복사해서 위와 같이 수정하고 아레에 붙입니다.
/*내가 수정*/html = "<img src=\"" + file + "\" align=\"" + where + "\" alt=\"" + alt + " \"><br/>\n";
그리고 650라인 부근에 소스를 추가 했을때 확인 버튼에 대한 정의를 내려 놓은 곳이 있습니다.
그곳에서 html소스를 생성하는 곳에 alt를 추가 해 줍니다.
div.appendChild(img_div);
div.appendChild(file_div);
div.appendChild(addr_div);
/*내가 추가*/
div.appendChild(alt_div);
div.appendChild(align_div);
div.appendChild(info_div);
div.appendChild(button_div);
document.body.appendChild(div);
그리고 마지막으로 내가 만든 alt_div를 붙여 넣습니다.
이상 허접한 팁 이었습니다.
CSS의 배경색이나 기타 배경이미지 같은 것을 이용해
테두리 말고 그림자나 기타 여러가지 효과를 표현 할 수 있습니다.
마지막으로 geditor파일은 번거로우실것 같아 첨부합니다.
그누보드/geditor/geditor.js 파일과 비교해서 수정 하시면 됩니다.
1
댓글 1개
근데 discription -> description 수정하셔야겠어요^^;;