'정보기술(IT)'에 해당되는 글 111건

3D Button 으로 CSS3 의 속성을 적용하여 구현했다고 합니다.

작동원리는 NUMBER ONE! 이란 버튼을 누르면 내려갔다가 놓으면 다시 올라오도록 되어 있습니다.

a tag 에 id 가 button 인 element 를 생성합니다.

#button {

width:165px;   /* a tag 의 width */

height:23px;   /* a tag 의 Height */

display:block;  /* 화면표시를 block 형식으로 보여줌. 즉 줄바꿈, left, top, right, bottom 적용됨, 이외 속성 : none, inline, inline-block */

/* 서체 속성 지정 */

font-family:Arial, "Helvetica", sans-serif; 

font-size:12px;

font-weight:bold;

color:#fff;

text-decoration:none;

text-transform:uppercase;

text-align:center;

text-shadow:1px 1px 0px #07526e;

/* padding 적용 */

padding-top:12px;

margin-left:auto;

margin-right:auto;

left:30px;

/* position 을 relative 로 지정해서 left 속성을 지정할수 있도록 함 */

position:relative;

cursor:pointer;

border-left:solid 1px #2ab7ec;

/* linear-gradient 함수는 image 객체를 반환합니다. 사용법은 방향(각도, left top right bottom), start color, end color 로 입력하면 되고 %는 색상의 진행거리를 표현합니다. 

사각형을 기준으로 해서 중앙에서 gradient line 를 그리고 각도가 0deg 이면 bottom 과 같고 방향은 bottom to top 으로 gradient이 진행됩니다.

*/

background-image: linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -o-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -moz-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

background-image: -ms-linear-gradient(bottom, rgb(14,137,182) 0%, rgb(22,179,236) 100%);

/* border-radius 를 사용하여 모서리에 라운드 처리합니다. 5px 라면 x축 5, y 축 5 로 라운드 계산 */

-webkit-border-top-right-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-bottomright: 5px;

border-top-right-radius: 5px;

border-bottom-right-radius: 5px;

/* box-shadow 는 x-offset, y-offset, blur, spread, 색상으로 구현됩니다. , 를 사용하여 여러개의 shadow를 표현할수 있습니다. inset 0px 1px 0px #2ab7ec 시작선을 표시해 주고, 0px 5px 0px 0px #07526e 옆면shadow 표시, 0px 10px 5px #999 그림자 표시

<shadow> = inset? && [ <length>{2,4} && <color>? ]

처음의 두 길이값은 각각 그림자의 수평과 수직 오프셋을 의미합니다. 

세번째 길이값은 블러(blur) 반경입니다.(text-shadow property에서의 블러반경과 비교해 보세요.). 

마지막으로 네번째 길이값은 스프레드(spread) 반경으로 그림자를 부모 element의 크기와 비교하여 크거나(grow) 작게(shrink) 만듭니다.

 */

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #07526e, 0px 10px 5px #999;

}

/* button 을 눌렀을때 보이게 되는 형태 */

#button:active {

top:3px;

-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #07526e, 0px 5px 3px #999;

}

/* button css 앞에 수행되는 css */

#button:before {

content:"1";

width:35px;

height:25px;

display:block;

position:absolute;

padding-top:10px;

top:0px;

margin-left:-37px;

font-size:16px;

font-weight:bold;

color:#8fd1ea;

text-shadow:1px 1px 0px #07526e;

border-right:solid 1px #07526e;

background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);

-webkit-border-top-left-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

-moz-border-radius-topleft: 5px;

-moz-border-radius-bottomleft: 5px;

border-top-left-radius: 5px;

border-bottom-left-radius: 5px;

-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;

}

/* button active 앞에 수행되는 css */

#button:active:before {

top:-3px;

-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;

}

매번 혼자 웹페이지를 분석하면서 느끼는 거지만 기본기가 없으면 마니 답답함이 커집니다.

그래서 웹페이지가 어떻게 해서 화면에 보여지게 되는걸까? 에 대해서 적어보고자 합니다.

웹페이지는 Html 문서에 Element를 연결해서 작성하도록 되어 있습니다.

그러면 이들은 어떤 순서로 페이지에 배치되어 질까요?

Element 들간에는 각 특성에 따라서 공간을 차지하는 방식이 달라 집니다.

1. Block level element

블록처럼 차례대로 위에서 부터 쌓여 내려오도록 되어 있습니다.

2. Inline level element

수평으로 펼쳐저서 영역을 차지하도록 되어 있습니다.

3. 공통사항

요소들간의 관계는 Left, Top, Right, Bottom 으로 정해집니다.

다음으로 Element가 차지하는 영역은 어떤 구조일까요?

Box Model 구조라고 해서 중앙에 Element (width)가 있고 Padding, Border, Margin 으로 구성됩니다.

