CSS 이것 저것 모음

@#@#@@@@@@@@@@@@ 엑셀변환시 @#@#@#@@@@@@@@@@@@@@@@@

액셀변환시


앞자리 숫자0의 짤림 방지(서식-텍스트)
mso-number-format:"\@";

<BR>이 행을 바꾸게 된다.
그걸 방지함
br {mso-data-placement:same-cell;}

@#@#@@@@@@@@@@@@ 중복줄 한줄로 @#@#@#@@@@@@@@@@@@@@@@@

style="BORDER-COLLAPSE: collapse"


word-spacing:5pt;    ////////단어간 간격 조절

letter-spacing:7pt;    ////////자간 조절

line-height:200%;    /////////줄간격 조절

text-indent : 문단의 첫 줄이 들여쓰기 됩니다. (값은 들여쓰기 되는 길이)
절대적 단위 : cm, mm, in, pt, pc, px
상대적 단위 : em, ex
퍼센트(%) : 상위 객체에 비례하여 적용 됩니다. 


* 테이블 사이즈 고정
tyle="table-layout:fixed;"

* 자동 줄바꿈 
style="word-break:break-all;"

* 테이블 크기와 관계없이 늘어나게
nowrap



white-space: nowrap

inherit 말그대로 상속 받는 것
normal 일반적인 것, default
nowrap 줄바꿈을 하지 않는다
pre
태그와 같은 기능, 마크업에서 앤터로 줄바꿈 한것 만 적용이 되고 넘어가는 것에는 줄바꿈 하지 않는다
pre-line 마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다
pre-wrap pre-line 과 비슷



@#@#@@@@@@@@@@@@ CSS 프린터설정 @#@#@#@@@@@@@@@@@@@@@@@


<style rel="stylesheet" type="text/css" media="all" />
 @media print {
  @page{
   size:210mm 297mm;
  }
  body{background:none}
  #top{display:none;}
  #quickMenu{display:none;}
  .OpenSlideDiv{display:none;}
  #subFlashArea{display:none;}
  #subLeft{display:none;}
  #subRightTitle{display:none;}
  #subRight{
   padding-left:0px;
   background:none;
   }
  #subRight h4{
   display:none;
  }
  #footer{display:none;}

 

  .screen_only{
   display:none;
  }
 }
</style>

출처 : Tong - jupiter0410님의 § HTML & Javascript §통


@############@@@@@@@@@@@ css의 if 문 방식@############@@@@@@@@@@@ 

input {border:expression((this.type=='checkbox'||this.type=='radio')?'0px':'1px solid');

border-color:#999999; font-family:굴림,굴림,arial; font-size: 9pt; color:black; letter-spacing:0; ime-mode:active; background-color:rgb(250,250,250);}

]


@############@@@@@@@@@@@ 레이어 스크롤바 제어 @############@@@@@@@@@@@ 

overflow:auto 자동
overflow:hidden 스크롤없애기 
overflow-y:scroll   세로
overflow-x:scroll   가로

@############@@@@@@@@@@@ 배경색 투명 @############@@@@@@@@@@@ 

background-color:transparent


@############@@@@@@@@@@@  레이어위치 @############@@@@@@@@@@@ 

position:absolute (절대경로)
position:relative (상대경로)


@############@@@@@@@@@@@  CSS에서 스크립트 제어 @############@@@@@@@@@@@ 


이미지 테그에 <a>를 걸면 클릭시 점선이 보입니다.
이걸 안보이게 할려면 <a onfcous="this.blur();"> 와 같이 해주면 되죠. 
그럼 이걸 CSS에서 할수는 없을까요?

이런 의문을 가지고 구글, 네이버를 검색하면 다음 소스를 쉽게 봅니다.

<style> 
a { 
selector-dummy:expression(this.hideFocus=true); 
} 
</style> 

이걸 넣으면 되죠. 이야~~~ 그렇군! 하고는 다른사람에게도 열심히 가르쳐 줍니다.
(그래서 네이버에서 검색하면 이 CSS코드가 넘쳐나고 있죠.)

