2016년 11월 23일 수요일

1. PHP [Basic PHP]

PHP

PHP은 HTML, CSS와 다르게 server-side scripting language이다.
server-side script language의 장점은 다음과 같다.

  • security: client가 php code를 보지 못한다.
  • compatibility: 어떤 browser이든 상관없이 똑같이 실행
  • power: DB 에 접속,제어 가능하고 파일을 열고,수정 가능

HTML같은 경우에는 server가 요청한 파일을 찾아서 browser에게 send 하기만 하지만 web-server는 web request에 대해서 processing한 뒤 그에 대한 output을 다시 web-request를 한 클라이언트에게 다시 보내주는 기능을 한다. 그래서 php는 client의 browser에서 동작하는 것이 아니라 server쪽에서 동작하는 script 언어이다. 그럼 당연히 PHP언어로 스크립트를 작성하고 싶다면 PHP를 설치해야한다.
다음과 같은 processing을 하면서 동적인 페이지를 making 한다.
  • provide different content depending on context
  • interface with other services: database, e-mail, etc
  • authenticate users
  • process form information











위와 같이 web browser에서 php파일을 요청(GET 방식)하면 web-server에서는 php 파일을 PHP interpret를 통해 해석하고 HTML output 값을 만들어 web-browser에게 보낸다.

그렇다면 server-side script 언어는 PHP 뿐일까?

그렇지 않다. Ruby on Rails, JSP, ASP.NET 등등 많은 server-side script언어가 있다. 하지만 PHP가 유독 많은 웹사이트에서 사랑받는 이유는 멀까? 
PHP의 장점은 다음과 같다
  • 오픈소스이다.
  • 호환성이 좋다
  • 간단하고 가용성이 좋다

1. PHP Basic Syntax

기본적으로 PHP 언어를 사용하려면 시작은 <?php  끝은 ?> 으로 닫아 주어야한다.

Console output: print 





basic 한 출력을 할 수있게 해주며 형식은 print " text " 이다.

Variable
PHP에는 변수를 선언할 수있는데 변수의 선언은 모두 $ 표시를 통해서 하고  case-senstitive하게 작용하고 변수의 타입은 쓰지 않는다. 그리고 변수를 선언할때나 사용할때 모두 $표시를 써주어야  한다.





그래서 PHP 변수는 자동형변환이 가능하고 변수에 들어가는 값에 따라 타입이 변한다.  예를 들어 string 타입+ int 타입을 하면 결과값은 int 타입으로 자동으로 변환된다.

Comment






String type


String 타입의 concatenation 하려면 + 가 아니라 .(period)를 써야한다.

  • 5+ "2 bank" === 7
  • 5 . "2 bank" === "52 bank"
( === 연산자는 타입과 값모두가 같은지 체크함 , == 연산자는 값만 같은지 체크함)

string타입을 쓸때 주의사항은 다음 3가지이다.
1.



2.


3.



String Method









위는 PHP의 String method를 java에서 사용되는 String 클래스의 메소드와 비교한 표이다.
다음은 실제로 String method에 대한 예제이다.














Bool Type


위와 같이 0이 아닌 값을 가진 상수를 bool형으로 바꾸면 TRUE가 된다. 
NULL이 되는 경우는 다음과 같은 같다.
  • 0 or 0.0
  • "0" , "" , NULL
  • arrays with 0 elements
(NULL은 직접 할당도 하지만 변수에 아무값도 넣지않으면 NULL값 들어감)

if , while , for
익숙한 조건문이라고 생각된다. 자바와 c++ 에서 사용되는 방법과 동일하므로 설명을 생략한다.

Arrays
다음과 같은 형식으로 Array 변수를 할당하고 선언한다.


예시코드와 결과는 다음과 같다.















Array Method











예시코드와 결과코드이다.

















다른 Array method는 직접 구현해봐서 연습해보길 바란다 꼭.

2016년 11월 22일 화요일

2. CSS [bordering && Layout]

CSS layout model

이번 chapter에서는 html element에 boxing(테두리)을 하는 방법과 html layout을 다루는 CSS 속성들에 대해 배워 볼것이다.

1. CSS Box model










