웹인스토리

Flexbox Froggy에 오신 것을 환영합니다! Flexbox Froggy는 Froggy와 친구들 돕는 CSS 코드 게임입니다. 오른쪽의 justify-content 속성을 이용하여 개구리가 수련잎으로 이동할 수 있도록 도와주세요. 이 속성은 다음의 값들을 인자로 받아 요소들을 가로선 상에서 정렬합니다 flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다. center: 요소들을 컨테이너의 가운데로 정렬합니다. space-between: 요소들 사이에 동일한 간격을 둡니다. space-around: 요소들 주위에 동일한 간격을 둡니다. http://flexboxfroggy.com/#ko Flexbox Froggy A game for ..

Input Number 속성에서 화살표 / 스피너 제거 ~ 원 /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } 위 CSS 코드 적용 후

css로 구현가능한 코드까지 제공해주는 사이트 “uigradients”를 소개합니다.~!! 상단의 Get css 버튼을 클릭하면 그라데이션 CSS 코드를 아래와 같이 얻을수 있습니다. background: #373B44; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #4286f4, #373B44); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #4286f4, #373B44); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 사이트 이동하기 : htt..

TAB 메뉴 반응형 CSS 아래는 반응형일때 탭메뉴가 셀렉트박스로 전환 .tabWrap {max-width:930px;padding:0px 30px;} .wolfharu_tabmenu_menu { } .wolfharu_tabmenu_menu:before, .wolfharu_tabmenu_menu:after { content:""; display:table; } .wolfharu_tabmenu_menu:after {clear:both;} * html .wolfharu_tabmenu_menu {zoom:1;} .wolfharu_tabmenu_menu {zoom:1;} .wolfharu_tabmenu_menu select { width:100%; padding:8px 45px 8px 16px; -webkit-..