[javascript] div와 ul, li를 사용하여 selectBox 처럼 구현하기 완성 이미지 간단하게 옵션별 배경색 지정, 옵션에 아이콘 이미지 삽입 정도만 구현했지만 마크업에따라 체크박스, 라디오 버튼 등 다양하게 적용 가능하다. 1. html 사과 바나나 오렌지 2. css /* reset */ *{ list-style: none; margin: 0; padding: 0; font-size: 14px; box-sizing: border-box; } /* common */ body{ padding: 30px; } .hide{ display: none; } .show{ display: block; } /* 셀렉트 영역 스타일 */ .select{ position: relative; padding: 5px 10px; width: 200px; border-radius: 5px; bord.. 2020. 3. 25. [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. [React] 리액트 Hooks의 useState와 useEffect / React Hooks 란? 리액트 v16.8로 업데이트 되면서 함수형 컴포넌트와 Hooks 사용을 권장하고 있다. Hook은 함수형컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동(hook into)할 수 있게 해주는 함수이다. 클래스형 컴포넌트 안에서는 동작하지 않지만 클래스형 컴포넌트없이 리액트를 사용할 수 있게 해준다. 장점 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다. 생명주기를 사용했을때 일어나는 버그와 무결성 문제를 보완할 수 있다. 클래스형 컴포넌트의 this로 인한 혼동과 코드양을 줄인다. / 함수형 컴포넌트 import React from 'react'; const App = () => { return( 안녕하세요! ) } export .. 2020. 3. 18. [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 2 3 4 5 6 다음