위 사진은 box model 의 예시인데 p태그안에 "Hello World" 라는 text를 넣고 CSS로  border(테두리)를 생성하고 처음보는 marginpadding이 보인다.
margin이란 border를 기준으로 외부의 여백 , padding이란 border기준으로 내부의 여백이라고 할수 있다. (기준은 왼쪽 상단임)

if (  p { margin: 5px; } ) , 

와 같이 나타난다.






margin과 border 속성은 상->우->하->좌 순으로 값을 줄수 있다.
예를 들어  (margin: 1px 2px 3px 4px ) 이면 상-1px 우-2px 하-3px 좌-4px이다
그리고 margin과 border는 margin-top(padding-top) , margin-bottom , margin-left , margin-right와 같은 속성에 직접 값을 줄수 있다. (즉, margin-top은 하나의 property 이라고 보면된다. )
그래서 총 너비와 높이는 다음과 같다.
width = content width + L/R padding + L/R border + L/R margin
height = content height + T/B padding + T/B border + T/B margin

CSS property for border

selector { border : 5px dotted red;} 와 같이 선언 가능하다.
즉, border에 대한 색,크기,스타일을 정할수 있다.





위에서 margin(padding)과 같이 border도 상,하,좌,우로 정해서 값을 지정해줄수 있고 다음과 같이 여러가지 method가 있다.
만약 margin의 값이 2인 사각형 2개가 있는데 브라우저를 넘어가버리면 예를 들어 자동으로 margin값을 0.5씩 줄여 브라우저를 넘지못하도록 해서 (1.5+1.5)=3이 총 margin값이 된다.







CSS property for dimensions






위 와 같이 html element의 브라우저
내의 나타나는 너비와 높이를 설정가능하다.

예시는 다음과 같다.

3. CSS [Float && Position && Display]

2. Floating Element











 float는 위치를 제어하는 CSS요소이다. 속성값은 left, none ,right , inherit 가 될 수 있고 inherit은 자신을 감싸는 부모 요소의 float속성을 상속받는 것이다.






float을 사용할때 주의점은 width속성과 같이 써주지 않으면 floating element가 페이지의 100% width를 차지할수 있다는 것이다.

Clear Property







clear 속성은 float속성이 이미 적용되고 있는 요소가 있을 때 한줄에 같이 배치되는 요소들에서 이 속성을 지우고 싶을 때 사용한다.
both, left, right 으로 속성값을 지정할 수 있으며 한 예로 left 속성값은 float:left에 대한 속성을 지워버린다.

Overflow Property

텍스트를 담고 있는 p, div 태그와 같은 영역이 있는데 영역에 포함된 텍스트의 크기가 영역보다 큰경우가 발생하는데 이를 해결하기 위해 Overflow  Property를 쓴다.















Sizing and Positioning 









position 값은 static , relative , absolute , fixed로 구성되어 있고 위사진에서 fixed 속성값 때문에 "Here I am!" 이라는 문자는 웹 브라우저 전체 화면을 기준으로 배치되는것을 볼수 있다. scroll을 내려도 fixed 속성값을 가진 element는 그 위치가 변하지 않는다.

Position: Static


 position의 기본 값으로 요소들이 겹쳐지지 않게 한줄에 하나의 요소가 배치된다.







Position: relative












Relative 속성은 원래 해당요소가 배치되어야 하는 곳을 기준으로 상(top)/하(bottom)/좌(left)/우(right) 로 지정한 값만큼 떨어진 곳으로 위치시킨다. 그래서 위의 2사각형은 static으로 표현된 2번사각형 기준으로 top:0x , left:100px 만큼 떨어진 곳에 위치하고 또한 3번 사각형은 static으로 표현된 3번사각형 기준으로 top:0x , left:200px만큼 떨어진곳에 위치한다.

Postition: absolute












absolute속성값은 가장 가까운 element를 기준으로 상/하/좌/우로 지정한 값만큼 떨어지게된다. 만약 상위 element 가 없다면 브라우저의 왼쪽상단을 기준으로 지정한 값만큼 떨어지도록 위치한다.
위의 예제의 2,3번 사각형은 상위요소가 없게 코딩했으므로 브라우저의 왼쪽상단 기준으로 지정한 값만큼떨어지는 것을 볼수 있다. (1사각형이 2,3번요소의 상위요소가 아님!!)

