비주얼 스튜디오 코드⑬ 콘텐츠 모양을 자유롭게 변형하기

section > article

section이 article 보다 큰 덩어리지만 간혹 article안에 section이 들어갈 때도 있다.

 

백그라운드 컬러 투명도 주기

1. background-color: rgba(0,0,255,0.3) (r,g,n,투명도)

 

2. backgorund-color: blue;

opacitiy: 0;(0-완전 투명) 1(완전불투명)

투명도 조절(0~1)

 

section:nth-child(1) article{}

섹션중 첫번째 아이 중에 아티클에 적용하겠다.

 

section:nth-of-type 는nth-child와 비슷하지만 다른형제가 있을 때 바꿀 수 있는 명령어

 

transform

transform: scale(1.3); 배율 조정 

transform: skew(30deg); 비틀어지다.

transform: translate( px, px); 이동

transform: rotate(deg); 회전

중복되는 명령어 한번에 넣어주기

, 써줌으로써 중복되는 명령어를 한번에 써 줄 수 있다.

 

 

 

Css3 Transform

Rotate : 회전

rotate(45deg)

rotateX(45deg)

rotateY(45deg)

Scale : 축소 확대

scale(2)

scaleX(2)

scaleY(2)

Translate :이동

translate(45px,45px)

translateX(-45px)

translateY(100px)

skew : 비틀기

skew(30deg,30deg)

skew(30deg)

skew(30deg)

 

@charset "utf-8";

@font-face {
    font-family: 'LINESeedKR-Bd';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/LINESeedKR-Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}
/*웹폰트 사이트 연결*/

*,
*::before,
*::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'LINESeedKR-Bd'; /*글꼴*/
}

body{
    background-color: #f5f3f4;
    /*전체 배경색*/
    padding: 10px;
    text-align: center;
}

h3{
    font-size: 30px;
    margin: 50px 0;

}

.card{
    margin: 10px;
    display: inline-block;
    /*inline-block은 인라인구조,블럭구조(가로,높이)특성이 있음, 약간의여백이 있음 */
    width: 200px;
    background-color: #fff;
    padding: 15px;
    box-shadow: 0px 3px 10px #ddd;
    /*box 그림자 x축 y축 번짐 그림자 색 바깥쪽 그림자*/
    color: #555;
}

.card .box{
    width: 100px;
    height: 100px;
    background-color: #ddd;
    margin: auto;
    /*card 중간에 자동으로 넣어주기*/
    cursor: pointer;
    /*박스안에 커서 손모양으로 바꿔주기*/
    box-shadow: 0 0 5px #ccc inset;
    /*inset 도형 안쪽으로 그림자 적용*/

}

.card .box .fill{
    width: 100%;
    height: 100%;
    background-color: blue;
    opacity: 0.3;
    transition: all 0.3s;
    /*회전을 할 때 속도를 줌*/
}

.card p{
    margin: 25px 0 0 0;
}

.card .rotate:hover .fill{
    transform: rotate(45deg);
}

.card .rotateX:hover .fill{
    transform: rotateX(45deg);
    /*위아래로 회전*/
}

.card .rotateY:hover .fill{
    transform: rotateY(45deg);
    /*좌우 회전*/
}

.card .scale:hover .fill{
    transform: scale(2);
}

.card .scaleX:hover .fill{
    transform: scaleX(2);
}

.card .scaleY:hover .fill{
    transform: scaleY(2);
}

.card .translate:hover .fill{
    transform: translate(45px,45px);
}

.card .translateX:hover .fill{
    transform: translateX(-45px);
}

.card .translateY:hover .fill{
    transform: translateY(100px);
}

.card .skew:hover .fill{
    transform: skew(30deg,30deg);
}

.card .skewX:hover .fill{
    transform: skewX(-30deg);
}

.card .skewY:hover .fill{
    transform: skewY(30deg);
}

 

 

사진 프레임안에서 확대해주기

html: span안에 img 넣어주기

 

overflow:hidden

overflow: hidden을 span안에 명령어를 넣어주면 마우스를 올려놨을 때 사진이 확대 되는 것을 볼 수 있다.

단 span 크기가 지정이 되어있어야한다.(이미지 사이즈) 또한, 블럭구조여야한다.

.contents .gallery ul li span{

     display: block;

     width: 120px;

     heigh: 130px;

     overflow: hidden;
     }