728x90
반응형
SMALL
728x90
반응형
LIST
미디어쿼리란? pc 뿐만 아니라 모바일과 태블릿에도 대응되는 웹사이트를 만들기 위해 모바일에 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문 미디어쿼리 media .media { width: 500px; height: 500px; background-color: red; } @media (min-width: 320px) and (max-width: 800px) { .media { width: 300px; height: 300px; background-color: yellow; } } min-width와 max-width로 브라우저 가로폭 설정 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미 미디어쿼리가 정상적으로 출..
Tranform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } prefix 작성 시 유의 사항 .box { animation: rotation 3s linear 1s 6 alternate; } @-webkit-keyframes rotation { from {-webkit- transform: rotate(-10deg); } to {-webkit- transform: rotate(10deg); } } animation 앞에 prefix가 달려있다면 (ex..
Animation .animation { animation-name: changeWidth; /* 임의로 작성가능 */ animation-duration: 3s; animation-timing-function: linear; animation-delay: 1s; animation-iteration-count: 6; animation-direction: alternate; } @keyframes changeWidth { /* 내가 설정한 animation 이름 */ from { width: 300px; } /* animation을 통해 변화할 결과값(시작지점) */ to { width: 600px; } /* animation을 통해 변화할 결과값(끝지점) */ } iteration-count 애니메이션 반..
Transition property 효과를 적용하고자 하는 css 속성 duration 효과가 나타나는데 걸리는 시간 timing-function 효과의 속도 linear은 '일정하게' 라는 의미 delay 특정 조건 하에서 효과 발동 1s는 '1초 후' 라는 의미 가상 선택자 : hover css에서 미리 만들어 놓은 클래스 '마우스를 올렸을 때' 라는 조건 Transition을 효과적으로 사용하기 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동 순서는 상관이 없지만, 숫자의 경우 먼저 나온 것이 duration, 뒤에 나온 것이 delay
Transform rotate(45deg); 입력한 각도만큼 회전 음수도 입력 가능 scale(2, 3); 숫자는 비율을 의미 width를 2배, height를 3배 확대 skew(10deg, 20deg); x축 y축을 기준으로 입력한 각도만큼 비틂 translate(100px, 200px); 선택한 오브젝트의 좌표 변경 prefix 접두사 다른 버전의 브라우저에서의 실행을 원할 경우
display /* style.css 문서 */ p { display: inline; } a { display: block; } a { display: inline-block; } Block과 Inline 요소의 성격을 바꿀 때 사용 inline-block을 사용하면 두 요소의 성격을 모두 가짐 float Hello World Hello World /* style.css 문서 */ .left { float: left; } .right { float: right; } 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 Hello World Hello World /* style.css 문서 */ .left { float: left; } ...