Alignment vs float vs position

  1.  가능하다면 Alignment로 element를 layout시켜라
    1. horizontal alignment: text-align
    2. vertical alignment: vertical-align
  2. Alignment가 안된다면, float 방식을 써라
  3. 위 방법 2가지 다안되면, position 방법을 써라

Vertical-align Property








위와 같이 속성값은 top,bottom,middle 또는 baseline(default) , length value , % 로 가능하다.

위와 같이 padding,margin을 0으로 했음에도 불구하고 이미지 밑에 공간이 보인다, 이는 vertical-align속성의 값이 baseline(default)로 되어있어 이미지밑에 밑줄이 있기때문이다. 이 문제를 해결하려면 vertical-align을 bottom값으로 설정해 주면 된다.


Display Property

Display 속성은 요소의 표현 방식을 결정합니다. Div태그, p태그와 같이 한 줄에 하나씩 배치되는 것을 block 요소라 하고, span 태그와 같이 한 줄에 여러 개씩 연결되어 배치되는 것을 inline 요소라고 합니다. 화면을 구성하는 어떤 요소든 block 또는 inline 속성을 갖습니다.
다음은 display의 속성값들에 대한 설명이다.























4. Encryption [데이터베이스 암호화]

데이터베이스 암호화

이번 chpater에서는 관계형 데이터베이스(RDB)에 쓰이는 Encryption에 대해 알아보자. 당연한 얘기지만 DB에 저장된 데이터를 보호하기 위해 데이터베이스를 암호화하려 한다. DB를 암호화하려면 언제나 운영자(관리자)는 권한이 없는 자에게 데이터를 노출해서는 안되는 안정성 문제와 빠른 시간내에 데이터를 가져다 쓸 수 있어야하는 가용성 문제를 고려해야한다.

데이터베이스 암호화 알고리즘


인덱스와 암호화

인덱스를 사용하는 칼럼을 암호화하는 방법을 알아보자.
기존의 데이터베이스에 새로운 열을 추가할수 있는데 DB는 그열에 입력될 값의 데이터 속성과 크기를 정의한다. 그런데 만약 추가한 열이 검색조건으로 자주 사용된다면 검색 성능을 높이기 위해 index(색인)을 생성하도록 설정한다. 실제로 데이터를 새로 입력하면 DBMS는 자동으로 index를 생성한다.
index는 DBMS에 들어있는 수많은 data의 순서 정보로 데이터마다 붙여 놓은 꼬리표라고도 할 수 있다.











위사진과 같이 TABLE에 자주쓰이는 3번째 열으로 index생성하여서 데이터를 효과적으로 찾을수 있다. 주의할것은 index은 위 사진에서도 보이듯이 순서대로 나타난다.

하지만 인덱스를 암호화하게되면 데이터 순서가 섞이게 될것이다. 그러면 효율적인 인덱스의 강점도 잃어버리게된다. 이제 밑에 나올 해결방법을 읽어보기 전에 각자 어떻게 해야할지 생각해보자.....
그래서 고심끝에 생각한 것이 암호화된 데이터를 기준으로 검색이 가능한 새로운 인덱스를 생성하는 것이다. 그래서 암호화된 데이터에도 인덱스를 만들면 데이터를 찾을때 인덱스를 복호화해야 할 데이터를 지정하거나 그 양을 줄일수 있게 하였다.
수많은 방식(해시 인덱스 , B  트리 인덱스)으로 발전해온 결과 암호화된 데이터를 검색하는 인덱스 방식을 조금 다르게 접근하는 방식을 가진 OPE(Order Preserving Encryption)가 나타났다.

OPE

OPE는 말 그대로 데이터의 정렬 순서를 유지하면서 암호화를 수행한다. 원래 원문을 암호화하면 원문을 알아볼 수 없게되서 순서 정보를 잃게 된다. 하지만 OPE Encryption은 암호화해도 원문은 알아볼 수 없게하면서 순서정보를 잃지 않게 한다.








