가카리의 공부방

예제 출처 : https://www.inflearn.com/course 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v6 안드로이드 - 프로젝트1. 애플리케이션 화면 디자인안드로이드 - 프로젝트2. 액티비티 화면 전환안드로이드 - 프로젝트3. 데이터베이스 및 서버 구축안드로이드 - 프로젝트4. 로그인 및 메인 화면 구현안드로이드 - 프로젝트5. 회원목록 출력하기 이번에는 저번 강의때 했던 회원목록을 TextView로 출력했던 것을 리스트뷰로 바꿔보는 예제입니다. 실행 화면 1. 먼저 admin 계정으로 로그인을 합니다. 2. 다음과 같이 MANAGE버튼이 보이면 눌러줍니다. 3. MANAGE버튼을 클릭하면 다음과 같이..

예제 출처 : https://www.inflearn.com/course 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v5 안드로이드 - 프로젝트1. 애플리케이션 화면 디자인안드로이드 - 프로젝트2. 액티비티 화면 전환안드로이드 - 프로젝트3. 데이터베이스 및 서버 구축안드로이드 - 프로젝트4. 로그인 및 메인 화면 구현 AsyncTask를 사용하는데 파일다운로드와 같은 작업을 백그라운드에서 진행할때 사용합니다. execute( ) 명령어를 통해 AsyncTask을 실행합니다. AsyncTask로 백그라운드 작업을 실행하기 전에 onPreExcuted( )실행됩니다. 이 부분에는 이미지 로딩 작업이라면 로딩 중 이미지를..

25. 다단(multi column) 다단(multi column)은 아래 신문처럼 화면을 분활해서 좀 더 읽기 쉽도록 만든 레이아웃을 의미합니다. CSS에서는 이러한 레이아웃을 쉽게 구현할 수 있는 기능을 제공합니다. 먼저 column-count 속성을 2로 주게되면? multi-column.html .column text-align: justify; column-count:2; /* column-width: 200px;*/ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et eius nostrum adipisci in ad sed vel, illo quibus-dam quas perspiciatis aliquam magnam consectetu..

예제 출처 : https://www.inflearn.com/course 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v4 프로젝트1. 애플리케이션 화면 디자인 프로젝트2. 액티비티 화면 전환 프로젝트3. 로그인 및 메인 화면 구현 이번에는 로그인 및 메인화면을 구현하는 예제입니다. 저번 소스에서 Login.php이 잘못되었네요. 다음 파일이 제대로 된 소스입니다. Login.php LoginRequest.java package com.example.kch.proj_manager_v4; import com.android.volley.AuthFailureError; import com.android.volley.Respo..

예제 출처 : https://www.inflearn.com/course 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v3 프로젝트1. 애플리케이션 화면 디자인 프로젝트2. 액티비티 화면 전환 이번에는 안드로이드 앱에서 데이터를 입력하면 그것을 데이터베이스에 저장하는 예제입니다. CREATE DATABASE `proj_manager` CHARACTER SET utf8 COLLATE utf8_general_ci; CREATE TABLE `USER`( userID VARCHAR(20) NOT NULL, userPassword VARCHAR(20) NOT NULL, userName VARCHAR(20) NOT NULL, us..

21 Float Float는 편집 디자인에서 이미지를 삽화로 삽입할 때 사용하는 기법입니다. 또한 레이아웃을 잡을 때도 사용하는 기능이기 때문에 꽤 중요합니다. 1) Float효과란? Float가 어떤 효과인지 확인하기 위해서 다음 예제를 봅시다. float.html img width:300px; float:left; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis voluptas possimus enim fuga nostrum as-sumenda cum sunt, iste quibusdam maxime, sequi, recusandae aut quisquam ab nisi nobis! Est voluptatem cum-que, n..

20.Media Query 1) 소개 media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다. media-query.html @media (min-width:601px) body background-color: blue; @media (max-width:600px) body background-color: green; @media (max-width:500px) body background-color: red; 500px 이하 : red 501~600px : green 601px 이상 : blue 실행화면 다음과 같이 넓이에 따라 배경색이 바뀌게 됩니다. 여기서 유의할 것은 캐스케이드 룰 때..

22.flex CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합니다. 이 기술을 현재 사용해도 좋을지는 아래 페이지를 참고하셔요. http://caniuse.com/#search=flex 1) flex의 기본 flex를 사용하기 위해서는 컨테이너 태그에 display:flex 속성을 부여해야 합니다. 또한 flex-direction을 이용해서 정렬방향을 바꿀 수 있습니다. 기본은 row입니다. 아래 영상은 flex의 기본적인 사용법을 알려드립니다. flex-basic1.html (doct..

18．포지션 엘리먼트의 위치를 지정하는 4가지 방법이 있습니다. - static : 기본값으로 위치정보를 임의로 설정해줄 수 없습니다.. - relative : 상대위치로, static 위치 사용 시 있던 위치를 기준으로 이동합니다. - absolute : 절대위치로, 문서 최좌측 상단을 기준으로 위치 정보를 설정하며 스크롤시 이동합니다. - fixed : 위치 고정으로 스크롤과 상관없이 항상 문서 최좌측 상단을 기준으로 좌표가 설정됩니다. 이 4가지 방법을 정확하게 이해하고 사용하는 것이 css를 자유자재로 이용하는데 중요합니다. 엘리먼트의 위치를 정하는 속성 position 속성 값 4가지 1. static(기본값) : 움직이지 않고 정적인 상태 2. relative : 부모 엘리먼트를 기준으로 상대..

20.마진 겹침 현상 마진겹침(margin-collapsing) 현상은 상하마진값이 어떤 상황에서 사라지는 현상을 의미합 니다. 이 현상은 초심자에게는 중요한 내용이 아니기 때문에 지나치시길 바랍니다. 하지만 이것을 이해하지 못하면 실무를 할 때 이해 할 수 없는 CSS의 동작으로 인해서 깊은 화남이 생길 수 있으니까 언젠가는 보시는게 좋겠습니다. 1) 마진 겹침 현상 1번째 다음과 같이 소스를 작성한 뒤 실행해보고 크롬 개발자 도구를 이용해서 margin 값을 살펴봅시다. margin-collapsing.html DOCTYPE html> h1 border:1px solid red; margin:100px; hello world hello world 실행화면 아래와 같이 실행 되었습니다. 하지만 자세히 ..