재미있는건, 위의 코드를 이렇게 바꾸어도 된다는 겁니다. 

<style> 
a { 
test:expression(this.hideFocus=true); 
}
</style> 

뭔가 이상하죠? 
selector-dummy 이 뭔가 명령언줄 알았더니 아닌가 봅니다. 

이 CSS의 핵심은 expression 입니다. 
expression  는 CSS에서 DHTML를 읽기/쓰기를 지원하는 확장 메소드입니다. 
원래는 setExpression이라는 Method 이지만 (CSS가 아닌 DHTML에.), CSS Stype안에서 쓸때는 그냥 expression() 으로만 표현합니다.

쉽게 말하면, CSS안에서 Javascript를 사용할 수 있도록 지원하는 명령어입니다 ! !
그래서 놀랍게도 다음과 같은 CSS도 작동합니다. 

<style> 
a { 
test:expression(alert('떠라~')); 
}
</style>
이렇게 하면 그 페이지에 있는 <a>테그 수만큼 Javascript 경고창이 뜹니다.
이건 어떤가요?
<style> 
a img {
test:expression(imgChang(this));
}
</style>
<script>
function imgChang(obj){
  obj.onclick = function() {
   obj.src = "bbbb.gif";
  }
}
</script>

<a><img src=aaa.jpg></a>
페이지를 띄우고 이미지를 클릭하면 이미지가 aaa.jpg에서 bbb.gif로 바뀝니다. 
왜냐? <a> 테그 안에 있는 <img>테그에 imgChang() 라는 Javascript 함수를 할당했기때문이죠.
CSS표준이 아닌 MS 확장 기능이기때문에 IE 에서만 작동된다는 문제가 있기는 하지만, 
알고 있으면 어딘가 유용히 쓸 수 있는 기능이죠. 
expression(this.hideFocus="true); " 처럼 말이죠. 

잘 만들어진 외부 샘플을 하나 참고 하겠습니다. 
http://www.adp-gmbh.ch/web/css/expression.html 
위 링크의 소스를 Html로 만들어 보면, 재미있는게 있습니다.
left : expression(document.getElementById ('table_container').scrollLeft);
클래스가 적용된 객체의 left 픽셀값을 table_container 테이블의 가로 스크롤 이동값으로 한다.. 인데, 해보면 재미있습니다. ^^


MSDN DHTML Reference : setExpression
http://msdn.microsoft.com/workshop/auth ··· sion.asp 


샘플
http://www.adp-gmbh.ch/web/css/expression.html 





요즘 간만에 Client 단 작업을 하다보니...이런것도 필요하더군...
어떤 조건에 맞춰서 CSS 값을 바꿔주는. 뭐 경우에 맞게 클래스를 몽땅 만들어서 지정해 줘도 되겠지만...나의 귀차니즘은 끝을 알 수 없는지라... @@;;

CSS 를보면 expression 이란것이 있다 여기에 어떤 구문을 넣어주면 해석해서 결과를 리턴한다. 이것이 관건이지...
input 태그의 종류가 여러가지 있는데 일률적으로 input 태그에 border:1px 를 주게되면 checkbox나 radio 에도 border가 생겨 흉하다. 그렇다고 따로 클래스를 만들기는 앞서 말한것과 같이 귀찮은 작업...
해서 요로코럼 해주면 되고... 나머지는 응용해서 쓰시길....
input
{
    font-size:9pt;
    border:expression((this.type=='checkbox'||this.type=='radio'||this.type=='button')?'':'1pt solid #CCCCCC');
    background-color:expression((this.readOnly)?'#EAEAEA':'');
    cursor:expression((this.type=='button'&&this.disabled==true)?'':((this.type=='button')?'hand':''));
    filter:expression((this.type=='button'&&this.disabled==true)?'alpha(opacity=60)':'');
}
출처 : http://blog.naver.com/eternize/30019212884
이번에는 지난번에 소개해 드렸던 Expression을 사용한 꽁수 하나를 소개하겠습니다.또한, Expression은 IE 전용인지라, Firefox에서는 어떻게 동적으로 적용시킬 수 있는지도 설명 드리겠습니다.
먼저, 어떤 꽁수냐 하면, 링크된 파일의 확장자를 보고 확장자에 맞는 아이콘을 앞에 보여주는 간단한것입니다.
IE 용인 Expression을 사용하여 본다면

a { expression(어쩌구 문법) }
이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 Expression은 적용 시킬 수 있을것입니다.
그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.
a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}
음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;
[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.
.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.
[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.

<style>
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>

<a href="test.pdf">test1</a><br/>
<a href="test.gif">test2</a>
[출처] CSS 동적기능 Expression|작성자 라즈룬



#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@  inputbox에 type 설정

이전 글에서 데스크탑의 input type에 따른 지원 브라우저와 디자인을 확인해보았다.  그리고 이번 포스트를 통해 모바일에 따른 
input type을 확인 해 보려 한다. 

모바일에서의 input tyep의 속성들은 PC버전과 동일한  23각지가 있으며 대부분의 모바일의 브라으져는 html5를 지원하기에 pc버전에 
더 많이 지원을 한다.

또한, 모바일의 input은 속성에 따라  keypad의 모양이 다르기 때문에 사용목적에 알맞은 속성을 입력해주는게 중요하다.

1. TEXT(default) 
아이폰의 경우 키보드 키패드가 나타나며 안드로이드의 경우 천지인이 나타납니다.
 
2. Number 
input type "number"는 아래와 같이 숫자판이 먼저 나타납니다.

3. Tel 
tel은 안드로이드의 number와 비슷해 보이지만  *,#이 추가로 나타나고 숫자 옆에 영자판이 나타는걸 확인할 수 있습니다.

4. URL 
URL속성은 영문키패드가 나오며 ios는 .com 이 안드로이드는 점(.)과  WWW. ,/ /등이 추가적으로 보입니다..

5. Email 
URL과 흡사합니다. 하지만 @과 점(.) , .com 이 추가된 것을 볼 수 있습니다.

6. Search 
Search는 text속성과 비슷하지만 Enter버튼이 다르다. "검색" 과 "돋보기아이콘"으로 표시된다.

7. password 
password는 영문자판으로 나타난다. 그리고 다른 input type과 달리 input에 검은색 블릿아이콘(●)으로 표시된다.

8. Time 
time 부터 month, date 등 시간, 날짜를 입력받는 타입은 키보드자판이 아닌 롤렛? 자판으로 나타난다.

9. Month 
Month는 년,월을 입력받을 때 사용된는 속성으로 디자인은 아래와 같다.

10. Date 
Date는 Month와 비슷하나 년,월, 일까지 입력받는다.

11.Datetime과  Datetime-local 
datetime은 ios의  Safari에서는 text 속성과 차이가 없으며 안드로이드에서는  datetime과 datetime-local과 똑같은 
형식으로 값을 입력받는다. 년, 월, 일, 시간을 입력받을 때 사용한다.

12. week 
Week은 년의 몇번째 주를 입력받을 때 사용한다. 하지만 IOS에서는 네이버, Safari에서 확인해본 결과 아래와 같이
표시되면서 사용이 안된다..

13. Color 
Color는 색을 입력받을 수 있는데.. 아이폰에서는 안된다. 안드로이드에서는  Color Input을 터치하면 아래 왼쪽이미지 처럼 나오며
더보기를 터치했을때 오른쪽과 같이 나온다.

14. ETC 
위에 소개한 13가지 속성외에 button, reset, checkbox,radio등등은 아래 input box 기본디자인을 참고해주세요.
그리고 file은 다음 글에서 좀 더 자세히 보도록 하겠습니다.



위의 결과들은 제가 아이폰과 노트4에서 직접캡처한 화면입니다. 버전과 기기에 따라서 조금씩 혹은 크게 다를 수 있습니다. 위의 글들은 참고만 해주시고
최종적으로는 서비스될 기기에서 한번씩 체크해보시는 걸 권해드립니다.


##########@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
css 이미지 한개로 롤오버 사용(한개의 롤오버인경우)


/* mlogo */
#mlogo { 
float:left; 
background:url(http://www.arpeggio-mms.co.kr/image/spc.png) no-repeat left top; 
padding:0 0 0 184px; 
height:53px; 
line-height:53px; 
font-size:11px; 
display:inline; 
margin:0 0 0 20px;
}

#mlogo:hover { background-position:left bottom; }
</style>
 <BODY>
 
<a href="https://bedbugs.tistory.com/" onclick="window.open(this.href); return false" id="mlogo" title="내인생에 빈대붙기" ></a>


##########@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
css 이미지 한개로 롤오버 여러게사용(


/* mlogo */
#mlogo { 
background:url(http://www.arpeggio-mms.co.kr/image/snb_off.png) no-repeat;
vertical-align:top;
display:inline-block;width:184px;height:25px;
background-position:5px -80px; //위치를 설정한다.
}

#mlogo:hover { background-image:url(http://www.arpeggio-mms.co.kr/image/snb_on.png) !important }

</style>
 <BODY>
  
<a href="https://bedbugs.tistory.com/" onclick="window.open(this.href); return false" id="mlogo" title="내인생에 빈대붙기" ></a>

방식은 똑같넹


<style>
#nav { display: inline; margin: 0px; padding: 0px; height: 46px; list-style-type: none; overflow: hidden;}

#nav #menu01 {BACKGROUND: url(/image/imsi_title.png) no-repeat;
WIDTH: 132px; HEIGHT: 46px; vertical-align:top;background-position:0px 0px;display:inline-block;}

#nav #menu02 {BACKGROUND: url(/image/imsi_title.png) no-repeat;
WIDTH: 137px; HEIGHT: 46px;vertical-align:top;background-position:-133px 0px;display:inline-block;}

#nav #menu03 {BACKGROUND: url(/image/imsi_title.png) no-repeat;
WIDTH: 136px; HEIGHT: 46px; vertical-align:top;background-position:-270px -92px;display:inline-block;}

