CSS 로 그림그리기

개발하면서 2008/06/30 13:04 |

CSS 로 그린 호머심슨 과 조지부시 를 발견했다.

어떻게 한 것일까하고 드레그를 해보니....
원은 알파벳 o 를 이용하고 기타 특수문자를 크게 해서 서로 겹치면서 그린것 같다.
포지션을 지정하고 z-index 를 조정해서 원하는 모양이 나오게 하는 방법인듯...
방법을 생각해 낸다고 해도 실행하기에는 엄두가 잘 안났을 듯 한데...대단하다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

'개발하면서' 카테고리의 다른 글

CSS 로 그림그리기  (0) 2008/06/30
블로그로 물건 팔기  (0) 2008/03/03
프로그래밍의 도(道)  (4) 2008/02/20
블로그로 개발자 구하기 2탄  (0) 2008/01/09
특허에 관한 특강을 듣고...  (0) 2007/12/13
경계근무 - 근무중 이상무  (0) 2007/09/27
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/221

댓글을 달아 주세요

포커스가 생겼을 때 나타나는 점선테두리 박스를 없애는 방법

html 2008/04/14 15:21 |
출처 :http://jonnoriekwel.nl/blog/remove-firefoxs-dotted-link-border/

a:active, a:focus {
-moz-outline: none;
outline: none;
ie-dummy: expression(this.hideFocus=true);
}


이올린에 북마크하기(0) 이올린에 추천하기(0)

'html' 카테고리의 다른 글

포커스가 생겼을 때 나타나는 점선테두리 박스를 없애는 방법  (0) 2008/04/14
8가지 간단한 css tip!  (0) 2008/04/10
Z-Index Bug : IE 에서만 발생하는 z-index 버그  (0) 2008/01/29
div 구조로 해더와 풋터가 있는 레이아웃 구성하기  (0) 2008/01/04
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007/12/10
CSS Selector and Pseudo selectors  (0) 2007/12/10
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/190

댓글을 달아 주세요

8가지 간단한 css tip!

html 2008/04/10 18:58 |

출처 : http://cssglobe.com/post/1392/8-premium-one-line-css-tips


1. line-height 로 수직정렬을...

line-height:24px;

샘플보기

2. 너무 큰 내용으로 인해 Float 을 사용한 페이지 레이아웃이 깨지는 것을 막기위해
#main{
overflow:hidden;
}

관련글

3. 링크가 너무 길어 두줄로 되는 것을 막기위해
a{
white-space:nowrap;
}

4. 파폭의 스크롤바 항상 보이게 하기
html{
overflow:-moz-scrollbars-vertical;
}
파폭유저가 아니라서 왜 필요한지 잘 이해를 못했다.
다만 수직스크롤바가 default 로 감춰져 있다고 한다.

5. 블록형(한 단으로 보여지는..인라인형은 쭉 일렬로 정렬되는 것) 엘리먼트 수평 가운데 정렬하기
margin:0 auto;

6. IE 에서 textarea 의 수직 스크롤바 제거하기
textarea{
overflow:auto;
}
IE 에서 textarea 의 수직스크롤은 default 다.

7. 프린트시 페이지 나누기
h2{
page-break-before:always;
}
프린트시 강제로 페이지를 나누기라는데...해보지는 않았다.

8. 링크에 점선으로 된 박스 테두리 없애기
a:active, a:focus{
outline:none;
}
링크를 클릭할때 포커스가 옮겨가면 생기는 점선 테두리를 없애주는 거란다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

'html' 카테고리의 다른 글

포커스가 생겼을 때 나타나는 점선테두리 박스를 없애는 방법  (0) 2008/04/14
8가지 간단한 css tip!  (0) 2008/04/10
Z-Index Bug : IE 에서만 발생하는 z-index 버그  (0) 2008/01/29
div 구조로 해더와 풋터가 있는 레이아웃 구성하기  (0) 2008/01/04
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007/12/10
CSS Selector and Pseudo selectors  (0) 2007/12/10
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/187

댓글을 달아 주세요

Z-Index Bug : IE 에서만 발생하는 z-index 버그

html 2008/01/29 10:06 |

출처 :http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다.
두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는
position:relative 로 되어있다는 것이다.
IE 에서만 이런경우 z-index 를 무시해 버린다.

이유는 잘 모르지만 노란박스가  20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다.

시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index  20 을 주니 정상적으로 동작했다.

IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드의 z-index 를 따르는 것인가?
이올린에 북마크하기(0) 이올린에 추천하기(0)

'html' 카테고리의 다른 글

포커스가 생겼을 때 나타나는 점선테두리 박스를 없애는 방법  (0) 2008/04/14
8가지 간단한 css tip!  (0) 2008/04/10
Z-Index Bug : IE 에서만 발생하는 z-index 버그  (0) 2008/01/29
div 구조로 해더와 풋터가 있는 레이아웃 구성하기  (0) 2008/01/04
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007/12/10
CSS Selector and Pseudo selectors  (0) 2007/12/10
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/144

댓글을 달아 주세요

div 구조로 해더와 풋터가 있는 레이아웃 구성하기

html 2008/01/04 13:01 |
div 로 해더와 풋터가 있는 3단 구성을 하는 것은 생각보다 어려운 일이였다.
해더와 풋터의 높이는 고정이고 가운데 컨텐츠 부분은 윈도우 창 사이즈에 따라 변화해야 한다.
이때 풋터는 항상 전체 문서의 맨 아래 부분에 위치해야 한다.

여러가지 시도중
CSS layout: 100% height with header and footer 를 발견했다.

멋진 꽁수다.

풋터는 absolute 포지션을 지정하여 bottom:0 으로  전체 문서에서 맨 아래에 위치하도록 조정한다.
그러면 항상 풋터는 문서의 맨아래 있게 되는데, 문제는 이 놈이 컨텐츠 부분위를 덮고 있어서 풋터 높이 만큼의 컨텐츠 부분을 가리게 된다.
컨텐츠 부분은 높이를 100% 로 유지하도록 하고 padding 으로 아랫부분을 풋터 높이 만큼 밀어 올린다.
그렇게 되면 마치 풋터가 컨텐츠 부분안에 들어있는 듯이 동작한다.
좋은 팁이다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

'html' 카테고리의 다른 글

8가지 간단한 css tip!  (0) 2008/04/10
Z-Index Bug : IE 에서만 발생하는 z-index 버그  (0) 2008/01/29
div 구조로 해더와 풋터가 있는 레이아웃 구성하기  (0) 2008/01/04
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007/12/10
CSS Selector and Pseudo selectors  (0) 2007/12/10
IE7 에서 target=_search 막힘  (0) 2007/09/28
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/123

댓글을 달아 주세요

IE6,IE7 ,FireFox 에 대해 CSS 맞추기

html 2007/12/10 20:08 |

출처: [http]Creating different CSS style selector
[http]css-design-concerns-for-ie6-ie7-and-firefox

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.

.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
 
또 다른 방법은,
.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도 있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!
위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...

이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.

참고글
w3cschools.com 브라우저 접속률
CSS Hacks
이올린에 북마크하기(0) 이올린에 추천하기(0)

'html' 카테고리의 다른 글

Z-Index Bug : IE 에서만 발생하는 z-index 버그  (0) 2008/01/29
div 구조로 해더와 풋터가 있는 레이아웃 구성하기  (0) 2008/01/04
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007/12/10
CSS Selector and Pseudo selectors  (0) 2007/12/10
IE7 에서 target=_search 막힘  (0) 2007/09/28
유용한 태그 5가지  (0) 2007/05/28
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/111

댓글을 달아 주세요

CSS Selector and Pseudo selectors

html 2007/12/10 18:13 |
http://kimblim.dk/csstest/
위의 링크를 보면 IE6,IE7과 파폭등이 지원하는 W3C 권고사항 선택자들을 보여주고 있다.
IE7 은 파폭과 상당히 호환되는 것을 볼 수 있다.
이올린에 북마크하기(0) 이올린에 추천하기(0)

'html' 카테고리의 다른 글

Z-Index Bug : IE 에서만 발생하는 z-index 버그  (0) 2008/01/29
div 구조로 해더와 풋터가 있는 레이아웃 구성하기  (0) 2008/01/04
IE6,IE7 ,FireFox 에 대해 CSS 맞추기  (0) 2007/12/10
CSS Selector and Pseudo selectors  (0) 2007/12/10
IE7 에서 target=_search 막힘  (0) 2007/09/28
유용한 태그 5가지  (0) 2007/05/28
Trackback 0 : Comment 0

Trackback Address :: http://steelleg.tistory.com/trackback/110

댓글을 달아 주세요