transform : skew - 요소 기울이기



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        skew : 기울이기
        transform : skew(x-deg,y-deg) x, y축을 기준으로 기울이기
        transform : skewX(deg) x축을 기준으로 기울이기
        transform : skewY(deg) y축을 기준으로 기울이기
         */
        -webkit-transform : skewX(-45deg);
        -moz-transform : skewX(-45deg);
        -ms-transform : skewX(-45deg);
        -o-transform : skewX(-45deg);
        transform : skewX(-45deg);
        
        /* transform-origin : 기준점 지정 */
        -webkit-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

왼쪽 아래 꼭지점을 기준으로 오른쪽으로 기울인다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 form 속성  (0) 2017.06.26
HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21

transform : rotate - 요소 회전하기



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img{
        width: 200px;
        height: 200px;
        
        /* 
        rotate : 시계방향으로 회전
        transform : rotate3d(x,y,z,deg) x,y,z축을 기준으로 회전
        transform : rotateX(deg) x축을 기준으로 회전
        transform : rotateY(deg) y축을 기준으로 회전
        transform : rotateZ(deg) z축을 기준으로 회전
         */
        -webkit-transform : rotate(45deg);
        -moz-transform : rotate(45deg);
        -ms-transform : rotate(45deg);
        -o-transform : rotate(45deg);
        transform : rotate(45deg);
        
        /* transform-origin : 기준점 지정 */
        -webkit-transform-origin: 0% 100%;
        -moz-transform-origin: 0% 100%;
        -ms-transform-origin: 0% 100%;
        -o-transform-origin: 0% 100%;
        transform-origin: 0% 100%;
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지가 왼쪽 아래 꼭지점을 기준으로 회전된다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS filter : 이미지 필터 적용하기  (0) 2017.06.25
HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20

transform : scale - 요소 크기변경



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        scale : 크기변경
        transform : scale(x,y) x,y축의 크기를 변경한다
        transform : scale3d(x,y,z) x,y,z축의 크기를 변경한다
        transform : scaleX(x) x축의 크기를 변경한다
        transform : scaleY(y) y축의 크기를 변경한다
        transform : scaleZ(z) z축의 크기를 변경한다
         */
        -webkit-transform : scale(2,2);
        -moz-transform : scale(2,2);
        -ms-transform : scale(2,2);
        -o-transform : scale(2,2);
        transform : scale(2,2);
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지의 크기가 가로로 2배 세로로 2배 변경된다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transform : skew - 요소 기울이기  (0) 2017.06.24
HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20
HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19

transform : translate - 요소 이동



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    img {
        width: 200px;
        height: 200px;
        
        /* 
        translate 이동
        transform: translate(x,y) x,y 위치로 이동
        transform: translate3d(x,y,z) x,y,z 위치로 이동
        transform: translateX(x) x 위치로 이동
        transform: translateY(y) y 위치로 이동
        transform: translateZ(z) z 위치로 이동
         */
        -webkit-transform: translate(50px, 50px);
        -moz-transform: translate(50px, 50px);
        -ms-transform: translate(50px, 50px);
        -o-transform: translate(50px, 50px);
        transform: translate(50px, 50px);
    }
    </style>
</head>
 
<body>
    <img src="images/testimage.jpg" />
</body>
</html>
cs



결과

이미지의 위치가 30, 30 이동한다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transform : rotate - 요소 회전하기  (0) 2017.06.23
HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20
HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19
HTML5/CSS3 그라디언트  (0) 2017.06.18

animation : 애니메이션



html)

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
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    .blink {
        width: 100px;
        height: 100px;
        background-color: #f00;
        
        /*
        animation 속성
        animation-delay : 요소가 로드된 후 애니메이션이 시작될 때까지의 시간
        animation-direction : 애니메이션의 진행 방향
            normal : 기본값
            reverse : 반대로 진행
            alternate : 순방향으로 진행 후 역방향으로 진행
            alternate-reverse : 역방향으로 진행 후 순방향으로 진행
        animation-duration : 애니메이션 진행되는 시간
        animation-iteration-count : 반복횟수
        animation-name : @keyframes 로 지정한 이름 호출
        animation-play-state : 애니메이션 멈추거나 다시 시작
            running : 재생
            paused : 중지
        animation-timing-function : ease, linear 등
        */
        -webkit-animation : bgblink 3s linear 1s infinite;
        animation : bgblink 3s linear 1s infinite;
    }
    
    /* @keyframes : 지점을 지정하여 스타일 지정 */
    @keyframes bgblink {
        0% {
            background-color: #f00;
        }
        50% {
            background-color: #00f;
        }
        100% {
            background-color: #f00;
        }
    }
    </style>
</head>
 
<body>
    <div class="blink"></div>
</body>
</html>
cs



