Front-end 국비지원 #008일

목록 문단, 정의 문단을 테이블 형식으로 배치하기

display:table , display:table-cell

부모태그에 display:table을 선언하고 자식태그에 display:table-cell을 적용하면 몇개든 동일한 간격으로 영역을 가짐

#bookInfo{
			display: table;	
            border-spacing: 3px;
            margin: 20px auto;
            }
#bookInfo li{
			display: table-cell;
            width: 150px;
            background-color: rgb(255, 157, 157);
            color: #fff;
            text-align: center;
            padding: 10px;
			}

결과

#bookCon{
			display: table;
			border-collapse: collapse;
            margin: 0 auto;
			}
#bookCon dt,#bookCon dd{
			display: table-cell;
            border: 1px solid #999;
            padding: 10px;
			}
#bookCon dt{
			width: 100px;
            background-color: #999;
            text-align: center;
            vertical-align: middle;
			}
#bookCon dd{
			width: 200px;
            text-align: justify;
            line-height: 150%;
			}

다단에 구분선 표시하기

column

• column-count : 구분선 갯수
• column-gap : 구분선 간격
• column-rule : 구분선 스타일

#bookPart{
		width: 910px;
        margin: 0 auto;
        -webkit-column-count: 4;
        -webkit-column-gap: 40px;
        -webkit-column-rule: 1px dashed green;
        -moz-column-count: 4;
        -moz-column-gap: 40px;
        -moz-column-rule: 1px dashed green;
        column-count: 4;
        column-gap: 40px;
        column-rule: 1px dashed green;
        }

목록 역순으로 배치하고 가로 세로 중앙 정렬하기

box-속성

box-direction: reverse; / 텍스트 순서를 역방향으로 /
box-orient: horizontal; / 기본값 /
box-pack: center; / 가로정렬 가운데 /
box-align: center; / 세로정렬 가운데 /

ul{
				width: 600px;
				height: 150px;
				background: #bed8cd;
				margin: 0 auto;
				border-radius: 30px;
				padding: 20px;
				list-style: none;
                display: box;
				box-direction: reverse;
				box-orient: horizontal;
				box-pack: center;
				box-align: center;
			}
ul li{
				padding: 10px 25px;
				background: url(./images/leaf_g.png) no-repeat left center;
			}            

transform 속성으로 요소 변경하기

transform 종류

• translate( ) : 이동
• scale( ) : 크기를 변경
• rotate( ) : 회전 +각도 시계 방향 -각도 반시계 방향 (deg)
• skew( ) : 경사 (deg)
• transition : 트랜지션 애니메이션

/* transition 회전 */
#book1{
		background: url(./images/snow_book1.png) no-repeat;
        width: 276px;
        height: 193px;
        transition: .3s;
        transform: rotate(0deg);
        transform-origin: 20% 40%;
        }
#book1:hover{
		transform: rotate(45deg);
        }
			
/* scale */
#book2{
		background: url(./images/snow_book2.png) no-repeat;
        width: 300px;
        height: 200px;
        transform: scale(.8,.8);
        transition: 0.5s;
        }
#book2:hover{
		transform: scaleX(1.2);
        }
			
            
/* translate */
#book3{
		background: url(./images/snow_book3.png) no-repeat;
        width: 276px;
        height: 198px;
        transition: .5s;
        transform: translate(-20%,0);
        }
#book3:hover{
		transform: translate(20%,0);
        }

#book4{
		background: url(./images/snow_book4.png) no-repeat;
        width: 276px;
        height: 198px;
        transition: .5s;
        transform: skew(0deg,0deg);
			}
#book4:hover{
		transform: skew(25deg,0);
        }

transition 속성으로 애니메이션 만들기

transition은 속성을 서서히 변화시키는 속성

• transition-property
• transition-duration
• transition-timing-function

property : transition을 적용시킬 속성을 정한다.
timing-function : transition의 진행 속도를 정한다.
duration : transition의 총 시간
delay : transition의 시작을 연기
initial : 기본값으로 설정
inherit : 부모 요소의 속성값을 상속

#book1{
		width: 162px;
        height: 40px;
        background: #f00;
        overflow: hidden;
        color: #fff;
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
        }
#book1:hover{
		width: 700px;
        }

transition 속성으로 애니메이션 한번에 만들기

.box{
		width: 100px;
        height: 100px;
        margin: 100px;
        background: red;
        transition: .3s ease-in;
        }
.box:hover{
		transform: scale(2) perspective(120px) rotateX(180deg);
        }

animation 만들기

.ball{
            width: 100px;
            height: 100px;
            background: rgb(250, 114, 177);
            border-radius: 50%;
            animation-name: ani;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            position: absolute;
            top: 50px;
            left: 0;
        }
@keyframes ani{
            0%{left: 0}
            50%{left: 500px}
            100%{left: 1700px}
        }

.box{
     width: 60px;
     height: 60px;
     margin: 60px;
     animation: rotate 1.5s infinite,
     background 1.5s infinite alternate;
     }
@keyframes rotate{
	from{transform: perspective(120px) rotateX(0deg) rotateY(0deg) scale(1);}
    50%{transform: perspective(120px) rotateX(-180deg) rotateY(0deg) scale(3);}
    to{transform: perspective(120px) rotateX(-180deg) rotateY(-180deg) scale(2);}
    }
@keyframes background{
	0%{background: red;}
    50%{background: green;}
    100%{background: yellow;}
    }
      
.box:hover{
	animation-play-state: paused;
    }