페이지 레이아웃을 만들때 필요한 핵심개념에는 margin, float, position 이 있습니다.

위치(Position)

1. static

position 은 default 값으로 static 을 가집니다. static 은 block level element 의 기본성질로 한줄에 하나의 element만 놓일수 있다는 사실에 따라 하나씩만 배정합니다. static은 left, top, right, bottom 속성이 무시됩니다.

2. left, top, right, bottom 속성

static 을 제외한 position에서 위치를 지정하기 위해 사용할수 있습니다. 각 속성의 입력값만큼 위치에서 element 를 밀어낸다고 해석하시면 됩니다.

3. relative

static 값에서의 위치를 기준으로 left, top, right, bottom 의 값에 따라 이동하게 됩니다.

종속된 element가 있는 경우에는 상위 element가 이동하는 경우에 종속 element의 위치기준이 바뀌게 됩니다.

4.absolute

화면의 상단좌측을 기준으로 하여 절대적인 좌표를 부여하게 됩니다.

부모가 static 이면 화면위 상단좌측이 기준이 되고, 부모가 absolute거나 relative 라면 부모요소의 좌측 최상단이 됩니다.

5. fixed

absolute 와 동일한데 단지 스크롤에 의햇 위치가 달라지지 않습니다.

float

웹페이지는 기본적으로 가장 위에서 부터 element 들이 아래쪽으로 하나씩 붙여 나가는 형태 입니다.

본문 div 옆에 sidebar div 를 추가할려고 하면 어떻게 해야 할까요? Position 을 absolute 로 해서 하던가 아니면

float 를 사용하면 됩니다.

float 속성이 붙어 있는 element 는 말 그대로 둥둥 떠 있는 상태이기 때문에 다음에 오는 element 는 그 밑으로 비집고 들어가게 됩니다. 여기서 중요한것은 비집고 들어가지만 내용은 가려지지 않을 정도만 들어간다는 것입니다.

그리고 내용이 옆으로 이동할 공간이 존재하면 그 공간을 내용이 이동하면서 비집고 들어갑니다.

이 원리를 이용하면 margin 을 줘서 side bar div 를 옆으로 붙일수 가 있습니다.

float 에는 left, right 속성값이 있습니다.

뒤에 오는 element에 float 영향을 안 미치게 하기 위해서는 clear 속성을 적용하면 됩니다.

CSS 2.01 버전부터 추가된 기능을 사용해서 동일한 컨텐츠를 미디어 형태별로 CSS 를 적용할수 있습니다.

Style sheet를 적용하기 위한 방법

A안.

<LINK rel="stylesheet" type"text/css" href="print.css" media="print,projection">

B안.

@import url(print.css) print,projection;

C안.

<STYLE type="text/css">

@media print {

   BODY {font-size: 10pt; line-height: 120%; background: white;}

}

@media screen {

   BODY {font-size:12pt; line-height: 1em; background: silver;}

}

</STYLE>

셋중에 하나를 사용할수 있습니다.

Style sheet를 CSS 파일로 작성하기

/* screen.css : screen display styles */

BODY {color: silver; background: black;}

