Jade_o.o

CSS 적용방법 3가지 인라인 방식 인라인 방식 인라인 방식 vs style 태그 내장 스타일 태그 방식 내장 스타일 태그 방식 외부 스타일시트 방식 html 코드 코드 실행 시 결과창

html 코드 /* transition vs animation - transition - 전환된 스타일을 지정할 수 있음 - hover나 onclick 같은 "이벤트"에 의해 발생 - animation - 중간 스탭을 지정해 보다 세밀한 스타일 전환 가능 - 시작, 반복, 정지 동작 가능 - @keyframes로 이루어짐 */ .box{ width: 100px; height:100px; background-color: cyan; position: relative; animation-name: my-ani; animation-duration: 5s; animation-iteration-count: 1.7; /*infinite = 무한히 사용 가능*/ animation-iteration-count: infi..

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..