728x90 반응형 CSS127 [CSS3] select 태그 화살표 이미지 변경하는 법! 먼저 select에 설정되어있는 기본 화살표를 숨겨준다. select{ -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; } 이렇게만 하면 인터넷익스플로어에서 화살표가 남아있다. select::-ms-expand { display:none; } //이걸 추가해줘야 ie에서도 없어진다. 그 후 select 에 background 속성을 이용하여 화살표 이미지를 넣어준다. 2019. 4. 8. [CSS3] 반응형 웹 미디어 쿼리 (@ media) CSS파일은 순서대로 적용되므로 미디어쿼리는 css파일 제일 하단에 위치해야 합니다. 또한 html에 반응형 뷰포트도 써줘야합니다. @media (max-width:1024px){ //브라우저 크기가 1024이하일 때 //태블릿 또는 노트북 } @media (max-width:768px){ //브라우저크기가 768이하일 때 //태블릿 또는 스마트폰 } @media (max-width:320px){ //브라우저 크기가 320이하일 때 } ================================= @media (min-width:320px){ //브라우저 크기가 320 이상일 때 // 스마트폰 또는 태블릿 } @media (min-width:768px){ //브라우저 크기가 768 이상일 때 //태블릿 또.. 2019. 4. 8. [애니메이션 효과 - css]CSS animation 옵션값 설정 방법 하나의 animation으로 설정할 때 .aniBox{ /* 하나로 묶어서 작성할 때 */ animation: name duration timing-function delay iteration-count direction fill-mode; /* animation: ani1 0.5s linear 1s 1 backwards; */ } 각각의 옵션을 나누어서 설정할 때 animation-name: ani1; /* animation 이름 즉 @keyframes로 선언한 이름 */ animation-duration: 0.5s; /* animation이 진행될 시간 0.5s 동안 진행된 */ animation-timing-function: linear; /* 진행되는 동안의 속도에 관한 설정 기본값 ease ea.. 2019. 4. 8. 이전 1 ··· 29 30 31 32 다음 728x90 반응형