얼마전 Editplus 버전을 업데이트 했습니다.

잠깐 테스트 용으로요..

그런데 왠 못 보던 메뉴가 생겼습니다.

ZC라는 Zen Coding입니다.

 

CSS나 혹은 jQuery를 많이 다뤄보신 분이라면.. 굉장히 편하게 Html을 작성 할 수 있는 코딩 도우미 입니다.

거의 모든 Editor에서 사용이 가능한 것 같습니다. vs 2010, 2012, editplus, eclips 등등등

 

코딩 형태는 아래와 같습니다.

div#id.className>div.test

그리고 지정해 놓은 ZC 단축키를 누르게 되면 아래와 같이 확장 됩니다.

div#id.className>div.test
<div id="id" class="className">
	<div class="test"></div>
</div>

CSS나 jQuery를 많이 다뤄보신 분이라면.. 바로 알아 차릴 수 있는 직관적인 코딩 도우미라고 할 수 있겠네요!!

저 같은 경우에 개발자이다 보니.. css 관련 명령어가 가물가물한데..

ZC가 있으니 편하게 개발 할 수 있습니다.

 

간단한 Html 명령어는 아래와 같습니다.

<!-- Html Doc Type -->
html:4s, html:4t, html:xt, html:xs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>
<!-- 순차 넘버링 -->
ul>li.className_$$*4, $$$*7
<ul>
	<li class="className_01"></li>
	<li class="className_02"></li>
	<li class="className_03"></li>
	<li class="className_04"></li>
</ul>
<!-- 자동 확장 -->
table+, ul+
<table>
	<tr>
		<td></td>
	</tr>
</table>

CSS 관련 명령어는 아래와 같습니다.

@i
@import url();

!
!important

pos:s, pos:a, pos:r, pos:f
position:static;

d:n, d:b, d:i
display:none;

m:4, m:a, m:0, m:2
margin:0 0 0 0;

p:0, p:a, p:0, p:2
padding:0;

op:ie
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

 

좀더 자세한 내용은 아래 링크에서 확인 할 수 있습니다.

Zen Coding URL

Html Elements

Html Selectors

Css Properties

 

처음부터 접근하고자 한다면 좀 어려울 수도 있겠지만 CSS나 jQuery를 많이 다뤄보셨다면 충분히 편하고 누군가 설명해 주지 않아도 바로 바로 해 볼 수 있어서 편합니다.

위키 문서에 보시면 좀 더 자세한 설명이 있으니 한번씩 잠깐만 살펴보시고 쓰세요~

 

고맙습니다.


 

Zoom 이라는 속성이 있습니다.

값은 normal, number(scale), percentage를 받으며 적용은 아래와 같습니다.

 

body {
	/* default : normal, 1.0, 100% */
	zoom:1.25;		/* number(scale) */
	/*zoom:125%;	percentage */
}

script의 경우는 아래와 같습니다.

$(document).ready(function() {
	//document.body.style.zoom = 1.00;
	//document.body.style.zoom = "100%";
	document.body.style.zoom = "normal";
});

 

적용은 간단합니다..

이것은 IE 전용입니다. (하지만 Chrome, Safari4+ 에서도 됩니다.)

 

MSDN 참고하려면 여기를 클릭하세요.

 

CSS3의 Transform을 이용하여, Firefox, Opera도 지원 가능합니다.

 

코드는 아래와 같습니다.

body {
	-webkit-transform:scale(1.50);
	-webkit-transform-origin:0 0;
	-moz-transform:scale(1.50);
	-moz-transform-origin:0 0;
	-o-transform:scale(1.50);
	-o-transform-origin:0 0;
}

 

$('body').css('-webkit-transform','scale(' + (size) + ')');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(' + (size) + ')');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(' + (size) + ')');
$('body').css('-o-transform-origin','0 0');

 

아래는 적용 화면 입니다.

 

 

코드에서 -webkit-, -moz-, -o-에 대한 설명입니다.

  • webkit : 크롬, 사파리(web kit 기반)
  • moz : 파이어폭스
  • o : 오페라

 

에 해당하는 핵이라고 보시면 될 듯 합니다.

지원 버전은 FF 3.5+, Safari 4+, Opera 10.0+ 입니다.

 

transform 의 속성은 더 많은 값들을 가지고 있습니다.

