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

empty-cells : 비어있는 셀을 표시할지 여부

show 셀을 표시한다

hide 셀을 숨긴다



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
<!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>
    table {
        width: 100%;
        border: 1px solid #000;
    }
    td {
        height: 50px;
        border: 1px solid #000;
        background: #CEFBC9;
    }
    
    /*
    empty-cells : 비어있는 셀을 표시할지 여부
    show 셀을 표시한다
    hide 셀을 숨긴다
    */
    td.show {
        empty-cells: show;
    }
    td.hide {
        empty-cells: hide;
    }
    </style>
</head>
 
<body>
    <table>
        <tr>
            <td>1</td>
            <td>제목을 입력하세요</td>
            <td>2017-04-18</td>
        </tr>
        <tr>
            <td>2</td>
            <td class="show"></td>
            <td class="hide"></td>
        </tr>
    </table>
</body>
</html>
cs



결과

show 를 한 비어있는 셀은 배경, 테두리가 그대로 남지만 hide 를 한 비어있는 셀은 보이지 않는다


저작자표시

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

HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기  (0) 2017.06.16
HTML5/CSS3 clear: both : float 속성을 해제  (0) 2017.06.15
HTML5/CSS3 border-collapse: collapse : cell 사이의 공백을 제거한다  (0) 2017.06.13
HTML5/CSS3 table-layout: fixed : table요소의 cell의 너비를 동일하게 고정  (0) 2017.06.12
HTML5/CSS3 div 블록 레이아웃 가운데 정렬하기  (0) 2017.06.11

border-collapse: collapse : cell 사이의 공백을 제거한다



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
<!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>
    table {    
        width: 100%;
        border: 1px solid #000;
        margin-bottom: 10px;
    }
    td {
        height: 50px;
        border: 1px solid #000;
    }
    table.collapse {
        /* border-collapse: collapse : cell 사이의 공백을 제거한다 */
        border-collapse: collapse;
    }
    </style>
</head>
 
<body>
    <table class="collapse">
        <tr>
            <td>제목을 입력하세요.</td>
            <td>2017-04-17</td>
        </tr>
    </table>
    
    <table>
        <tr>
            <td>제목을 입력하세요.</td>
            <td>2017-04-17</td>
        </tr>
    </table>
</body>
</html>
cs



결과

collapse 속성이 적용된 테이블(위) 와 적용되지 않은(separate 속성) 테이블(아래)


저작자표시

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

HTML5/CSS3 clear: both : float 속성을 해제  (0) 2017.06.15
HTML5/CSS3 empty-cells : 비어있는 셀을 표시할지 여부  (0) 2017.06.14
HTML5/CSS3 table-layout: fixed : table요소의 cell의 너비를 동일하게 고정  (0) 2017.06.12
HTML5/CSS3 div 블록 레이아웃 가운데 정렬하기  (0) 2017.06.11
HTML5/CSS3 div태그 좌우 반으로 나누기  (0) 2017.06.10

table-layout: fixed : table요소의 cell의 너비를 동일하게 고정



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
<!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>
    table {
        /* table-layout: fixed : table요소의 cell의 너비를 동일하게 고정 */
        table-layout: fixed;
        
        width: 100%;
        border: 1px solid #000;
    }
    td {
        height: 50px;
        border: 1px solid #000;
    }
    </style>
</head>
 
<body>
    <table>
        <tr>
            <td>4월 17일</td>
            <td>우리은행 공과금 이체</td>
            <td>10,000원</td>
        </tr>
        <tr>
            <td>4월 17일</td>
            <td>노트</td>
            <td>3,000원</td>
        </tr>
    </table>
</body>
</html>
cs



결과

컬럼 3개의 너비가 텍스트의 길이에 상관없이 동일하다

저작자표시

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

HTML5/CSS3 empty-cells : 비어있는 셀을 표시할지 여부  (0) 2017.06.14
HTML5/CSS3 border-collapse: collapse : cell 사이의 공백을 제거한다  (0) 2017.06.13
HTML5/CSS3 div 블록 레이아웃 가운데 정렬하기  (0) 2017.06.11
HTML5/CSS3 div태그 좌우 반으로 나누기  (0) 2017.06.10
HTML5/CSS3 background-origin: content-box, background-origin: border-box  (0) 2017.06.09

div 블록 레이아웃 가운데 정렬하기



html)

width를 지정하고 margin : 0 auto를 준다

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>
<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 {
            margin: 0 auto;
            
            background : #FFD8D8;
            width : 50%;
            height : 300px;
        }
    </style>
</head>
 
<body>
    <div></div>
</body>
</html>
cs



결과


저작자표시

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

HTML5/CSS3 border-collapse: collapse : cell 사이의 공백을 제거한다  (0) 2017.06.13
HTML5/CSS3 table-layout: fixed : table요소의 cell의 너비를 동일하게 고정  (0) 2017.06.12
HTML5/CSS3 div태그 좌우 반으로 나누기  (0) 2017.06.10
HTML5/CSS3 background-origin: content-box, background-origin: border-box  (0) 2017.06.09
HTML5/CSS3 background-clip: content-box 배경을 content영역에만 보이도록 한다  (0) 2017.06.08

+ Recent posts

티스토리툴바