가카리의 공부방

5. 가상 클래스 선택자 1. 소개 가상(pseudo) 클래스 선택자는 클래스 선택자는 아니지만 엘리먼트들의 상태에 따라서 마치 클래스 선택자처럼 여러 엘리먼트를 선택할 수 있다는 점에서 붙은 이름입니다. 여기서는 주요 클래스 선택자를 알아봅니다. ex_css_5.html 방문함 방문안함 실행 화면 마우스를 갖다대면 다음과 같이 노란색이 됩니다. 탭을 눌러서 포커스를 주면 다음과 같이 하얀색 박스처리가 됩니다. 이러한 처리를 하는 것을 가상 클래스 선택자라고 합니다. 링크와 관련된 가상 클래스 선택자 - :link - 방문한 적이 없는 링크 - :visited - 방문한 적이 있는 링크 - :hover - 마우스를 롤오버 했을 때 - :active - 마우스를 클릭했을 때 위의 선택자는 순서대로 지정하는..

소스출처 : https://www.inflearn.com/course/ 예제 소스 https://github.com/GaKaRi/gakari_android/tree/master/Tutorial5_list 이번에는 다음과 같이 이미지와 텍스트를 동시에 뿌려주는 커스텀 리스트뷰를 만들어봅시다. 실행화면 각 리스트 터치시 값들이 토스트 메시지로 출력됩니다. (토스트 메시지가 너무 빨리 지나가서 캡쳐를 못하겠네요.) image_layout.xml 이미지뷰 한개와 텍스트뷰 한개를 배치합니다. 이 레이아웃이 리스트뷰의 내용이 될 것입니다. ImageAdapter.java 리스트뷰의 어댑터를 만드는 클래스입니다. package com.example.kch.tutorial5_list; import android.con..

내용 및 사진 출처 : http://androidhuman.com/524 http://freehoon.tistory.com/29 안드로이드 소스 출처 : https://www.inflearn.com/course/ 예제 깃헙 주소 https://github.com/GaKaRi/gakari_android/tree/master/Tutorial_nav2 Navigation Drawer는 다음과 같이 왼쪽에서 드래그를 했을 때 나오는 뷰입니다. 위 그림과 같이 DrawerLayout 내에 뷰를 선언하게 되면 뷰들이 쌓이게 됩니다. 따라서 DrawerLayout을 맨아래 깔아두지 않으면 앞에 있는 뷰가 먼저 이벤트를 낚아채서 DrawerLayout으로 이벤트가 전달되지 않습니다. 그러면 먼저 activity_mai..

4. 부모 자식 선택자 어떤 태그의 하위에 있는 태그를 선택하고 싶을 때는 좀 더 복합적인 선택자를 사용하게 됩니다. 여기서는 부모 태그 아래에 있는 자식 태그를 선택하는 몇가지 방법을 알아보겠습니다. 1) 조상 자손 선택자 아래의 태그는 ul 밑에 있는 모든 li 태그를 선택합니다. ul li color:red; 2) 부모 자식 선택자 아래 선택자는 #lecture 바로 밑에 있는 li만을 선택합니다. #lecture>li border:1px solid red; 3) 친구 선택자 (이런 용어는 없습니다) 아래 코드는 ul과 ol을 동시에 선택합니다. ul,ol background-color: powderblue; 예제 - parent_selector_selector_1.html HTML CSS Java..

3. 선택자의 종류 선택자의 타입들 이번 수업에서는 다양한 형태의 선택자를 알아봅니다. 태그 선택자 클래스 선택자 아이디 선택자 3가지의 선택자를 알아볼 것인데 여러분은 이미 1가지 선택자를 알고 계시고 2개만 더 배우면 됩니다. 1) 태그 선택자 태그를 선택합니다. 아래 코드는 이 문서의 모든 li 태그라는 뜻입니다. li{color:red} 2) 아이디 선택자 아이디 속성의 값에 해당하는 태그를 선택하는 선택자입니다. 아래의 코드는 이 문서에서 id값이 select인 태그라는 뜻입니다. #select{font-color:50px;} selector_1.htmlHTMLCSSJavaScript 실행 화면다음과 같이 id가 select인 값만 font-size 가 적용됨을 알 수 있다. 3) 클래스 선택자..

2. 선택자와 선언어떤 태그를 디자인하기 위해서는 디자인하려는 태그를 1. 선택하고 (선택자) 2. 선택한 대상에게 효과를 줘야 합니다. (선언) 이번 시간에는 CSS에서 가장 기본적인 문법이라고 할 수 있는 이 선택자(selector)와 선언(declaration)에 대해서 알아봅니다. 가장 중요한 내용이라고 할 수 있습니다. 다음은 li 태그에 컬러와 text-decoration을 지정하는 방법이다. selector_declaration_1.html HTMLCSSJavaScript 실행 화면 출처 : https://opentutorials.org/course/2418/13346

다음 예제는 젤리빈 4.4로 테스트 되었습니다. 다음과 같이 화면 구성을 해주기 위해 activity_main.xml을 수정해줍니다. activity_main.xml 저는 안드로이드 스튜디오에서 제공하는 design 툴을 이용해서 버튼을 배치하였습니다. MainActivity.java 간단한 알림창을 만들고 리스너를 등록하는 과정입니다. 소스를 참조하시기 바랍니다. package com.example.kch.tutorial3; import android.content.DialogInterface; import android.support.v7.app.AlertDialog; import android.support.v7.app.AppCompatActivity; import android.os.Bundle;..

젤리빈 4.4 버전으로 작성되었습니다. 레이아웃은 단순히 입력을 받을 수 있는 EditText 상자 2개와 연산을 선택할 수 있는 버튼 4개 그리고 결과를 볼 수 있는 TextView 한개가 배치되어있습니다. activity_main.xml MainActivity.java 간단한 메소드이므로 따로 설명하지는 않습니다. package com.example.kch.tutorial2; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.EditText; import android.widget.TextView; public class MainAc..

이번 포스트에는 안드로이드에서 JSON객체를 Node.js서버로 보내고 Node.js서버로부터 OK!! 메시지를 받는 예제를 만들어 봅시다. Node.js 서버 app_and.js const express = require('express'); const app = express(); let users = [ { id: 1, name: 'alice' }, { id: 2, name: 'bek' }, { id: 3, name: 'chris' } ] app.get('/users', (req, res) => { console.log('who get in here/users'); res.json(users) }); app.post('/post', (req, res) => { console.log('who get ..

위와 같이 Node.js서버에서 보내는 JSON 객체를 GET방식으로 안드로이드에서 받는법을 알아봅시다. 노드 관련 책을 한번이라도 보셨다면 아래 파일은 쉽게 이해하실 수 있습니다. app_and.js 파일 const express = require('express'); const app = express(); let users = [ { id: 1, name: 'alice' }, { id: 2, name: 'bek' }, { id: 3, name: 'chris' } ] //단순히 http://localhost:3000/users로 접근하면 users라는 객체를 json으로 response하라는 의미입니다. app.get('/users', (req, res) => { console.log('who get..