결과

div 요소의 배경이 1초 간격으로 깜빡거린다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transform : scale - 요소 크기변경  (0) 2017.06.22
HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21
HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19
HTML5/CSS3 그라디언트  (0) 2017.06.18
HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정  (0) 2017.06.17

transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다



transition : property duration delay type

property 을 delay 후에 duration 동안 type 효과를 보여준다



html)

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
43
44
45
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    .photo img {
        width: 100px;
        opacity: 0.5;
        
        -webkit-transition: all 3s 0.5s ease;
        -moz-transition: all 3s 0.5s ease;
        -ms-transition: all 3s 0.5s ease;
        -o-transition: all 3s 0.5s ease;
        /* 
        transition : property duration delay type 
        property 을 delay 후에 duration 동안 type 효과를 보여준다
        */
        transition: all 3s 0.5s ease;
        
        /*
        풀어서 사용한 예)
        transition-property: all;
        transition-duration: 3s;
        transition-delay: 0.5s;
        transition-timing-function: ease;
        */
    }
    
    .photo img:hover {
        width: 300px;
        opacity: 1;
    }
    </style>
</head>
 
<body>
    <div class="photo">
        <img src="images/testimage.jpg" />
    </div>
</body>
</html>
cs



결과

이미지를 터치하면 반투명하며 작았던 이미지가 불투명하고 커지는 효과를 보여준다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transform : translate - 요소 이동  (0) 2017.06.21
HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20
HTML5/CSS3 그라디언트  (0) 2017.06.18
HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정  (0) 2017.06.17
HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기  (0) 2017.06.16

선형 그라디언트 linear-gradient(방향, 색상 색상의 위치, 색상 색상의 위치, ...)

