[CSS] selectbox 디자인하기 input요소 중에 selectbox는 css스타일을 입히기 조금 까다로운 편에 속한다. 박스만 디자인이 들어가면 그나마 쉬운데 option요소까지 디자인되어있다면 플러그인이나, 자바스크립트 사용하여 구현해야한다. 먼저 css만을 사용하여 셀렉트박스와 화살표 스타일만 변경하는 방법을 소개하겠다. 1. 가장 먼저, 웹에서 제공하는 기본 스타일을(화살표) 보이지 않게 처리한다. 주의할 점은 appearance 속성은 IE에는 적용되지 않는다. IE를 고려한다면 -ms-expand라는 가상 선택자로 스타일을 초기화시켜주어야 한다. select{ appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari an.. 2020. 3. 24. [css] 6가지의 확실한 수직 가운데 정렬 방법 다양한 높이의 요소들을 수직 가운데 정렬하는 일은 수평 가운데 정렬하는 것보다 다로 까다롭다. 각각의 특징을 비교하여 6가지의 수직 가운데 정렬을 소개한다. 수직정렬은 자식이 inline속성을 가지냐 block 속성을 가지냐에따라 적용 여부가 달라지므로, 각 속성들의 특징파악이 선행되어야한다. 1. display : flex 사용 특징 가장 손쉽게 할수있는 방법 수직정렬하고자하는 요소가 하나거나 두개이거나 상관 없음 IE9 이하는 지원하지 않음 방법 부모에 display:flex; align-items:center; 와 높이값 추가 See the Pen 수직 가운데 정렬 1 by off-echoi (@off-echoi) on CodePen. 2. display : table 사용 특징 태그의 깊이가 깊어.. 2020. 2. 24. 이전 1 다음