아래 참고 사이트에서 확인하시기 바랍니다.

 

참고 사이트

http://www.w3.org/TR/css3-2d-transforms/

https://developer.mozilla.org/en/CSS/-moz-transform

http://css3.bradshawenterprises.com/#how2transitions

 

 소스 파일 :





감사합니다.




  1. 정우 2011.03.08 22:54

    감사합니다..^^

  2. 파워유 2011.08.27 22:29

    감사합니다!

  3. 수정 2011.09.02 15:41

    소스 잘 작동합니다. 그런데, css에 위의 코드가 들어가면 swf파일이 보이지 않는 현상이 있네요ㅠ 새로고침해야 보이네요. 왜 그럴까요??

긴 문자열이나, 1byte 문자열이 쭈욱~ 있을 경우.. 레이아웃이 틀어지는 현상이 발생 될 수 있습니다.

 

여기서 할 수 있는 방법이 라인 변경이나, 문자열을 … 처리 하는 방법이 있는데.

오늘은 … 처리하는 방법을 알아보도록 하겠습니다.

 

 

위와 같은 형태로 처리하는 방법에 대해서 알아보도록 하겠습니다.

 

위 방법은 text-overflow라는 css를 이용하게 되는데 ie6, Opera, firefox 등에서는 몇 가지 추가적인 사항이 있습니다.

 

일단 처리된 css를 보십니다.

 

.ellipsis{
	white-space:nowrap;
	text-overflow:ellipsis;		/* IE, Safari */
	-o-text-overflow:ellipsis;		/* Opera under 10.7 */
	overflow:hidden;			/* "overflow" value must be different from "visible" */ 
	-moz-binding: url('ellipsis.xml#ellipsis');
}

 

text-overflow, overflow ie7, ie8, safari에서는 다음 속성으로 조절이 가능하나 다른 브라우저에서는 아래와 같이 추가되어야 합니다.

