Martin`s Work

[CSS] calc 기능 본문

CSS&CSS3

[CSS] calc 기능

Martin`s Work 2017. 3. 12. 10:52

사용범위


대부분의 브라우저는 다 지원하되, IE의 경우는 IE9 이상부터 지원한다. 각 브라우저마다 사용하려면 -webkit-(Chrome, Safari), -moz-(Firefox), -o-(Opera) 그리고, IE9 이하의 브라우저를 대비한 css를 작성해야한다.


기능


calc 기능은 자바스크립트에서 계산하던 방식과 동일하게 사용할 수 있어, 자바스크립트로 처리하던 부분을 상당부분 줄일 수 있다. 다만, 하위 브라우저까지 고려해야한다는 단점이 있어, 상황에 맞게 사용하면 좋은 기능인듯 하다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  <style>
    #div{ 
        position:absolute;
        left:50%;
        top:50%;
        margin-top:-50px\0/IE8; /* IE8 브라우저용 핵사용(예시) */
        margin-left:-50px\0/IE8; /* IE8 브라우저용 핵사용(예시) */
        left:calc(50% - 50px); /* IE 브라우저 */
        top:calc(50% - 50px); /* IE 브라우저 */
        left:-webkit-calc(50% - 50px); /* Chrome, Safari 브라우저 */
        top:-webkit-calc(50% - 50px); /* Chrome, Safari 브라우저 */
        left:-moz-calc(50% - 50px); /* Firefox 브라우저 */
        top:-moz-calc(50% - 50px); /* Firefox 브라우저 */
        left:-o-calc(50% - 50px); /* Opera 브라우저 */
        top:-o-calc(50% - 50px); /* Opera 브라우저 */
        width:100px; 
        height:100px;
        background-color:#ececec;
    }
</style>
 </head>
 <body>
    <div id="div">가운데 정렬 시키기</div>
 </body>
 
cs


위의 소스는 가운데 정렬 하는 소스로 각 브라우저에 따라서 calc 기능을 사용할 수 있도록 하였다. 

위 소스에서는 하위 브라우저 대응 예시로 IE8용 핵을 사용했으나, 실제로 사용할 경우는 상황에 맞게 하위브라우저까지 고려하여 코드를 짜면 된다.

'CSS&CSS3' 카테고리의 다른 글

[CSS] 반응형 작업시 컨텐츠 비율 유지  (0) 2017.03.12
[CSS] IE 하위브라우저별 핵  (0) 2017.03.12
[CSS] 2줄이상일때 "..." 처리  (0) 2017.02.22
[CSS] CSS 속성을 이용해 Table 만들기  (0) 2017.02.20
[CSS3]CSS3를 이용한 그림자 효과  (0) 2017.02.19
공유하기 링크
'CSS&CSS3' Related Articles more
Comments