'CSS'에 해당되는 글 34건

  1. 2016.06.08 css calc 함수
  2. 2015.07.22 css 무료 벡터 아이콘
  3. 2014.02.26 ie9 이하 버전의 제한
  4. 2012.07.27 One-Time Expression 한번만 실행시키자.
  5. 2012.06.27 대체 텍스트기법
  6. 2012.06.07 하단 풋터고정
  7. 2012.05.23 스크립트 에디터
  8. 2012.03.20 CSS3로 만든 아이폰
  9. 2012.01.03 max-width:100%
  10. 2011.12.23 ie전용 핵

css calc 함수

CSS 2016.06.08 16:48

http://techbug.tistory.com/215

 

http://cafe.naver.com/hacosa/94427

 

 

div
{
    width: calc( 100% - 2.5em );
    background-position: calc( 50% + 50px );
    margin: calc( 1.25rem - 5px );
}
신고

'CSS' 카테고리의 다른 글

css calc 함수  (0) 2016.06.08
css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
Trackback 0 : Comment 0

css 무료 벡터 아이콘

CSS 2015.07.22 08:56

http://fontawesome.io/


상업적 사용 프리

신고

'CSS' 카테고리의 다른 글

css calc 함수  (0) 2016.06.08
css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
Trackback 1 : Comment 0

ie9 이하 버전의 제한

CSS 2014.02.26 17:21

ie9 이하 버전에 셀렉터 제한이 있었다!!!!!

처음엔 라인 버그인줄 알고 이게 뭐지? 했었는데....셀렉터 제한이라니...-_-;ㅋ

이상한거 들어간 줄 알고 눈알 빠지게 찾을뻔 했구료.....

 

펌글 : http://mkyoon.com/105

원문 :

 

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.)

 

 

펌글 : http://invalid.kr/ie-css-selector-limit/

어제 트위터를 하다가 본 글인데
twitter article
IE 9이하는 하나의 css파일에 선택자가 4095개 이상이면 더이상 적용이 안된다는 글을 보고 테스트 해봤다.

결과는 아래
limit
ie에서는 4095까지만 css 가 적용되었고 4096이상은 적용되지 않았고 파이어폭스는 다 적용 되었다.
뭐지… 왜 이런 제한을 두지…??

하…노가다 할뻔 했는데 zen-coding

신고

'CSS' 카테고리의 다른 글

css calc 함수  (0) 2016.06.08
css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
Trackback 0 : Comment 0

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

CSS 2012.07.27 13:14

 

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에서도 내다버린 녀석이니까요.

2009/09/04 00:06 2009/09/04 00:06


출처 : http://mkyoon.com/130

신고

'CSS' 카테고리의 다른 글

css 무료 벡터 아이콘  (0) 2015.07.22
ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
Trackback 0 : Comment 0

대체 텍스트기법

CSS 2012.06.27 15:31

오늘 접근성관련 글을 보다가 무심코 사용했던 text-indent : -9999px에 대한 글을 보게 되었다.

백에 이미지 넣고 안에 있는 글자를 감추기 위해 대체적으로 사용하는 기법인데 텍스트를 브라우저 저 멀리 날려버리는거기때문에 눈에는 보이지 않지만 랜더링할때 브라우저를 크게 그려서 성능을 떨어뜨리는 결과를 가져온다고 한다.

글쓴이는 .hidden {text-indent:100%; white-space:nowrap; overflow:hidden;} 을 권장했다. ie7에서 지원이 안되기 때문에 따로 block를 해줘야 한다고 덧붙였다.

회사 퍼블과 예전에 이 문제에 대해 어떤방법이 좋을지를 의논한적이 있다. text-indent의 경우 a 태그 안에 들어가 있을때 ie6에서 가로사이즈를 제대로 인식 못해 저 멀리 안드로메다로 날아가는 버그가 종종 있기에 아래 방법을 많이 쓴다고 했다.  position:relative; index:-1; 을 하게 되면 브라우저를 크게 그리지 않으면서 뒤로 숨어버리기 때문에 괜찮은 방법중 하나이지만 a태그 안에 span태그를 넣어 한번더 싸줘야 한다는게 문제였다. 이방법 저방법 각기 장단점이 있었는데...위 방법을 보니 참 괜찮은 것 같다. 그러나 글쓴이가 말했듯이 ie의 크로스브라우징 문제가 걸리기에 아직까진 구글의 방법을 추천했다.

font-size:0; line-height:0; text-shadow:none; color:transparent;

 

출처: http://blog.naver.com/aron1210?Redirect=Log&logNo=40159983408

신고

'CSS' 카테고리의 다른 글

ie9 이하 버전의 제한  (0) 2014.02.26
One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
CSS3로 만든 아이폰  (0) 2012.03.20
Trackbacks 2 : Comment 0

하단 풋터고정

CSS 2012.06.07 13:13

<!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" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>NEW</title>
<style type="text/css">
* {

margin: 0;

}