A:link {color: yellow; background: #333333; text-decoration: none;}

A:visited {color: white; background: #333333; text-decoration: none;}

A:active {color: black; background: white; text-decoration: none;}

H1, H2, H3 {color: #CCCCCC; background: black; padding-bottom: 1px;

    border-bottom: 1px solid gray;}

/* print.css : print styles */

BODY {color: black; background: white;}

A:link, A:visited {background: white; color: black; text-decoration: underline;

   font-weight: bold;}

H1, H2, H3 {background: white; color: black; padding-bottom: 1px;

   border-bottom: 1px solid gray;}

DIV.adbanner {display: none;}

CSS 파일을 HTML 문서에서 링크걸기

<LINK rel="stylesheet" type"text/css" href="screen.css" media="screen">

<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

phonegap 3.0 부터 npm 으로 다운로드가 가능합니다.

node.js 를 설치하고 터미널로 들어가서

 -  npm install -g cordova or phonegap 하면 자동으로 다운로드가 됩니다.

cordova project 를 생성합니다.

프로젝트 폴더를 생성하고 해당 폴더에서 아래 명령으로 템플릿프로젝트를 구축합니다.

- cordova create . com.xxx.phonegap PhonegapDemo

- cordova platform add android

Java 와 Ant Home 을 설정하고 emulate 에 대한 Path 를 지정해야 합니다.

phonegap build android 를 하면 에러가 발생합니다.

에러내역 : phonegap an error occurred during creation of android sub-project

원인 : android용 emulator를 지정해야 되는것으로 보임.

해결방안 : path 지정

C:\AndroidDev\adt-bundle-windows-x86-20131030\sdk\tools; C:\AndroidDev\adt-bundle-windows-x86-20131030\sdk\platform-tools

also add JAVA_HOME and ANT_HOME

하면 정상적으로 build가 됩니다.

개발환경

eclipse 와 android Project 개발환경이 통합되어 있는 IDE 를 다운로드 받아 설치합니다.

소스버전관리를 위해서 Git 도 설치합니다.

eclipse 에서 GitHub 를 연결하기 위해 Egit Plug in 을 설치합니다.

공개/사설키를 사용하여 소스원격관리를 할려고 하면 ssh2 에 대한 dsa 방식으로 암호화작업을 하고 공개키를 github 에 등록합니다.

반복적으로 작업을 수행할때 루핑구문을 사용해서 알고리즘을 구성합니다.

Iterate 시킨다고 하는데 Iterator 라고 하면 반복되어 질수 있는 객체라고 생각할수 있겠네요.

for ( object in Iterators )

Generators 는 Iterator를 생성할수 있는 함수라고 생각하면 될듯 합니다.

next() 를 수행하면 그 다음 yield() 함수가 수행되도록 되어 있습니다.

send(argument) 를 수행하면 yield() 함수가 수행되고 그 결과값으로 argument를 전달할수 있습니다.

초기화 작업을 하다든가 무한루핑을 종료한다는 작업을 할수 있을겁니다.

참고사이트 :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators?redirectlocale=en-US&redirectslug=JavaScript%2FGuide%2FIterators_and_Generators

Angular.js 자바스크립트에 대한 공부를 하다가 괜찮은 소스와 설명이 있어서 읽어 보았습니다.

Html5 와 Css 로 메뉴에 알림풍선을 표시하다니 대단하다는 생각이 들더군요.

출처는 아래와 같습니다.

자바스크립트로 프로그램을 구현할때 직접 구현하는 경우는 드문것 같아요.

인터넷상에 올라와 있는 코드소스를 복사해 와서 붙여넣기 한 다음에 화면으로 결과를 확인해서 만족스러우면 패스하는식으로 구현하지요.

그러다가 유투브에서 상급자 자바스크립트라는 동영상을 보게 되었는데 자바스크립트의 상속은 객체지향언어의 클레스에 의한 상속이 아니라 프로토타입에 의한 상속이라고 하더라구요.

그래서 찾아 보았죠.

자바라는 언어에서 상속을 구현하기 위해서는 객체의 틀이 되는 클래스를 만들고 이 클래스를 상속받아서 구현하는 식입니다.

객체는 상속된 클래스에 있는 생성자를 통해서 탄생하게 되지요.

그러면 자바스크립트에서 말하는 프로토타입 상속은 어떻게 되는 걸까요?

블로그에 올라와 있는 글을 한참 읽고 나서야 감을 잡을수 있었습니다.

객체(Object)는 프로토타입 객체를 가지고 있습니다. 이 객체는 생성자에 의해서 생성되는 객체에 상속이 가능한 구조입니다.

상속된 객체는 상위객체에 연결되는 프로토타입 링크가 생성됩니다.

상속된 객체에서 상위객체의 속성에 접근할 수 있는 구조입니다.

*** key point

1. 프로토타입 객체에 해당되기위해서는 함수객체가 생성되는 시점에 속성이 메소드가 있어야 합니다. 생성 이후에 추가된 것은 상속되지 않습니다. 상속하기 위해서는 object.prototype 에 직접 접근해서 생성해 주어야 합니다.

2. 프로토 타입에 있는 속성이나 메소드는 하위객체로 복사 되는 것이 아니라 공유되는 것입니다.

출처 : http://insanehong.kr/post/javascript-prototype/

Node 로 웹 어플리케이션을 구축하는 방법을 익힐려고 이것 저것 테스트해 보면서 공부하고 있는 중입니다.

Todo list를 웹페이지에 보여주면서 추가, 삭제, 수정이 가능한 예제를 따라하다가 이틀동안 문제에 봉착했습니다.

window 객체로 사용자가 지정한 객체에 접근이 안되는겁니다. 이유가 뭘까?

분명 내가 잘못설정을 했거나 뭘 빠트린것 같은데...?

시행착오을 거쳐서 정확한 정답은 찾지는 못했지만 웹 컨솔화면에서 LocalStorage 에 접근할수 있게는 되었습니다.

루트 인덱스 홈페이지에서는 해당 사용자 객체를 찾아 갈수 있는데 링크가 된 페이지에서는 접근이 왜 안되는지 그 이유는 아직 모르겠습니다.

index.jade => a href click => todolist.jade 를 볼려고 했는데 컨솔에서 접근이 안되네요.

바로 todolist.jade에 접근하면 되네요.

좀 더 테스트를 해볼 필요는 있을 것 같습니다.

기초 없이 맨땅에 헤딩할려고 하니 머리가 마니 아푸네요.