밤하늘의 실제별, 나도 가질 수 있다?!

Search Results for 'css'


28 POSTS

  1. 2010/12/22 자주 쓰는 모바일용 CSS3 기억하기 by mkyoon
  2. 2009/09/04 One-Time Expression 한번만 실행시키자. by mkyoon
  3. 2009/03/18 Webkit, Chrome(2.0.169.1)의 User Agent Stylesheet (legend) by mkyoon
  4. 2008/09/29 IE에서 Ordered List - LI 숫자가 전부 1.1.1.1.1.로 나오는 현상. by mkyoon (2)
  5. 2008/09/18 CSS 파일 크기에도 제한이 있다? - CSS Limit @ Internet Explorer by mkyoon (1)

자주 쓰는 모바일용 CSS3 기억하기

1.
box-shadow: 3px 3px red, 2px 2px #eee; 
-webkit-box-shadow: 3px 3px red, 2px 2px #eee;
-moz-box-shadow: 3px 3px red, 2px 2px #eee;


2.
border-radius: 20px/10px;
-webkit-border-radius: 20px/10px;
-moz-border-radius: 20px/10px;


3.
background: url(gradient.png) repeat-x;
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));
background: -moz-linear-gradient(top, #00abeb, #fff);


4.
border-width: 0 20px 0 10px; 
border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;
-webkit-border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;
-moz-border-image: url(http://shared.starpl.com/images2/mobile/btn_reply.gif) 0 20 0 10 stretch stretch;


PS.
<link rel="apple-touch-icon-precomposed" href="http://shared.starpl.com/images2/mobile/img_home_add.png" />
iphone - 57 * 57
ipad - 72 * 72
iphone4 - 114 * 114

Posted by mkyoon

2010/12/22 11:37 2010/12/22 11:37
Tag
,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/137

Trackback URL : http://mkyoon.com/trackback/137

Leave a comment

One-Time Expression 한번만 실행시키자.

Expression.
인터넷 익스플로러(IE6,7)에서만 사용할 수 있는 CSS 표현입니다.
말도 많고 탈도 많은 녀석이죠.

자바스크립트가 최소단위인 천분의 일초로 작동을 한다면
이녀석은 수천분의 일초 아니 거의 만분의 일초까지도 되는 것 처럼 작동을 합니다.
(직접 세어보지는 않았습니다. 그냥 느낌이에요 느낌상-_-;)
예를 들어,
IE6에서는 표현이 불가능한 postion: fixed 속성을 expression으로 표현하면
스크롤을 겁나 빨리 내리고 올려도 울렁거림 없이 거의 완벽한 동작을 보여줍니다.

어떠한 동작(이벤트)이든 일어나는대로
이 수천분의 일초 간격으로 계속 대기하고 읽어들이고 값을 던져주고 있다는 겁니다.
그래서 브라우저에 부담을 주고 심지어는 브라우저를 멈추거나 셧다운-_- 시켜버린다는
무시무시한 소문을 안고 다니는 녀석이죠.

그래도 IE6에서는 지원되지 않는 수많은 CSS 속성을
expression을 사용하여 자바스크립트 언어로 표현이 가능한
엄청난 강점을 갖고 있어서 외면하려고 해도 가끔은 생각이납니다.-_-;

대략 2년 전인가요.
야후에서 근무하는 어떤 멋진(wow) 분이- (지금은 구글 olleh!)
expression의 살인적인 아니 살브라우저적인 호출을  상당히 줄여줄 수 있는 방법을 제시했습니다.


저 페이지를 처음 보았을 당시 전 이제 막 웹표준의 웹을 시작하고 있었던 터라
"음. 이런게 있군- expression 무서운 녀석." 이라고 그냥 넘기고 말았는데요.

오늘 max-height 때문에 expression을 써야하나 고민을 잠깐 하다가
max-height 같은 경우는 position: fixed 처럼 계속해서 읽어드릴 필요가 없이
페이지 열릴때 한번만 잡아주면 되거든요.
정말로 작동을 하는지, 진짜 차이가 있는건지 궁금해서 테스트 페이지를 한번 만들어 보았습니다.


예제 파일 : http://mkyoon.tomeii.com/expression.html (IE6, 7에서 보셔야 합니다.)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>One-Time Expressions</title>
<style type="text/css">
     .onetime {
          width: 200px;
          padding: 10px;
          border: 2px solid #666;
          overflow: hidden;
          /* 생각없이 쓴 expression */
          height: expression( setCntr(), this.scrollHeight > 99 ? "100px" : "auto" );
          /* 멋진 아저씨가 추천한 방법 */
          /*height: expression(
               setCntr(),
               new Function('el', 'el.style.height = el.scrollHeight > 99 ? "100px" : "auto";')(this)
          );*/
     }
</style>
<script type="text/javascript">
//<![CDATA[
     var gnExpr = 0;
     var gCntrDisplay;
     var gbOn = true;

     function setCntr() {
          gnExpr++;

          if ( gbOn ) {
               displayCntr();
          }

          return true;
     }

     function displayCntr() {
          if ( ! gCntrDisplay ) {
               gCntrDisplay = document.getElementById("cntrdisp");
          }

          if ( gCntrDisplay ) {
               gCntrDisplay.value = gnExpr;
          }
     }

     function setDisplay(bOn) {
          gbOn = bOn;
     }

//]]>
</script>
</head>
<body>
     <input type="text" size="10" id="cntrdisp" disabled="disabled"/>
     <div class="onetime">
          (마우스를 움직여보세요.)
          우리는 달려간다 이상한 나라로 니나가 잡혀있는 마왕의 소굴로 
          어른들은 모르는 사차원세계 날쌔고 용감한 폴이 여깄다
          마술차 마술봉 딱부리 삐삐 찌찌 힘을 모으자 대마왕 손아귀에 니나를 구해내자 
          띠이빠빠 띠이빠빠 달려간다 삐삐
     </div>
     <p>출처 : http://stevesouders.com/hpws/onetime-expressions.php</p>
</body>
</html>

'생각없이 쓴 expression' 부분과
주석처리된 '멋진 아저씨가 추천한 방법' 을
주석부분을 바꿔서 열어보시면 차이를 바로 알 수 있습니다.
(정말로 딱 1개만 찍히네요. 오우 신기.)


결론 : expression 한번만 실행시키기.
CSSproperty: expression(
          new Function('el', 'el.style.CSSproperty = 어쩌구 저쩌구 계산식')(this)
     );



하지만 이방법도 완전한 해결책은 아니라고 하네요~
expression 자체가 위험하긴 하나봅니다. IE8에서도 내다버린 녀석이니까요.

Posted by mkyoon

2009/09/04 00:06 2009/09/04 00:06
Tag
, , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/130

Trackback URL : http://mkyoon.com/trackback/130

Leave a comment

Webkit, Chrome(2.0.169.1)의 User Agent Stylesheet (legend)


오늘 크롬을 켰다가 놀랐습니다.




보이십니까?
보이지 말아야 할 legend가 나오는 바람에 화면이 깨지는 모습을..
(예를 Daum으로 들었을 뿐, Daum에 악감정은 없습니다 ㅠㅠ)

이건 Webkit에서 잠시 보였던 현상과 동일합니다.



동일하죠?

Chrome이 Webkit 엔진을 쓰면서
Webkit 에 있었던 문제를 Chrome이 그대로 가져오게 되는군요.

Webkit의 최신 버전에선 이미 고쳐졌습니다.
이제 Chrome이 어서 고쳐지기만을 바래야죠.


위와 같은 현상은 Webkit이 기본적으로 적용하고 있는 User Agent Stylesheet에서
신기한 속성을 적용하면서 부터 시작됐습니다.




legend  { display: block !important; }


User Agent 의 스타일 시트에서 !important 속성을 넣다니요-_-
CSS 2.1 Spec 에서 명시하고 있는 스타일시트의 적용 순서는 다음과 같습니다.

  1. user agent declarations
  2. user normal declarations
  3. author normal declarations
  4. author important declarations
  5. user important declarations
스타플에도 같은 문제가 있었기에
제가 만든 CSS에서 다음과 같이 넣어주었습니다.  (3. author important declarations)
 legend { display: none !important; }


그런데도 아주 정확히 legend가 나타나네요. 하하-_-;

결국
 legend { 
    display: none;
    position: absolute; 
    visibility: hidden; }

요렇게 꼼수로 넣어주고 급한 불은 껐습니다. 하하-_-;



Posted by mkyoon

2009/03/18 12:04 2009/03/18 12:04
Tag
, , , , , , , ,
Response
No Trackback , No Comment
RSS :
http://mkyoon.com/rss/response/121

Trackback URL : http://mkyoon.com/trackback/121

Leave a comment

IE에서 Ordered List - LI 숫자가 전부 1.1.1.1.1.로 나오는 현상.

원문 :
보통 순서가 있는 목록 = Ordered List 는 아래와 같이 표현되죠.

[ 예시 1 ]
<ol>
   <li>첫번째</li>
   <li>두번째</li>
   <li>세번째</li>
   <li>네번째</li>
   <li>다섯번째</li>
</ol>
  1. 첫번째
  2. 두번째
  3. 세번째
  4. 네번째
  5. 다섯번째


<li> 태그에 width나 height를 넣으면 이상한 현상이 나타납니다.
아마도 IE 7 , IE 6 에서 보는 분들은
[ 예시 1 ] 과 다른 모습을 볼 수 있을 것입니다.

[ 예시 2 ]
li {
   height: 20px;
}
  1. 첫번째
  2. 두번째
  3. 세번째
  4. 네번째
  5. 다섯번째


[ 해결방법 ]
display: list-item; 을 추가해주면 됩니다.

li {
   display: list-item;
   height: 20px;
}

  1. 첫번째
  2. 두번째
  3. 세번째
  4. 네번째
  5. 다섯번째


(언제나 신기한 IE.)

Posted by mkyoon

2008/09/29 22:48 2008/09/29 22:48
Tag
, , , , , , , ,
Response
No Trackback , 2 Comments
RSS :
http://mkyoon.com/rss/response/106

Trackback URL : http://mkyoon.com/trackback/106

Comments List

  1. adios'민군 2010/05/12 10:31 # M/D Reply Permalink

    mkyoon 님 사이트 보고 css만이 공부 하고 있습니다.

    그런데 이번 예제 1번과 2번 이 동일한 이미지더라구요;;

    앞에 숫자 넘버가 1,1,1,1,1 이렇게 된다는 말이 맞나욘???

    1. mkyoon 2010/05/12 11:28 # M/D Permalink

      아이코 감사합니다. 부족한 글이 많습니다ㅠㅠ
      위의 [예시2]는 IE6, IE7 에서 보면 넘버가 1.1.1.1.1.로 나타납니다.
      이미지도 넣는 것이 더 좋았겠다- 라는 생각이 드네요!!
      조언 감사드려요^^

Leave a comment

CSS 파일 크기에도 제한이 있다? - CSS Limit @ Internet Explorer

원문 :

CSS Limit #1.


하나의 CSS 파일의 크기가
288kb를 넘어설 경우,
인터넷 익스플로러에서는 읽어들이지 못하는 버그가 있다고 합니다.


CSS Limit #2.


CSS 선언. 즉, #selector { } 이러한 스타일 지정 갯수가
4096개를 넘어설 경우,
역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.


CSS Limit #3.


@import 를 사용하여 여러 CSS 파일을 한 CSS 파일에 모아 관리할 수 있죠.

- style.css -
@import url("style_one.css");
@import url("style_two.css");

이러한 @import 갯수가 32개를 넘어설 경우,
그리고 그 depth 또한 3개의 chain을 넘어설 경우, (style.css>style_one.css>style_ie.css)
또 역시나 인터넷 익스플로러에서 읽어들이지 못하는 버그가 있다고 합니다.

위와 같은 수치 이상으로 늘어나지 않도록,
언제나 조심해야겠습니다.-_-; (언제나 신기한 IE.)

Posted by mkyoon

2008/09/18 18:10 2008/09/18 18:10
Tag
, , , , , , ,
Response
No Trackback , a comment
RSS :
http://mkyoon.com/rss/response/105

Trackback URL : http://mkyoon.com/trackback/105

Comments List

  1. 윈컴이 2011/08/14 20:36 # M/D Reply Permalink

    다 IE네요.. ;;

Leave a comment
« Previous : 1 : 2 : 3 : 4 : 5 : ... 6 : Next »