메뉴 건너뛰기

HEUKMYO

web publishing

140809_css3

2014.09.14 23:52 read.205

text-shadow

text-shadow:x축 y축 블러효과 컬러;

ex) text-shadow:5px 5px 0 #ccc;

컬러는 rgba로 표현 할 수 있다. a가 1일때 선명해진다.


IE사용( 7버젼부터 text-shadow 사용가능)

filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color=#ccc, Positive=true);

display:inline-block; zoom:1; 


1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        h1{text-shadow:3px 3px 3px rgba(0,0,0,0.9)}
    </style>
</head>
<body>
    <h1>웹표준 웹접근성</h1>
</body>
</html>


2014-09-15 11;23;50.PNG



word-wrap

word-wrap:break-word;

1byte 문자열이 공백없이 등장하는 모든  브라우저들은 이를 하나의 단어로 해석하기 때문에 개행하지 않는다. 이것을 강제로 개행할 수 있다. 모든 브라우저가 이 속성을 지원한다.


opacity

투명도

opacity:0.5;

IE에서 사용

filter:alpha(opacity=50); 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        p:nth-child(1){width:200px;background:yellow;word-wrap:break-word;opacity:0.5;/* op:ie 젠코딩약어 */filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);}
        /* word-wrap:break-word - 강제로 줄바꿈함 게시판 사용시 */
        p:nth-child(2){background:aqua;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        /*p:nth-child(2) body의 자식요소중 2번째 ie8버전에서 사용 안됨 */
    </style>
</head>
<body>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    <p>안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.안녕하세요. 반갑습니다.</p>
</body>
</html>

2014-09-15 11;34;49.PNG


box-shadow

box-shadow:X축 Y축 blur 그림자색;

box-shadow:5px 5px 5px silver;

-moz-box-shadow:5px 5px 5px silver;

-webkit-box-shadow:5px 5px 5px silver;

filter:progid:DXImageTransform.Microsoft.Shadow(color=silver,direction=135,strength=20);


border-radius

둥근 모서리 박스

border-radius:leftop, righttop, rightbottom, leftbottom;

border-radius:leftop rightbottom, righttop leftbottom ;


border-radius:5px 5px 5px 5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;


border-radius:30px 0;

-moz-border-radius:30px 0;

-webkit-border-top-left-radius:30px 0;

-webkit-border-bottom-right-radius:30px 0;

원하는 방향에만 적용하는 경우, 웹킷 브라우저 가운데 사파리4가 단축 속성을 지원하지 않아 현재로써는 단축 속성을 사용할 수 없다.


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
26
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box1{
            margin-bottom:30px;
            width:100px;height:100px;
            background:red;
            box-shadow:10px 10px 10px rgba(0,0,0,0.9);
            border-radius:5px 5px 5px 5px
        }
        #box2{
            width:100px;height:100px;
            background:red;
            box-shadow:10px 10px 10px rgba(0,0,0,0.9);
            border-radius:50px 50px 50px 50px
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

2014-09-15 11;29;39.PNG


boxsizing

모바일버젼 사용

pc버젼에서는 사용하지 않는 것이 좋다.


#box:hover{width:200px;height:200px}


background(s)

백그라운드를 여러개 사용할 수 있다.

background:

url(bg.gif) no-repeat left top,

url(bg.gif) no-repeat right top,

url(bg.gif) no-repeat left bottom,

url(bg.gif) no-repeat right bottom


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box3{
        width:500px;height:300px;
        background:yellow;
        background:url("http://placehold.it/10x10") no-repeat left top,
            url("http://placehold.it/20x20") no-repeat right top,
            url("http://placehold.it/30x30") no-repeat left bottom,
            url("http://placehold.it/40x40") no-repeat right bottom
        }
    </style>
</head>
<body>
    <div id="box3"></div>
</body>
</html>

2014-09-15 11;38;31.PNG


http://placehold.it/200x100이라는 사이즈의 이미지를 가져올수 있다


gradient

background:#3eafoe -webkit-gradient(linear, 0%(x축) 0%(y축)(시작점), 0%(x축) 100%(y축)(끝점), from(#0f0), to(#fff);

background:#3eafoe -moz-gradient(top, #0f0, #fff);

filter:progid:DXImageTransform.Micosoft.gradient(startColorStr=#0f0, endColorStr=#fff)


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box4{
            width:400px;height:300px;background: #00ff00; /* Old browsers */
            background: -moz-linear-gradient(top, #00ff00 0%, #ffffff 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ff00), color-stop(100%,#ffffff));
            /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #00ff00 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #00ff00 0%,#ffffff 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top, #00ff00 0%,#ffffff 100%); /* IE10+ */
            background: linear-gradient(to bottom, #00ff00 0%,#ffffff 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff00', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
        }
    </style>
</head>
<body>
    <div id="box4"></div>
</body>
</html>

2014-09-15 12;07;37.PNG


font-face

외부 글꼴을 가져온다

@font-face{

    font-family:'Nanum Gothic';

    src:url(/v3/NanumGothic-Bold.eot);

    src:url(/v3/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),

          url(/v3/NanumGothic-Bold.ttf) format('truetype');

}


transition

#box{

    background-color:#ffo;

    width:90px;height:50px;

    transition:all 2s linear; //transition-property,  transition-duration, transition-timing-function:

}

all - 속성, 트렌지션 전체의 반환값 모두 적용, 한가지만 적용될 때 width라고 적어준다.

2s - 속도

linear - 가속도


transition.gif

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0}
        /* #box{width:50px;height:50px;background:yellow;transition:all 2s linear} */
         
        /* #box{width:50px;height:50px;background:yellow;transition:width 2s linear}
        #box:hover{width:200px;height:200px;} */
 
        li{list-style:none}
        a:link,a:visited,a:focus{text-decoration:none;color:#333}
        a:hover{color:#999}
        #gnb{}
        #gnb > li > a{font-weight:bold;color:green}
        #gnb > li{position:relative;float:left;width:200px;height:40px;border:1px solid red;text-align:center;}
        #gnb > li:hover ul{display:block;height:200px}
        #gnb ul{/* display:none; */position:absolute;left:0;top:40px;width:100%;height:0;border:1px solid blue;text-align:center;overflow:hidden;transition:all 1s linear}
        /* 자바스크립트가 안되도 사용가능하나 탭키로 이동은 안된다. */
    </style>
</head>
<body>
    <!-- <p id="box">박스</p> -->
    <ul id="gnb">
        <li><a href="">메뉴1</a>
            <ul>
                <li><a href="">서브메뉴1-1</a></li>
                <li><a href="">서브메뉴1-2</a></li>
            </ul>
        </li>
        <li><a href="">메뉴2</a>
            <ul>
                <li><a href="">서브메뉴2-1</a></li>
                <li><a href="">서브메뉴2-2</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>


transition.html



animation

<style type="text/css">

#box{

    background-color:#ff0;

    width:50px;height:50px;

    animation:themove 4s infinite alternate;

}


animation-name: themove (애니메이션명)

animation-duration: 4s (동작시간)

infinite :  반복실행

animation-direction: 기본값은 normal, reverse, alternate, aaltenamte-reverse가 있음


@-moz-keyframes themove{

    20%{

        width:500px;

    }

    50%{

        width:200px;

    }

    100%{

        width:200px;

    }

}


@- 선택자가 아니라고 명시

keyframes: 애니메이션 작성할 때 명령어

20% : 4초 20%(0.8초)에 실행


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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0}
        #box2{position:relative;left:0;top:240px;background:yellow;width:50px;height:50px;animation:kkk 5s linear infinite alternate}
        @-moz-keyframes kkk{
            10%{
                left:100px;
            }
            40%{
                top:500px;
            }
            70%{
                top:0px;
            }
            100%{
                left:500px;
            }
        }
        @-webkit-keyframes kkk{
            10%{
                left:100px;
            }
            40%{
                top:500px;
            }
            70%{
                top:0px;
            }
            100%{
                left:500px;
            }
        }
    </style>
</head>
<body>
    <p id="box2"></p>
</body>
</html>

animation.html



※ 구글 제공 나눔 폰트

(https://www.google.com/fonts/earlyaccess)


1.Nanum Brush Script(Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

ex>font-family: 'Nanum Brush Script', cursive;


2. Nanum Gothic(Korean)

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);



min-width, max-width


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .photo{/* max-width:100%; */ min-width:100%}
        /* min-width:100%모바일에서 이미지에 사용하지않는다. */
        /* img,video{max-width:100%;} 이미지와 비디오를 리셋에 가변성 있도록 설정함다. */
    </style>
</head>
<body>
    <img src="http://placehold.it/800x300" alt="" class="photo" />
    <!-- 모바일 사이트는 이미지를 크게 작업
    이미지는 원본사이즈보다 커지지않게 한다.-max-width:100%; -->
</body>
</html>



위로