Jade_o.o

tranceform transition html 코드 .img-box{ background-color: #9494ed; width:400px; height: 250px; } .img-box img{ width: 100%; height: 100%; cursor: pointer; border:1px solid gold; transition-duration: 10s; } .img-box img:hover{ /* 1. skew() - 원하는 각도만큼 요소를 기울임 - x,y축 나눠서 속성 부여 가능 - skewX() - skewY() */ transform: skewX(30deg); transform: skewY(30deg); transform: skew(30deg); /* 2. scale() - 크기 조절 함..

Flex와 친해지기 1 2 3 4 5 1 2 3 4 5 CSS3 등장부터 나타난 방식 화면 레이아웃을 구성할 때, 가장 많이 사용하는 벙법 중 하나 부모요소에 flex를 선언하면, 자식 요소들의 레이아웃이 변경됨 flex-container flex 속성을 갖는 요소, flex 부모 요소라고도 함 컨테이너에 적용가능 속성 flex-direction : 방향 flex-wrap : 요소들을 정렬하는 기능 justify-content : 주축 수평 방향 정렬 align-items : 주축 수직 방향 정렬 align-content : 여러 행 정렬 html 코드 .container{ max-width: 1000px; height: 400px; margin: 0 auto; /*부모요소 (현 body)기준으로*/ b..

background 속성 html 코드 body{ height: 2000px; } .box{ display: inline-block; width: 400px; height: 500px; border: 1px solid black; } .background{ background-color: palegreen; background: aquamarine; /* 단축 속성 */ /* background: color image repeat position/size; */ /* deg, to top, to bottom */ /* background: linear-gradient(45deg,black,white,orange); */ background: linear-gradient(to bottom,black,whi..

position(static, relative, absolute, fixed) html 코드 body{ background: linear-gradient(white,orange); height: 2000px; margin: 0; padding:0; } div{ width:100px; height: 100px; font-weight: 700; text-align: center; border:1px solid gray; line-height: 100px; } /* position-static - static은 기본값, 작성하지 않아도 됨 - top, bottom, left, right 속성 적용 안됨 */ .position-static{ background-color: pink; position: stati..