가카리의 공부방

19. box-sizing box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정 할 수 있기 때문에 예측하기가 더 쉽습니다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있습니다. box_sizing.html DOCTYPE html> div margin: 10px; width: 150px; #small border: 10px solid black; #large border: 30px solid black; Hello Hello 실행화..

18. 박스 모델 박스모델은 아래에서 보면 margin-top, margin-left, width, padding-left 등 왠만한 요소들이 모두 박스모델과 관련이 있다. box.html DOCTYPE html> p, a border:10px solid red; padding: 20px; margin: 40px; width: 120px; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti, nostrum! 안녕하세요네이버입니다. 실행화면 a태그는 인라인 방식으로 width와 height 값이 적용되지..

14. 레이아웃 인라인 vs 블럭레벨 html 엘리먼트들은 크게 두 가지로 구분됩니다. 1) 화면 전체를 사용하는 태그 => block element 2) 화면의 일부를 차지하는 태그 => inline level element 이번 시간에는 인라인 엘리먼트와 블럭 레벨 엘리먼트의 차이점을 다룹니다. 그 과정에서display라는 중요한 속성에 대해서도 배우게 됩니다. block1.html DOCTYPE html> h1, aborder: 1px solid red; hello world 안녕하세요. 생활코딩입니다. 실행화면 아래에서 h1태그는 한 줄을 다 쓰고 a태그는 해당하는 컨텐츠만 쓰고 있습니다. 즉, h1태그는 블록 엘리먼트이고 a 태그는 인라인 레벨 엘리먼트입니다. 만약 style에서 display ..

13. bracket 도구사용법 지금부터 수업에서 bracket을 사용하려고 합니다. bracket는 adobe에서 만든 오픈소스 에디터로 html, css 코딩을 하는데 최적화된 좋은 도구입니다. 하지만 이 도구는 코딩을 편리하게 해줄뿐 우리 수업의 내용과는 직접적인 연관은 없기 때문에 보셔도 좋고 안보셔도 전혀 문제되지 않습니다. brackets.io 홈피에 가면 다음과 같이 툴을 다운 받을 수 있습니다. 이 프로그램의 킬러 콘텐츠는 빠른 편집입니다. body 태그에서 위와 같이 오른쪽 마우스 버튼을 누르고 빠른 편집을 누르면 아래와 같이 body 태그에 적용된 css를 바로수정 할 수 있습니다. 그 다음 오른쪽에 레고 블럭 같은 아이콘을 클릭한 뒤 아래와 같이emmet을 검색하고 설치해봅시다. 그 ..

12. 캐스캐이딩 캐스케이드는 폭포라는 의미가 있습니다. 처음html이등장했을 때는CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의고안자들은html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이CSS입니다. CSS는Cascading Style Sheet의 약자입니다. Cascading은CSS의 첫 번째 글자로 등장 할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다. Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다. 즉 웹브라우저, 사용자, 컨텐츠 생산자의 ..

12. 웹폰트 웹폰트란? 웹폰트는 사용자가 가지고 있지않은 폰트를 웹페이지에서 사용할 수 있는 방법입니다. 폰트를 서버에서 다운로드하는 방식이라고 할 수 있습니다. 본 수업에서는 구글에서 제공하는 무료 웹폰트 서비스인 google fonts를 이용해서 웹폰트를 설명합니다. 구글 폰트 사이트에서 다음과 같이 선택하면 link주소와 font-family 적용법이 나옵니다. web_font.html Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis lacus eu ex rhoncus pretium. Sed vestibulum risus pharetra, consequat nibh ac, ornare nunc. Nunc eu dui..

예제 출처 : https://www.inflearn.com/course 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager_v2 프로젝트1. 애플리케이션 화면 디자인 이번에는 인텐트를 이용해서 액티비티간 화면 전환을 합니다. RegisterActivity.java package com.example.kch.proj_manager_v2; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.Button; import android.widget.EditText; public class RegisterActivi..

예제 출처 : https://www.inflearn.com/ 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Proj_Manager 안드로이드 발리 (Android Volley)는 구글 I/O 2013에서 첫 등장한 이후로 지속적으로 업데이트 되고 있는 네트워크 라이브러리입니다. 출처: http://eteris.tistory.com/792 [Eteris's Palace] 왼쪽 build.gradle(Module: app)에 들어간 뒤 dependencies부분에 compile ‘com.android.volley:1.0.0’ 을 치고 윗쪽에 Sync Now를 누릅니다. activity_login.xml 레이아웃 화면 입력받을수 있는 EditTex..

예제 : https://www.inflearn.com/course/ 예제 소스 : https://github.com/GaKaRi/gakari_android/tree/master/Tutorial10_layout 다음은 RelativeLayout을 위한 예제파일입니다. RelativeLayout은 상대적으로 위치를 지정합니다. activity_main2.xml 레이아웃 화면 버튼이 위쪽 가운데와 아래쪽 가운데에 배치된 것을 알 수 있습니다. 다음은 TableLayout을 위한 예제 파일입니다. HTML의 table과 비슷합니다. 각 행별로 뷰를 지정하게됩니다. activity_main3.xml 레이아웃 화면 아래와 같이 행단위로 표시가 되며 3번째 행은 layout_span옵션에 의해서 2개의 열을 차지하게..

11. 서체 1) 고정폭과 가변폭 서체는 크게 두가지 방법으로 구분할 수 있습니다. 고정폭(monospaced)과 가변폭입니다. 아래는 두가지 방식의 차이를 보여주는 이미지 입니다. 2) serif vs sans serif serif는 글꼴에서 사용하는 장식을 의미합니다. sans는 부정의 표현입니다. 즉 sans serif는 serif가 아니다는 뜻입니다. 출처: http://www.w3schools.com/css/css_font.asp 3) 폰트 랭킹 많이 사용하는 폰트의 랭킹을 알려주는 사이트가 있습니다. 이 사이트를 통해서 가장 많이 사용하는 폰트는 무엇인지를 알아보는 것도 재미있을 것 같습니다. http://www.fontreach.com/#top 4) 국내폰트 네이버에서 운영하는 국내 자료실입..