#nav #menu04 {BACKGROUND: url(/image/imsi_title.png) no-repeat;
WIDTH: 173px; HEIGHT: 46px;vertical-align:top;background-position:-407px 0px;display:inline-block;}

#nav #menu05 {BACKGROUND: url(/image/imsi_title.png) no-repeat;
WIDTH: 139px; HEIGHT: 46px; vertical-align:top;background-position:-578px -46px;display:inline-block;}

</style>

<ul id="nav">
<li id="menu01"></li>
<li id="menu02"></li>
<li id="menu03"></li>
<li id="menu04"></li>
<li id="menu05"></li>
</ul>



#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@

  text-transform property 는 text의 capitalization(대문자) 를 제어한다.

none : default 값으로 capitalization하지 않는다. Text를 그대로 유지한다.
capitalize: 첫번째 입력되는 값을 대문자로 변환
uppercase : 모든 character 를 대문자로 변환
lowercase : 모든 character 를 소문자로 변환
inherit : 부모 요소의 값을 상속하도록 지정한다.


#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@
FONT 한번에 지정하기


<순서> font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family, generic-family]

font-style normal, italic, oblique, inherit
font-variant normal, small-caps, inherit
font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
font-size/line-height 길이(px, pt, cm, em 등), %, 지정 값, 상대 값, inherit / normal, 숫자, 길이(px, pt, cm, em 등), %, inherit
font-family 글꼴 이름, 글꼴 형식, inherit

