새로 알게된 css3 속성들

1. box-sizing

속성1 : content-box

속성2 : border-box

width값이 300px 일때 각각 content-box, border-box 값 출력 화면.

1. box-sizing:content-box => 실제 컨텐츠의 크기 300px , 전체 크기 : 360px

10 (left border) + 20 (left padding) + 300 (content) + 20 (right padding) + 10 (right border)

2. box-sizing:border-box => 실제 컨텐츠의 크기 240px, 전체크기 : 300px

300 - 10 (left border) - 20 (left padding) - 20 (right padding) - 10 (right border)

2. -webkit-tap-highlight-color:transparent;

속성을 투명으로 지정해서 해당 요소에 탭할 때 나타나는 음영 사각형을 나타나지 않도록함

3. 박스 내 이미지 중앙 정렬

 .tmbfbx {display:-webkit-box;float:left;position:relative;width:63px;height:63px;margin:.1em .7em .1em 0;border:solid 1px #eaeaea;text-align:center;-webkit-box-align:center;-webkit-box-pack:center;}

4. 아이폰에서 지원안되는 한글BOLD 적용

아이폰과 안드로이드 폰에서는 한글 폰트에 <strong>, <b> 등을 통해서 BOLD체로 표현할 수 없었는데 CSS3에서 text-stroke 속성을 사용하여 아주 얇은 경계선을 주는 방법을 사용하여 한글 BOLD 를 표현함. (b.hl{font-weight:normal;-webkit-text-stroke-width:.02em;})

5. Backface-visibility

화면에 직면하지 않을 때 요소가 표시해야 할지 여부를 정의 요소가 회전될 때와 뒷면을 보고 싶지 않을 때 유용하다.

구문 : backface-visibility: visible | hidden;

ex) 결과 : http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_backface-visibility

div {

backface-visibility:hidden;

-webkit-backface-visibility:hidden; /* Chrome and Safari */

-moz-backface-visibility:hidden; /* Firefox */

}