-
Android 2018‧01‧02
라운드 버튼 만들기, shape solid 배경색 변경
먼저 res> drawable 안에 xml을 하나 만들어 shape를 추가한다. 본인은 roundbtn.xml이라고 만들었다. <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#ff0000" /> <corners android:bottomRightRadius="20dp" android:bottomLeftRadius="20dp" android:topRightRadius="20dp" android:topLeftRadius="20dp"/> </shape> 라운드가 각 4방향에 20dp로 라운드되게 만든 shape다. 이제 버튼에 background 에 roundbtn.xml을 추가하자. <Button android:id="@+id/signaldocentcolor" android:layout_width="20dp" android:layout_height="20dp" android:background="@drawable/roundbtn" /> 이렇게 만들어두기만 하면 괜찮은데 간혹 상황에 따라 동그랗게 만든 […]
-
Android 2018‧01‧02
버튼에 그림자 빼기
버튼에 기본적으로 그림자가 붙어서 UI가 빠지는데 이걸 버튼에 스타일로 style="?android:attr/borderlessButtonStyle" 한줄을 넣어주면 된다. <Button android:id="@+id/signalvip1color" android:layout_width="20dp" android:layout_height="20dp" android:background = "@drawable/roundbtn" style="?android:attr/borderlessButtonStyle"/>
-
Reactjs 2017‧04‧24
리액트에서 리스트 반복으로 버튼 만들 때 .map()
const makeLi = (data) => { return data.map((getdata, i) => { //jquery each 처럼 getdata로 들어온걸 i로 반복시킴 return( <ContactinforLi contact={getdata} key={i} onClicks={()=>{this.handClickA(i)}}/> ) }) //data.map } // const makeLi render(){} 안에서 작동시켜서 ContactinforLi 컴포넌트들이 반복적으로 랜더링 되게 한다.
-
Javascript, jQuery 2015‧12‧28
jQuery - 버튼에 마우스 오버 상태에서 클릭한 뒤 마우스 상태에 맞게 css로 만드는 팁
css로만으로 처리하면 참 좋을 듯 한 이 기능은 css에서 hover를 이용하게 되면 클릭했을 때 마우스가 hover라는 영역을 벗어나더라도 hover 상태가 되어 있을 때가 있다. 물론 마우스를 조금만 움직여도 다시 out 상태로 돌아가긴 하지만 상황에 따라 바로 out상태로 구분되어져야하는 상황이 있기 때문에 jquery 코드와 css 코드로 응용해본다. $('#menuButton').on('click',function(e){ //클릭했을 때 액션이 있다면 여기에 스크립트 작성 }).mouseenter(function(e){ […]
-
Javascript, jQuery 2013‧09‧11
jQuery - 라디오 버튼 체크 여부 확인
입력폼에서 라디오 버튼에 값을 선택하였는지 안하였는지 체크를 해서 만약 선택하지 않았다면 라디오 버튼으로 화면이 이동되어 체크할 수 있도록 해보자 일단 html에서 라디오버튼은 아래와 같이 설정하였다. <legend>카테고리</legend> <fieldset> <input type="radio" id="Category1" value="카테고리1" name = "Category"/><label for="Category1">카테고리1</label> <input type="radio" id="Category2" value="카테고리2" name = "Category"/><label for="Category2">카테고리2</label> <input type="radio" id="Category3" value="카테고리3" name = "Category"/><label for="Category3">카테고리3</label> <input type="radio" id="Category4" value="카테고리4" […]
-
Html, CSS, Javascript, jQuery 2012‧03‧19
입력칸 스타일과 자바스크립트 샘플
입력칸 배경에 이미지를 넣어서 포커스가 되면 이미지가 사라지고 다시 포커스가 아웃되면 나타나는 스크립트 확인 버튼도 이미지로 출력하는 내용