<예> font:italic small-caps 700 16px/5 tahoma, 'malgun gothic', sans-serif



#############$$$$$$$$$$$$$$$$  웹폰트 $@@@@@@@@@@@@@@@@@@@@@@@@@


@font-face {
font-family:ng;
src:url(./css/NanumGothic.eot);
src:local(※), url(./css/NanumGothic.woff) format(‘woff’); -- IE, 크룸 이것 저것 된다더만 크롬 안되서 ttf도 넣어봤음
src:local(※), url(./css/NanumGothic.ttf) format(truetype); --무거우면안좋음 이건 별로
}
body {font-family: 나눔고딕, NanumGothic, ng, '바탕체';}




#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@ 모바일에서 input focus시 라인없애기

input, textarea {outline:none;}
혹은 
input:focus, textarea:focus {outline:none;}


input, textarea {outline-style:none}
혹은 
input:focus, textarea:focus{outline-style:none}



#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@ 모바일에서 스크롤바 표시 css3로 강제적용



#FoCont::-webkit-scrollbar {
 width:5px;
 height:5px;
}
#FoCont::-webkit-scrollbar-track-piece  {
background-color:rgba(165, 20, 15, 0.2);
}
#FoCont::-webkit-scrollbar-thumb {
width: 15px;
background-color:rgba(165, 20, 15, 1);
}