html,body {
height:100%;

}
.wrapper {
min-height:100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer {

height: 4em;

background:red;

}
</style>


</head>

<body>

<div class="wrapper">
<p>Your website content here.</p>
</div>
<div class="footer">
<p>Copyright (c) 2011</p>
</div>
</body>
</html>

[출처] 하단 풋터고정하기|작성자 이슬

 

신고

'CSS' 카테고리의 다른 글

One-Time Expression 한번만 실행시키자.  (0) 2012.07.27
대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
CSS3로 만든 아이폰  (0) 2012.03.20
max-width:100%  (0) 2012.01.03
Trackback 0 : Comment 0

스크립트 에디터

CSS 2012.05.23 17:51

스크립트형 에디터를 넣을때 기존 css 와 에디터 css 가 충돌해서 view 화면에서 line-height가 어그러지는 경우가 있다.

보통 line-height에 단위값을 넣어주게 되는데 em, %등의 단위를 넣지 않은 기본 숫자는 글자의 배수로 표현되게 된다.

따라서 에디터에서의 충돌을 방지하기 위해서는 line-height 를 넣을때 기본 숫자로 common 파일을 셋팅하면 될듯하다.

 

1.2, 1.5, 1.8 을 제일 많이 쓴듯.

신고

'CSS' 카테고리의 다른 글

대체 텍스트기법  (0) 2012.06.27
하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
CSS3로 만든 아이폰  (0) 2012.03.20
max-width:100%  (0) 2012.01.03
ie전용 핵  (0) 2011.12.23
Trackback 0 : Comment 0

CSS3로 만든 아이폰

CSS 2012.03.20 10:03

출처: http://www.hongkiat.com/blog/coding-graphics-with-css3/



CSS를 이렇게까지 활용할 수 있구나...대단하단 생각뿐이 안든다...

일단 시계부터 뜯어보았다. 어떻게 만들었을까...~




               
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

마크업은 이렇게 되어있다.

이번엔 css

ul { z-index: 2; position: relative; width: 76px; height: 76px; background: -webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#e6e6e6), color-stop(1, #fff)); margin: 0 auto; list-style: none; -webkit-border-radius: 38px; -webkit-box-shadow: 0 -1px 0 rgba(0,0,0, 0.5), 0 1px 0 rgba(255,255,255, 1.0); }
ul li { text-shadow: 0 -1px 0 rgba(255,255,255, 0.5); }
li.hour, li.minute, li.second { width: 76px; height: 76px; position: absolute; }

li.hour span { margin: 35px 0 0 38px; border-style: solid; border-width: 3px 0 3px 16px; border-color: transparent #050506; }

#newyork   li.hour { -webkit-transform: rotate(-66deg); }

li.minute          { -webkit-transform: rotate(160deg); }
li.minute span { display: none; margin: 36px 0 0 38px; border-style: solid; border-width: 2px 0 2px 24px; border-color: transparent #050506; }
li.second span { margin: 37px 0 0 38px; width: 28px; height: 1px; background: #d20f11; }
li.pin { position: absolute; top: 34px; left: 34px; width: 4px; height: 4px; background: #d20f11; -webkit-border-radius: 4px; border: 2px solid #050506; }
li.one    { top: 8px; right: 20px; position: absolute; }
li.two    { top: 19px; right: 11px; position: absolute; }
li.three  { top: 33px; right: 5px; position: absolute; }
li.four   { bottom: 17px; right: 9px; position: absolute; }    
li.five   { bottom: 7px; right: 20px; position: absolute; }
li.six    { bottom: 3px; left: 35px; position: absolute; }
li.seven  { bottom: 7px; left: 20px; position: absolute; }
li.eight  { bottom: 17px; left: 10px; position: absolute; } 
li.nine   { top: 33px; left: 6px; position: absolute; }
li.ten    { top: 19px; left: 7px; position: absolute; }
li.eleven { top: 8px; left: 17px; position: absolute; }
li.twelve { top: 5px; left: 32px; position: absolute; }
li.glare { width: 76px; height: 76px; -webkit-border-radius: 38px; background: -webkit-gradient(radial, 50% 135%, 30, 50% 135%, 150, from(rgba(255,255,255, 0)), to(rgba(255,255,255, 0.7)), color-stop(50%, rgba(255,255,255, 0)), color-stop(50%, rgba(255,255,255, 0.3))); }

li.hour span, li.minute span, li.second span { display: block; }

여기서 재미있는것은 바늘모양을 만든 css! span을 블럭 시켜서 border-width값을 지정해주었다. border-width의 새로운 발견.....나머진 포지션 떡칠...노가다의 결정판.

신고

'CSS' 카테고리의 다른 글

하단 풋터고정  (0) 2012.06.07
스크립트 에디터  (0) 2012.05.23
CSS3로 만든 아이폰  (0) 2012.03.20
max-width:100%  (0) 2012.01.03
ie전용 핵  (0) 2011.12.23
word-wrap  (0) 2011.07.01
Trackback 1 : Comment 0

max-width:100%

CSS 2012.01.03 14:56
max-width:100%; width:expression(this.width>500? "500px":"true");
신고

'CSS' 카테고리의 다른 글

스크립트 에디터  (0) 2012.05.23
CSS3로 만든 아이폰  (0) 2012.03.20
max-width:100%  (0) 2012.01.03
ie전용 핵  (0) 2011.12.23
word-wrap  (0) 2011.07.01
button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법  (0) 2011.06.13
Trackback 0 : Comment 0

ie전용 핵

CSS 2011.12.23 16:08
속성\9;
신고

'CSS' 카테고리의 다른 글

CSS3로 만든 아이폰  (0) 2012.03.20
max-width:100%  (0) 2012.01.03
ie전용 핵  (0) 2011.12.23
word-wrap  (0) 2011.07.01
button의 브라우저별 랜더링 비교, 사용방법, 문제점, 해결방법  (0) 2011.06.13
크로스 브라우져 CSS 그라디언트 사용하기  (0) 2011.05.19
Trackback 0 : Comment 0

티스토리 툴바