'분류'에 해당되는 글 359건

네이버에서 좋은 글을 읽게 되었습니다.

1995년도에 넷스케이프로 인터넷을 접하면서 지금까지 함께 해 온 나에게 경종을 울리는 단어를 발견하게 되었습니다.

호모 핑거팁스 ( Homo Finger-tips )

당신의 왼쪽날개는 안녕하십니까? 라는 에세이를 읽으면서 편가르기에 대한 내용이구나 생각했지요.

고려대학교 철학과 이승환 교수님이 쓰신 글입니다.

읽어 내려가다가 한 단어에 지금의 내 모습을 발견하게 되었습니다. 나도 호모 핑거팁스가 아닌가?

호모 핑거팁스란 두뇌가 퇴화하여 자율적 사고가 불가능한 사람들로, 겨우 손가락 끝으로만 생각을 대신하는 신종 인간형을 가리킨다. 이들이 할수 있는 일이란 고작 컴퓨터 자판 위에서 손가락 끝으로 Ctrl-C 와 Ctrl-V 를 반복하면서 특정세력이 제조해 낸 막말을 퍼 나르는 일 밖에 없다. 손가락이 두뇌를 대신하고 있는 것이다.

프로그램을 코딩하다 보면 게을러 져서 복사(Ctrl-C) 와 붙여놓기(Ctrl-V)를 자주 사용하게 됩니다. 그러다 보면 알고리즘을 뒷전으로 밀려나고 어느덧 두뇌가 점점 퇴화되어 간다는 느낌을 받은 적이 있지요.

편하고자 하는 마음이 인간의 두뇌를 잠식하는 바이러스를 키우는 것은 아닐까 생각해 봅니다.

이 내용과 관련해서 읽어봐야 할 책을 찾아 보았습니다.

생각하지 않는 사람들 : 인터넷이 우리의 뇌 구조를 바꾸고 있다

니콜라스 카 저/ 최지향 역 | 청림출판 | 원제 : The Shallow

엑셀파일로 차트 작성하는 방법을 적어 볼려고 합니다.

3D 칼럼 차트를 쉽게 만들수 있습니다.

엑셀로 열은 가로축의 묶음이 되고 행은 범주(Category) 가 된다고 생각하면 됩니다.

A2 ~ D5 영역을 선택한 다음에 매뉴로 가서 삽입매뉴에서 차트영역에서 원하는 차트를 선택하시면 됩니다.

작년 말에 FA대박을 터트렸던 추신수 선수가 오늘 실력발휘를 했네요.

1억 3천만불에 계약하고 입단한 텍사스 구단은 예전에 박찬호 선수가 있었던 곳이죠. 입단 첫해부터 금액에 맞는 실력으로 보여주지 못해서 먹튀라는 꼬리표가 붙게 되었습니다.

이 꼬리표가 추신수 선수에게로 전이 되는 듯한 기사가 마니 나오는 상황이었죠.

추신수 본인의 심적 부담감이 얼마나 컷을까 생각해 봅니다.

야구는 10번 쳐서 3번 안타를 보내면 잘 한다고 합니다. 이처럼 어려운 스포츠죠.

하지만 대중의 시선은 그렇게 호의적이지는 않아 보입니다. 시범기간내내 추신수에 대한 악플이 많았습니다.

이 악플들을 추신수 본인도 한번 쯤은 보았거나 주변의 이야기를 들었을 것입니다.

마음에 자리잡은 부담감때문에 움직임이 부자연 스러워 지는 것은 당연한 현상일 것입니다.

그런 그가 오늘 이 부담감을 내려놓을수 있었던 것은 앞서 부담감으로 경험했던 동료의 따뜻한 말 한마디 였다고 합니다.

“추, 팀에서 너와 큰 계약을 맺은 건 앞으로 더 잘해달라는 것 보다는 지금까지 잘해왔기 때문에 그 기록을 바탕으로 거액의 계약을 맺은 거야. 물론 팀에서는 이전과 같이 네가 똑같이 잘해주길 바라지만, 지금의 계약은 그 전에 올렸던 기록과 성적에 대한 보상이니까 FA 계약에 대한 부담을 너무 크게 갖지 않았으면 좋겠다.”

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