#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@  CSS에서도 특정 부분에  색적용

짝수면 배경
.ul_table_list li:nth-child(even) {
background-color: #f9f9f9;
}


#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@  CSS에서 글자 초과시 ...

text-overflow:ellipsis;white-space: nowrap;overflow: hidden; 



#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@  input box에 입력안내 글 설정가능

::-webkit-input-placeholder{
color:red;
}


#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@  vertical-align:middle 이미지


display:table-cell;  테이블화 시켜버려요



렇다면 이미제 세로 가운데 정렬을 위한 솔루션은 나왔다.

<div style="height:100px; line-height:100px; vertical-align:middle;">
<img src="#" alt="" />
</div>

요런식으로 height값과 line-height값을 동일하게 맞춰주고 vertical-align 값을 middle로 해주면
이미지의 세로 가운데 정렬이 가능하다.

다만.......문제는 이것이 쿼크 모드에서는 안먹는다.......ㅡ_ㅡ
무론 내년 4월에 전 법인 대상으로 접근성 이슈를 처리하면서 전부 표준모드로 이행해야 하느라 발등에 불나는 상황이지만 (me too)
혹시 모르는 일이니 일단 꼼수라도 적어두자면

<div style="height:100px;">
<img src="#" alt="" style="position:relative; top:50%; margin-top:-**px;" />
</div>

이런식으로 해주면 되기는한다.
margin-top값을 **로 표기한 이유는 margin-top 값에는 img객체의 높이값의 절반의 음수값이 들어가야 하기 때문이다.(복잡하다...ㅡ_ㅡ)
즉......img가 20픽셀짜리 이미지일 경우 margin-top값은 -10px로 넣어주면 된다는 이야기.

번외로 line-height 값에 대해 좀 더 설명을 하자면
위에서 line-height 값은 인라인 박스의 높이값을 설정한다고 써 두었는데
이 말대로라면 내부 컨텐츠에 따라 높이값이 바뀌는 인라인 속성 박스들의 높이를 설정하는것이 가능하다는 이야기.
다만, 나도 아직 테스트 안해봤으므로 한번 해보시면 알것임.
인라인박스 높이만 설정 가능해도 정렬할때 큰 도움이 될텐데 종종 사용해 봐야겠다.
[출처] 이미지 세로 가운데정렬(img vertical align) 그리고 line-height 속성|작성자 은마군


#############$$$$$$$$$$$$$$$$$@@@@@@@@@@@@@@@@@@@@@@@@@   CSS로 글자 자르기 - 한 줄, 여러 줄

 
 CSS

.target {
/* 한 줄 자르기 */
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* 여러 줄 자르기 추가 스타일 */
white-space: normal;
line-height: 1.2;
height: 3.6em;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

 
text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로
 
word-wrap: break-word : 잘라버릴 글자를 단어 단위로
display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환
-webkit-line-clamp: 3 : 보여줄 줄 갯수
-webkit-box-orient: vertical : 플렉스 박스의 방향 설정

height 대신에 max-height 를 설정해서 최대치만 제한해도 된다.
 
크롬이나 오페라, 사파리 같은 웹킷 계열의 브라우저는 여러 줄의 글자를 자르는 자신만의 방법을 제공하고 있기에 높이나 줄 높이 설정이 필요치 않는다. 다만 크로스브라우징을 위해서 필요할 뿐이다.

한 줄 자르기일 경우에서 new등 과 같은 아이콘이 옆에 따라 붙길 원한다면 width값을 auto로 설정하면 된다.