ie6 : width (style로 정의 되어야 하며, <div width=”100%” 와 같은 attribute로는 지원되지 않습니다.

opera : -o-text-overflow (오페라 버전이 10.7 이후부터 적용가능)

firefox : -moz-binding: url('ellipsis.xml#ellipsis');
현재 지원 되지 않아 description 속성을 이용하여 처리되어야 합니다.

-- 2011.04.06 추가 내용
firefox 4.* 으로 버전 업되면서 xml을 이용한 처리가 되지 않는다고 합니다.
자세한 내용은 아래 블로그에서 확인하시기 바랍니다.

CSS 말줄임 처리의 브라우저 호환성 문제 

 

firefox를 위한 xml은 아래와 같습니다.

 

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
    </content>
  </binding>
</bindings>

 

좀 더 자세한 내용은 아래 링크를 참고하시기 바랍니다.

https://developer.mozilla.org/En/CSS/Text-overflow

https://developer.mozilla.org/en/XUL/description

 

이제 본격적으로 적용 방법입니다.

 

일단 div에서는 class에 제가 선언한 ellipsis, width만 추가되면 됩니다.

 

<div class="ellipsis" style="width:50%; border:solid 1px black;" title="(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다.">
	(변경 전)나는 자랑스러운 태극기 앞에 조국과 민족의 무궁한 영광을 위하여 몸과 마음을 바쳐 충성을 다할 것을 굳게 다짐합니다.
</div>

 

 

다음은 테이블입니다.

<table width="50%" border="1" style="table-layout:fixed;" cellspacing="1" cellpadding="1">
	<tr>
		<td>
			<div class="ellipsis" style="width:100%;">
				(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</div></td>
		<td style="width:30px; text-align:center;">1</td>
		<td style="width:30px; text-align:center;">2</td>
	</tr>
</table>

 

테이블로 처리 되는 경우에는 반듯이 style 속성에 table-layout:fixed 값이 설정되어야 합니다.

그리고 점선 처리되어야 할 컬럼에만 width 속성을 뺀 다른 곳에는 반듯이 width 속성이 들어가야 됩니다.

그래야지 테이블을 유지합니다.

 

테이블의 width를 persent로 설정한 이유는 테이블 사이즈의 변경 모습을 확인하기 위함이며, 말줄임 처리 되는 컬럼에 width 값은 100%를 주어 꽉차게 만든 상태입니다.

 

td에 ellipsis를 바로 적용할 수 없으며, div로 감싸게 되는 이유는 에… 예전에 들었는데..

제가 개발자라.. 잊어버렸습니다. ㅡ.ㅡ;;;;  퍼블리셔분들은 꼭 알고 있어야 할 내용이었는데요 *_*;;;;;

 

아무튼 div로 감싸야 됩니다. ㅡ.ㅡ;;;;

 

이렇게 되면 테이블 사이즈가 변경되어도 함께 말줄임 사이즈도 변경될 수 있습니다.

 

ul, li에 적용 방법은 다음과 같습니다…

뭐.. 위와 동일하다고 생각하시면 되는데 sample이라고 생각하시면 좋을 듯 합니다.

 

#ul li {
	white-space:nowrap;
	text-overflow:ellipsis;		/* IE, Safari */
	-o-text-overflow: ellipsis;	/* Opera under 10.7 */
	overflow:hidden;			/* "overflow" value must be different from "visible" */ 
	-moz-binding: url('ellipsis.xml#ellipsis');
	width:100%;
}

 

<ul id="ul" style="width:50%; border:solid 1px black; list-style-image:none; list-style-type:none; padding:0; margin:0;">
	<li>
		<a style="cursor:hand; cursor:pointer;" onclick="alert('li_1 click');">
			li_1 (변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.(변경 후)나는 자랑스러운 태극기 앞에 자유롭고 정의로운 대한민국의 무궁한 발전을 위해 충성을 다할 것을 굳게 다짐합니다.</a></li>
	<li>
		li_2
		<ul>
			<li>li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___li_child___</li>
		</ul>
	</li>
</ul>

 

이렇게 하시면 cross browser 말줄임이 구현됩니다.



 

감사합니다.



  1. 장범석 2011.05.15 17:09

    정말 자세히 정리해주셨네요! ^^ 감사합니다~

  2. 김하나 2011.09.21 11:43

    너무 잘 읽었습니다. ^^

  3. Favicon of http://blog.naver.com/park5645/30136441317 BlogIcon 나무꾼 2012.04.19 10:45

    정말 도움이 많이 되었습니다. 고마워요!!!!!!

사이즈가 맞지 않았거나 이미지를 인위적으로 줄여 놓을 경우...
이미지가 계단 형태로 깨져 보이는 경우가 생깁니다..

그런 경우...
스타일 적용으로 아주~ 간단하게 해결 하는 방법이 있습니다..

IE에서만 작동 되며,~
FF에서는 안되는 것 같고요~
IE 8에서는 사용해 보적이 없습니다~

결론적으로 아래와 같이 스타일에 추가하시면 됩니다~





감사합니다~ ㅎㅎㅎ

숫자나 혹은 영문자를 띄워쓰기 없이 쓸 경우..
테이블이 깨질 수 있습니다..

그럴때 대비해서 태이블 트러짐을 막는 스타일이 있습니다.

참고 하세요~



위 방법은 하나의 컬럼에 적용하는 방법이며, 자동 줄 바꿈입니다..



위 방법은 컬럼 마지막에 점선 표시하는 형태입니다..

참고 하세요~

참.. 까다롭습니다 ㅡ.ㅡ;;;;;;;;;;;;;

웹에디터가 많이 나와서 html 태그로 인해.. 레이아웃 전체가 틀어지는걸 막는 방법 아시는 분은 가르쳐 주세요~ ㅠ.ㅠ


메일을 띄울때 내용, 제목, 받는 이, 참조자, 비밀 참조자, 첨부파일을 추가하여 띄울 수 있습니다..

subject
Text to appear in the subject line of the message.
body
Text to appear in the body of the message.
CC
Addresses to be included in the "cc" (carbon copy) section of the message.
BCC
Addresses to be included in the "bcc" (blind carbon copy) section of the message.
Attachment
첨부 파일 추가
이런게 있네요~
html은 body에서 지원하지 않습니다. *_*;;

그래서 저는 포기~

참고 소스는 아래를 보셔요~

http://msdn.microsoft.com/ko-kr/library/aa767737(en-us,VS.85).aspx


IE 7, FF 3에서만 확인했습니다.
IE6에서 될런지 *_*;;;;;;

알 수가 없으니 확인해 보시길 바랍니다~ 므흣~



위의 코드는 아래와 같은 이미지로 변환되어져 보입니다..

 



+ Recent posts