위 사진이 OPE 암호화를 한 모습이다. 원문의 값 순서와 암호화된 값의 순서가 같은것을 볼수 있다. 이 알고리즘은 암호화된 값이 원문의 값 순서와 같은것을 보면 원본 데이터를 유추할 수 있다는 안정성 문제가 생긴다. 그래서 이를 피하려면 위의 그래프에서 최대한 암호문 사이의 간격을 들쑥날쑥하게 해야한다.
또 다른 문제점으로 123의 암호문 A와 456의 암호문 C를 안다면 A와 C암호문 사이에 올수 있는 암호문 B는 123~456사이의 어떤 값으로 만든 암호문이라는 것을 알수 있다. 그렇다면 공격자는 CPA공격이 가능하게 된다.
그래서 OPE는 검색 성능에 좋은 보안성 기준에서는 절대 안전한 암호화 방식이라고는 할 수없다. OPE는 인덱스가 설정된 컬럼을 암호화하는 특별한 케이스에 대한 암호화라는 것을 잊지 말자.

일반적 데이터베이스 암호화










DB는 DBMS와 Storage로 나뉘고 Storage는 정보를 기록하는 물리적 저장공간이고 DBMS는 저장소에서 데이터를 읽고 쓰는 동작을 수행하고 사용자의 권한을 관리하는 프로그램이다. 외부 애플리케이션은 DBMS에 정보 처리를 요청하고 저장소에 저장된 데이터를 사용하게 된다. 그리고 데이터베이스를 활용하는 모든 시스템은 데이터베이스를 이용하는 외부 애플리케이션이 있다.
이런 구조에서 데이터베이스 암호화는 암호화와 키 관리 위치에 따라 네가지 방식으로 구분한다.

  1. API(Application Programming Interface) 방식
  2. 플러그인(Plug-in) 방식
  3. 하이브리드(Hybrid) 방식
  4. TDE(Transparent Data Encryption) 방식














API 방식

Application 서버에 암호화 모듈을 설치하는 것으로 애플리케이션 수정이 필요하다. 즉 , 애플리케이션에서 데이터를 암호화해서 DB에 넣는 구조이다. 애플리케이션이 수정이 가능할때 적용시 효과적인 방법이다. 이렇게 되면 DB정보도 보호할뿐만 아니라 애플리케이션 기능까지 보호하게 되기때문이다. 또한 DB 종류에 제약없이 적용가능하고 DB에 부하도 주지않는다.
하지만 암호화 대상 데이터와 관련이 있는 Application 모든 부분을 수정해야하므로 비용과 시간이 많이 든다는 단점이 있다. 또 다른 단점으로는 애플리케이션에서 암호화한 데이터가 데이터베이스에 들어가면 DB의 기존 성능에 문제를 줄 수도있다.

Plug-in 방식

DBMS에 암호화를 수행하는 모듈을 설치하는 것으로 DBMS 패키지 방식이라고도 한다. 이 방식의 장점은 데이터를 column단위로 암호화할 수 있어 데이터에 세부적으로 암호화를 적용하고 관리한다. 개인정보 등 중요한 정보를 선별해서 암호화하거나 권한 관리할때 효과적인 방법이다.
단점은 암.복호화를 할때 DBMS에 있는 자원을 사용한다는 것이다. 따라서 플러그인 방식을 적용할때에는 DBMS의 성능이 뛰어나야한다.

Hybrid 방식

Plug-in 방식과 API 방식을 적절히 섞어서 쓰는 방식이다. DB와 Application의 활용 정도에 따라 어느 부분에서 어떤 암호화 방식을 사용할지 결정한다. 잘만 한다면 두가지 방식의 장점을 모두 살릴 수 있다.
하지만 구조적으로 복잡하고 키 관리의 복잡성도 증가하게 된다.

TDE 방식

DBMS가 제공하는 암호화 기능을 이용한다. DB내부에서 DBMS가 저장소에 저장된 데이터를 통째로 암호화한다고 이해하면 된다. 그래서 Plug-in방식처럼 column단위로 세분화해서 관리하지 못하는 한계점을 가진다.


TDE방식을 제외한 앞의 3가지 방식은 데이터를 보호하는 것에 중점을 둔다면 TDE는 저장소가 물리적으로 도난당했을 때 데이터를 보호하는 수단에 가깝다. TDE는 DBMS 동작의 바탕이 되는 엔진 수준에서 암호화하므로 애플리케이션을 수정할 필요가 없다.
이 네가지 방식 외에 파일 단위로 암호화를 수행하는 방식도 있다. 이 방식은 OS의 개체인 파일을 통채로 암호화하는 것으로 DB와 OS 의존도가 높다.