원형 그라디언트 radial-gradient(원이 시작되는 지점, 색상 색상의 위치, 색상 색상의 위치, ...)



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    div.linear {
        /* 선형 그라디언트 linear-gradient(방향, 색상 색상의 위치, 색상 색상의 위치, ...) */
        background: -moz-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: -webkit-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: -o-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: -ms-linear-gradient(left, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: linear-gradient(to right, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        
        width: 100%;
        height: 200px;
    }
    div.radial {
        /* 원형 그라디언트 radial-gradient(원이 시작되는 지점, 색상 색상의 위치, 색상 색상의 위치, ...) */
        background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: -o-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: -ms-radial-gradient(center, ellipse cover, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        background: radial-gradient(ellipse at center, #ff0000 0%, #00ff00 50%, #0000ff 100%);
        
        width: 100%;
        height: 200px;
    }
    </style>
</head>
 
<body>
    <div class="linear"></div>
    
    <div class="radial"></div>
</body>
</html>
cs



결과


저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 animation : 애니메이션  (0) 2017.06.20
HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19
HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정  (0) 2017.06.17
HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기  (0) 2017.06.16
HTML5/CSS3 clear: both : float 속성을 해제  (0) 2017.06.15

column-span: all : 합쳐야 하는 다단 부분에 지정



html)

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
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    div {
        
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -moz-column-rule: 2px dashed red;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -webkit-column-rule: 2px dashed #F15F5F;
        /* 
        column-count : 단의 개수
        column-gap : 단사이의 간격
        column-rule : 구분선의 두께 모양 색상
        */
        column-count: 2;
        column-gap: 10px;
        column-rule: 2px dashed red;
    }
    div .title {
        /* 
        column-span : 다단에서 합쳐야 하는 부분에 지정
        */
        -webkit-column-span : all;
        column-span : all;
        
        text-align: center;
        font-size: 1.3em;
        font-weight: bold;
    }
    </style>
</head>
 
<body>
    <div>
        <p class="title">헌재, 박근혜 대통령 탄핵심판청구 인용</p>
        <p>이 사건 소추와 관련한 피청구인의 일련 언행 보면 법 위배 행위 반복되지 않도록 해야 할 헌법 수호의지가 드러나지 않습니다. 결국 피청구인의 위헌 위법 행위는 국민의 신임을 배반한 것으로, 헌법 수호의 관점에서 용납될 수 없는 중대한 법 위배 행위라고 봐야합니다.</p>
        <p>피청구인의 법 위배행위가 헌법 질서에 미치는 부정적 영향과 파급효과가 중대함으로 피청구인을 파면함으로써 얻는 헌법 수호의 이익이 압도적으로 크다고 할 것입니다.</p>
        <p>이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문. 피청구인 대통령 박근혜를 파면한다.</p>
        <p>이 결정에는 세월호 참사와 관련해서 피청구인은 생명권 보호의무를 위반하진 않았지만, 헌법상 성실한 직책 수행의무 및 국가공무원법상 성실의무를 위반하였고, 다만 그런 사유만으로는 파면사유를 구성하기 어렵다는 재판관 김이수 재판관 이진성의 보충 의견이 있었습니다.</p>
        <p>이사건 탄핵심판은 보수와 진보라는 이념의 문제 아니라 헌법질서를 수호하는 문제로서, 정치적 폐습을 청산하기 위하여 파면 결정을 할 수 밖 에 없다는 재판관 안창호의 보충 의견 있습니다. 이것으로 선고를 모두 마칩니다.</p>
    </div>
</body>
</html>
cs



결과

제목부분의 다단을 합친후 텍스트를 중앙정렬 하였다

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다  (0) 2017.06.19
HTML5/CSS3 그라디언트  (0) 2017.06.18
HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기  (0) 2017.06.16
HTML5/CSS3 clear: both : float 속성을 해제  (0) 2017.06.15
HTML5/CSS3 empty-cells : 비어있는 셀을 표시할지 여부  (0) 2017.06.14

column-count : 단의 개수

column-gap : 단사이의 간격

column-rule : 구분선의 두께 모양 색상



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    div {
        
        -moz-column-count: 2;
        -moz-column-gap: 10px;
        -moz-column-rule: 2px dashed red;
        -webkit-column-count: 2;
        -webkit-column-gap: 10px;
        -webkit-column-rule: 2px dashed #F15F5F;
        /* 
        column-count : 단의 개수
        column-gap : 단사이의 간격
        column-rule : 구분선의 두께 모양 색상
        */
        column-count: 2;
        column-gap: 10px;
        column-rule: 2px dashed red;
    }
    </style>
</head>
 
<body>
    <div>
        <p>이 사건 소추와 관련한 피청구인의 일련 언행 보면 법 위배 행위 반복되지 않도록 해야 할 헌법 수호의지가 드러나지 않습니다. 결국 피청구인의 위헌 위법 행위는 국민의 신임을 배반한 것으로, 헌법 수호의 관점에서 용납될 수 없는 중대한 법 위배 행위라고 봐야합니다.</p>
        <p>피청구인의 법 위배행위가 헌법 질서에 미치는 부정적 영향과 파급효과가 중대함으로 피청구인을 파면함으로써 얻는 헌법 수호의 이익이 압도적으로 크다고 할 것입니다.</p>
        <p>이에 재판관 전원의 일치된 의견으로 주문을 선고합니다. 주문. 피청구인 대통령 박근혜를 파면한다.</p>
        <p>이 결정에는 세월호 참사와 관련해서 피청구인은 생명권 보호의무를 위반하진 않았지만, 헌법상 성실한 직책 수행의무 및 국가공무원법상 성실의무를 위반하였고, 다만 그런 사유만으로는 파면사유를 구성하기 어렵다는 재판관 김이수 재판관 이진성의 보충 의견이 있었습니다.</p>
        <p>이사건 탄핵심판은 보수와 진보라는 이념의 문제 아니라 헌법질서를 수호하는 문제로서, 정치적 폐습을 청산하기 위하여 파면 결정을 할 수 밖 에 없다는 재판관 안창호의 보충 의견 있습니다. 이것으로 선고를 모두 마칩니다.</p>
    </div>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 그라디언트  (0) 2017.06.18
HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정  (0) 2017.06.17
HTML5/CSS3 clear: both : float 속성을 해제  (0) 2017.06.15
HTML5/CSS3 empty-cells : 비어있는 셀을 표시할지 여부  (0) 2017.06.14
HTML5/CSS3 border-collapse: collapse : cell 사이의 공백을 제거한다  (0) 2017.06.13

clear: both : float 속성을 해제한다



html)

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <style>
    .container {
        background: #FFD8D8;
    }
    .container img {
        float: left;
    }
    .container:after {
        content: "";
        display: block;
        
        /* clear: both : float을 감싸고 있는 div태그가 끝나기전 float 속성을 해제한다 */
        clear: both;
    }
    .footer {
        background: #D9E5FF;
    }
    </style>
</head>
 
<body>
    <div class="container">
        <img src="http://placehold.it/120x200" />
        
        <img src="http://placehold.it/120x200" />
    </div>
    
    <div class="footer">
        <address>안녕히 가세요.</address>
    </div>
</body>
</html>
cs



결과

float 속성이 해제되어 화면이 깨지지 않는다


저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정  (0) 2017.06.17
HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기  (0) 2017.06.16
HTML5/CSS3 empty-cells : 비어있는 셀을 표시할지 여부  (0) 2017.06.14
HTML5/CSS3 border-collapse: collapse : cell 사이의 공백을 제거한다  (0) 2017.06.13
HTML5/CSS3 table-layout: fixed : table요소의 cell의 너비를 동일하게 고정  (0) 2017.06.12

+ Recent posts

티스토리툴바