본문 바로가기

전체 글1418

[JavaScript] 탭 메뉴 만들기 https://stickode.com/detail.html?no=2586 스틱코드 stickode.com 이번에는 탭 메뉴 만들기를 해보려 합니다. 탭메뉴는 위와 같습니다. 메뉴 버튼 클릭시에 해당 안에 있는 내용이 표출되게 됩니다. tab_menu 에 관한 스틱코드를 포스트를 즐겨찾기 하시게 되면 tab 만쳤을뿐인데 tab_menu.js 가 나오게되고 tab_menu.js를 선택할경우 아래의 js 코드가 자동완성됩니다. html, css 도 마찬가지 입니다. JavaScript 코드 HTML CSS 주의 : 해당 포스트는 js에 관한코드는 파일의 확장자가 js 일때만 가능 html 은 html 에서, css 는 css 에서만 가능합니다. html 에서는 css, js, jquery 세개다 불러와주시면 .. 2021. 11. 20.
[JavaScript]마우스 오버시 이미지 확대하기 이번 시간에는 마우스 오버시 이미지를 확대를 진행해보겠습니다. https://stickode.com/detail.html?no=2583 스틱코드 stickode.com 스틱코드에서 하단 소스를 즐겨찾기 해주세요. html안에 script를 작성을 해보았습니다. script부분만 떼서 따로 적용을 하셔도 되고, 그대로 사용하셔도 됩니다. 고양이 이미지박스 두개를 만들어 줍니다. header안에 기본적인 html,body style을 만들어줍니다. 이미지1 onmouseenter, onmouseleave 핸들러에 달아줍니다. onmouseenter는 마우스가 올라갔을때 실행되고, onmouseleave는 마우스를 내렸을시 실행 됩니다. 마우스올라가면 확대, 마우스 내려가면 다시 원래 상태로 돌아갑니다. tr.. 2021. 11. 19.
[JAVA][Android] 리사이클러뷰 접기, 펴기 오늘은 접었다 펼 수 있는 리사이클러뷰를 만들 거에요. 소스를 스틱코드에서 다운받고 본인의 앱에 맞게 수정해서 사용하세요.^^ https://stickode.com/detail.html?no=2579 스틱코드 stickode.com ItemData.java -> 데이터의 값을 저장하는 클래스, 뷰에 보여주기 위해 필요한 데이터들을 하나의 클래스로 모아줘요. public class ItemData { int image; String title; public ItemData(int image, String title){ this.image = image; this.title = title; } public int getImage() { return image; } public void setImage(int.. 2021. 11. 18.
[Java][Android] 터치 좌표 출력하기 오늘은 안드로이드 화면에서 터치를 했을때 안드로이드에서 좌표를 어떻게 인식하는지 알아보는 과정을 가지겠습니다. 응용을 하게되면 그림그리기와 같은 앱도 만들 수 있겟죠? 먼저 저희가 다룰 이벤트는 Touch 이벤트 입니다. 저희가 터치를 하고 드래그를 하면서 움직일때 모든 동작들을 인식하게 될 텐데요 먼저 화면을 그려보죠. activity_main.xml 윗 부분은 저희가 터치를 할 영역이고 아래 영역은 터치한 영역의 좌푯값을 출력해줄 영역입니다. 보기 쉽게 간단하게 구분해 주는게 좋겠죠? MainActivity.java import androidx.appcompat.app.AppCompatActivity; import android.gesture.GestureOverlayView; import andro.. 2021. 11. 17.
[Kotlin][Android] ViewModel을 이용한 타이머 만들기. 안녕하세요. 이번 시간에는 App Architcture Component에서 지원하고 있는 라이브러리를 이용해서 리사이클러뷰를 구현해 볼려고 합니다. App Architecture Componenet에는 ViewModel, LiveData, lifecycle등이 있는데요. 각 요소들을 왜 써야 하는지 공홈을 통해 확인해 보도록 하겠습니다. 우선 첫번째로 Lifecycle에 대해 이해가 필요합니다. Lifecycle package가 왜 나왔을까요? 안드로이드는 Activity가 프로세스의 진입점으로 각 액티비티가 독립적으로 실행될 수 있는 단위가 됩니다. 그렇다 보니 Activity가 더 이상 사용하지 않을 때 Acitivty에 사용한 자원들을 해제 해줘야 모바일의 제한된 물리적 자원을 효율적으로 사용할 .. 2021. 11. 16.
[Java][Android] 안드로이드 웹브라우저 화면 구성 이번시간에는 주소를 입력받고 어플리케이션 안에서 웹브라우저처럼 화면을 띄우는 방법을 공부해 보겠습니다. 우선 AndroidManifest.xml 파일에 , 태그 안에 android:usesCleartextTraffic="true"를 추가해 줍니다. 그 후 화면을 구성해주겠습니다. 이렇게 주소를 입력할수 있는 EditText와 버튼을 추가하고 화면 하단에는 WebView를 이용하여 화면을 구성해 줍니다. 그 후에 버튼 클릭 이벤트 코드를 작성해 줍니다. 버튼을 클릭하면 위에 입력한 텍스트를 가져와서 webView에 loadUrl메서드로 화면에 띄워줍니다. searchButton.setOnClickListener(new View.OnClickListener() { public void onClick(View.. 2021. 11. 15.
[JAVA][Android] 비트맵 string으로 변환하기 안녕하세요. 오늘은 이미지(bitmap)를 string으로 변환하고, 다시 string을 이미지(bitmap)로 변환시키는 방법에 대해 배워보도록 하겠습니다. 먼저 예제부터 생성하겠습니다. 1. 레이아웃 ( activity_main.xml ) 레이아웃은 아래와 같이 만들었어요. 스크롤뷰를 사용한 이유는 제가 사용한 이미지가 조금 길어서, 이미지를 넣으면, 화면이 잘려서 그랬습니다 2. MainActivity 스틱코드를 사용하면, 비트맵을 string으로 변환하고, string을 비트맵으로 변환하는 메서드를 손쉽게 사용할 수 있어요. 사용법은 아래와 같습니다. https://stickode.com/detail.html?no=2571 스틱코드 stickode.com R.drawable.sample_img 는.. 2021. 11. 14.
[HTML / CSS] Navbar 메뉴바 만들기! 안녕하세요 지난 시간에는 부트스트랩을 다운받고 적용한 뒤 버튼을 만드는 예제를 배워보았어요, 이번시간에는 상단 메뉴바를 만드는 걸 해보아요~!! http://bootstrapk.com/getting-started/ 시작하기 · 부트스트랩 부트스트랩은 프레임워크와 함께 일하기 위해 편리한 방법으로 빌드시스템으로 Grunt 를 사용합니다. 그것은 우리의 코드를 컴파일하고, 테스트하고, 그 밖에 몇몇 처리를 도와줍니다. Grunt 설치 bootstrapk.com 부트스트랩을 다운 받지 않은 사람은 여기서 다운 받으시면 됩니다. 오늘은 부트스트랩을 사용하여 상단 메뉴바를 만들어 보겠습니다. 부트스트랩의 Navbar는 많은 웹페이지의 화면 상단에서 볼 수 있는 메뉴 바의 기본 틀을 제공합니다. 부트스트랩 사이트(.. 2021. 11. 13.
[JAVA][Android] 랜덤숫자 생성하고 공유하는 앱 만들기 안녕하세요! 이번 포스팅에서는 버튼을 눌러 새로운 랜덤숫자를 뽑고, 현재 랜덤숫자를 공유하는 앱을 만들어보겠습니다. 앱은 안드로이드 28 버전에서 구현 및 테스트되었습니다. 먼저, 레이아웃입니다. activity_share.xml Math.random() 메소드를 사용해서 랜덤숫자를 새로 만드는 기능을 만들어보겠습니다. int number = (int) (Math.random() * 10000); tvNumber.setText(String.valueOf(number)); 메세지를 공유하는 share() 메소드를 만들어보겠습니다. 스틱코드를 통해 빠르게 코드를 입력할 수 있습니다. [AOS][Java] 인텐트 사용하기 - Stickode 스틱코드 stickode.com void share(String co.. 2021. 11. 12.

티스토리툴바