DB 암호화 주의사항



2016년 11월 20일 일요일

1. CSS [Basic CSS]

CSS

정보를 표현해서 보여주는 것이 HTML이라면 CSS는 그 정보들을 꾸며주는 역할을 한다.
HTML에서도 정보를 꾸며줄 수 있지만 그것은 작은 단위의 웹 프로그램을 구현할때는 편하지만 큰 프로젝트에서 element를 다루기에는 아주 비효율적인 방법이므로 CSS를 써서 html element를 꾸며줌

CSS의 기본문법과 사용 방법

CSS 사용방법

  1. linked style sheet
  2. embedded style sheet
  3. inline style sheet

1. linked style sheet
이방법은 css파일이 외부에 따로 있어 html에서 이 CSS파일안의 기능을 사용하고 싶다면  head 태크안의 <link> 태크를 통해 사용가능케 한다. 

Ex) <head> <link href="CSS file" type= "text/css" rel="stylesheet" /> </head>

2. embedded style sheet
이 방법은 head 태그안 그리고 style 태그안에 css문법을 그냥 쓰는 것이다.

Ex) <head>  <style> p { color: red;} </style> </head>
3.  inline style sheet
이 방법은 위에서 말한 html element의 속성에 직접 css 를 쓰는 것이다. 한개 한개의 element 만을 꾸미는데 알맞음.

Ex)  <p style="color:blue;" > hi </p>


CSS 기본문법






위 사진은 CSS을 쓰는 기본 문법이다. 위의 property 와 value의 쌍은 여러개일수 있다.
  • Ex)  p {background-color: yellow; color: red; }  -모든 p 태그의 배경색은 노랑, 글자색은 빨강
  • Ex)  p , h1 , h2 { color: red;} - p,h1,h2 태그 모두 글자색을 빨강으로 함
  • * selector는 html element 모두에 해당하게 함
  • 색은 RGB code로 나타낼수 있다 ( 0(none) ~255(full) )
    • color: rgb(128, 0 ,128);
  • hex code로도 나타낼수 있다.
    • color: #FF0088;
Font에 대한 속성들





  • font-size는 퍼센트(%)으로도 쓸수 있고 숫자로도 쓸수 있다. 
  • font-size 는  px(pixel) , pt(point) , em(m-size) 으로 쓰기 가능하다 크기는 px<pt< em
CSS 주석(comment)
- /* comment */ 와 같이 쓴다

Text에 대한 속성들







  • text-align cab be left,right , center, justify
  • text-decoration cab be overline, line through, blink , none  , underline
Background에 대한 속성들






  • background-repeat can be repeat(default) , repeat-x, repeat-y or no-repeat
  • background-position pair of value like "370px 200px;" 
CSS Selector

CSS ID,Class Selector










위 사진과 같이 html element들은 id와 class를 가질수 있는데, id,class는 css에서 그 id나 class 를 가진 html element를 꾸며주기 위해 사용될수 있다. 
그래서 #은 id를 selector해주고 .은 class를 selector해준다.

위 사진의 css부분을 해석하자면 "#i" 의 뜻은 id이름이 i인 html의 element의 text color를 red로 바꾸고 폰트 크기를 30px로 바꾸겟다는 의미이다. 그리고 "p.c"는 html element중에 p 태그이면서 class 이름이 c 인 element의 text색을 초록으로 하고 폰트 크기를 30px로 바꾸겟다는 의미이다.

CSS pseudo-classes









예시를 통해 이해해보자

  • a element를 누르지 않은 상태에서는 color가 노란색
  • a element에 마우스를 갖다 대면 green
  • a element를 누르고 나면 red







selector 우선순위











점수가 높을수록 우선순위가 높다.

CSS context selector
 

왼쪽은 selector1  안의 selector2 모두에게 적용되는 방법이고 오른쪽은 selector1 바로(direct)안의 selector2에게만 해당되는 방법이다.
예를 들어
1. div p { color: red; }                    2. div > p {color:red;}
와 같이 css를 두종류로 나누었다면


옆의 html에 1번과 같은 css을 적용하면 p 태그안의 text의 색이 빨강으로 변하지만
2번을 적용했을 경우에는 div 바로안의 태그는 span이므로 글자색이 빨강으로 변하지 않는다.