To become Perfect Front-End Developers Blog

Internet Explorer 7에서 overflow:hidden 속성이 먹히지 않을때는?

width , height값을 넣었나 Check!

넣었는데도 안될때는?

position:relative를 넣어보자.

자세한것은 여유있을대 적어놓자!

CSS3PIE란 IE(익스플로러 이하 IE)6~8 버전에서도 익스9이상의 CSS3를 사용할 수 있게 해주는 HTML Component(HTC)를 가르킨다.
HTC는 IE전용으로 개발되었기 때문에 IE를 제외한 다른 브라우저(파이어폭스,크롬,사파리,오페라등)에서는 작동이 되지 않는다.(JS버전도 있다.)
CSS3PIE에서 지원하는것은 5가지다.

• border-radius
• border-image
• box-shadow
• linear-gradient
• multiple background images

border-radius는 간단히 말하면 네모난 상자의 가장자리를 둥글하게 만드는것이고,
border-image는 테두리를 css2에서 사용했던 solid dotted이런것대신 말 그대로 image를 사용할 수 있게 해주는것이며
box-shadow는 상자에 그림자효과를 주는것이며
linear-gradient는 박스에 그라디언트 효과를 주는것이다.
마지막으로 multiple background images는 여러가지 배경을 사용할 수 있게 해주는것이다.

위의 5가지 모두 CSS3에서 기본적으로 지원을 해주는것들로서 CSS3를 지원하지 않는 IE6~8버전을 위해 나온것이라 할 수 있다.

적용방법은 간단하다. CSS3PIE를 다운받아 압축을 풀고 업로드후 위치를 지정해준후 해당 스타일을 적용시켜주면 된다.

공식홈페이지에 나와있는 예시를 보자

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

ID값이 myElement인 요소에 배경색은 #EEE; 패딩은 2em만큼 border-radius는 1em만큼 준다는 의미이다. 여기서 -moz-,와 -webkit-은 모질라계열,웹키트계열에도 적용을 시키기 위해서다.
일반적으로 여기까지 적용을 시키면 IE9와 파이어폭스, 크롬등에서는 제대로 표현되겠지만 IE6~8에서는 적용이 안되어 있을것이다. 그래서 다음과 같은 문장을 추가한다.

#myElement {
    ...
    behavior: url(PIE.htc);
}

정확히 알맞게 입력되었다면 IE6~8에서도 IE9와 같은 효과를 볼 수 있을것이다.

DEMO

위 그림은 공식홈페이지에 나와있는 CSS3PIE를 적용시킨 DEMO이다.
border-radius는 양수값만 가능하며 box-shadow에서는 Blur size는 양수값만 X,Y offset은 양수,음수값이 가능하다.
X값이 양수면 오른쪽에 그림자가 생기고 음수면 왼쪽에 그림자가 생기며, Y값이 양수면 아래쪽에, 음수면 위쪽에 그림자가 생성된다.
linear-gradient는 뭐 위쪽의 시작색을 고르고 아랫쪽, 끝나는 색을 고르면 적용이 된다.
원하는대로 조절후 Show CSS를 체크해주면 해당 CSS가 나오니 Copy & Paste를 하면 적용이 될 것이다.

고정된 영역안에 유동적인 크기 이미지를 언제나 가운데에 넣는방법.

여기서 가운데란 vertical과 horizontal 둘 다 가운데 라는 의미이다.
고정된 영역이라고 했지만 높이(height)값만 고정이 되면 된다. 넓이(width)값은 바뀌어도 상관이 없다.
만약 익스플로러7이하 버전을 사용하지 않는다면 높이값도 변해도 상관이 없다.

수평정렬을 할려면 보통 text-align:center를 쓴다.
이것은 변화가 없다.
하지만 수직 정렬을 할려면?
vertical-align? 이것은 인라인 요소와 테이블 셀에만 적용이 된다.
div안에 있는 img를 가운데에 넣고 싶으면 text-align은 먹히겠지만 vertical-align은 먹히지 않는다는 것이다.
vertical-align이 테이블셀에 적용이 되므로 div의 display를 table-cell 로 지정하면 되겠지만 이것은 익스플로러7이하버전에서는 적용이 되지 않는다.

그렇기때문에 크로스브라우징을 맞추면서 이미지를 가운데 넣게 하는 방법이 필요했다.
해결책은 다음과 같다.

1. 영역의 높이값에 0.905를 곱한다.
2. 영역의 스타일에 font-size: 1의값; 를 입력한다.

간단하다.이로서 이미지는 해당 영역에 언제나 수직 정렬이 될것이다.

참고 사이트 : http://mrclay.org/web_design/centered_image/