'css'에 해당되는 글 2건
- 2010.07.08 float된 자식의 높이를 부모가 감싸안도록 만들기
- 2010.03.06 css로 완벽히 이미지 투명도 조절하기.
CSS에서 디자인을 하다가 float된 요소를 자식으로 품고 있는 부모가 같이 float되지 않은 경우 자식이 부모 밖으로 튀어나가는 경우를 볼 수 있다. 아래처럼 말이다.
이런 경우 가장 깔금한 해결책(가상 선택자 :after와 zoom:1)을 담은 글을 발견해서 아래 접었다 폈다를 펼치면 볼 수 있다.
원문은 http://naradesign.net/open_content/lecture/wp/ 에서 볼 수 있다. 원문에는 모든 해결책의 유형을 제시하고 있다.
<!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>Float</title>
<style type="text/css">
.wrap { background:#CCCCCC; width:600px;}
.wrap:after { content:""; clear:both; display:block; *zoom:1;}
.left { float:left; width:200px; height:200px; background:#FF3333; }
.right { float:right; width:400px; height:100px; background:#0066FF }
</style>
</head>
<body>
<div class="wrap">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div style="background:#00CC00; width:600px; height:30px;">kimkee@naver.com</div>
</body>
</html>
http://imgwizard.com/45576
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
|---|---|
| HTML 버전별 DTD (0) | 2010.08.07 |
| css로 완벽히 이미지 투명도 조절하기. (0) | 2010.03.06 |
| IE6에서 PNG파일을 사용하고 싶어요. (1) | 2010.02.26 |
| vertical-align (0) | 2009.09.22 |
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
에코뷰 작업할때 유용하게 써먹었다.
옆 이미지 중 하단은 투명도가 들어간 배경이다.
- 설명 -
opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
- 이 효과는 IE에서만 적용된다?
-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
- 이 효과는 네스케이프용?
-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit.
- 이건 사파리용?
'프로그래밍 > CSS/웹표준' 카테고리의 다른 글
| ie6 frame 잔상이 생기는 현상 (0) | 2010.08.12 |
|---|---|
| HTML 버전별 DTD (0) | 2010.08.07 |
| float된 자식의 높이를 부모가 감싸안도록 만들기 (0) | 2010.07.08 |
| IE6에서 PNG파일을 사용하고 싶어요. (1) | 2010.02.26 |
| vertical-align (0) | 2009.09.22 |
