분류 전체보기에 해당되는 글 29건

실무 web 프로그래밍의 구성

학습정리/by ㅎㅈㅇ



저작자표시

'학습정리 > by ㅎㅈㅇ' 카테고리의 다른 글

JavaScript 변수선언에서 함수까지  (1) 2013.07.09
by 알 수 없는 사용자 2013. 6. 27. 17:48

css & selector & 상속

학습정리/by Min

CSS

<!--[if !supportEmptyParas]--> <!--[endif]-->

CSS는 스타일을 일괄적으로 정의하는 것을 의미한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

html과 css는 html4 부터 분리되었으며 따라서 이 표준을 따라줘야한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

CSS는 OPP처럼 상속의 개념이 있다. 기본적으로 CSS의 자료구조는 DOM과 같이 '트리'이다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

스타일의 대상이 되는 것은 <body> 엘리먼트 안에 있는 엘리먼트들이며 여기서 <body>가 루트 엘리먼트, 즉 최상위 부모 엘리먼트가 되는 것이다. 그리고 내가 CSS에서 선택자를 통해 body엘리먼트에 스타일을 정의하면 body 하위에 있는 모든 엘리먼트들에게도 적용된다. 자식의 자식, 그 자식의 자식에게 까지 말이다. 하지만 body 안에 있는 엘리먼트들을 개별적으로 디자인 하는 경우가 더 많다. 이럴때는 바로 '오버라이딩' 기능을 쓰면 된다. 선택자를 이용해 엘리먼트를 선택하고 스타일을 정의하면 그것은 부모 엘리먼트로 부터 상속받은 디자인은 무시하고 오버라이딩한 디자인이 적용되는 것이다.

먼저 트리구조로 엘리먼트를 나열하고 상속 개념을 이용하여 CSS파일을 작성해야한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

기본적으로 선택자는 엘리먼트 이름, id, 클래스로 나눌수 있다. 하지만 이보다 훨씬더 복잡하고 다양한 선택자가 있다는것을 알아야한다.



선택자(Selector)

선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

Pattern Meaning S5 C8 F3.6 O11 I9b I8 I7 I6
#id id로 지정된 요소 선택 O O O O O O O O
.class class로 지정된 요소 선택 O O O O O O O O
E E 요소를 선택 O O O O O O O O
E:link 방문하지 않은 E를 선택 O O O O O O O O
E:visited 방문한 E를 선택 O O O O O O O O
E:hover 마우스가 올라가 있는 동안 E를 선택 O O O O O O O O
E:active 마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택 O O O O O O O X
E:focus focus가 머물러 있는 동안 E를 선택 O O O O O O X X
E:first-line E 요소의 첫 번째 라인 선택 O O O O O O O X
E:first-letter E 요소의 첫 번째 문자 선택 O O O O O O O X
* 모든 요소 선택 O O O O O O O O
E[foo] ‘foo’ 속성이 포함된 E를 선택 O O O O O O O X
E[foo="bar"] ‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택 O O O O O O O X
E[foo~="bar"] ‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택 O O O O O O O X
E[foo|="en"] ‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택 O O O O O O O X
E:first-child 첫 번째 자식 요소가 E라면 선택 O O O O O O O X
E:lang(fr) HTML lang 속성의 값이 ’fr’로 지정된 E를 선택 O O O O O O X X
E::before E 요소 전에 생성된 요소 선택 O O O O O O X X
E::after E 요소 후에 생성된 요소 선택 O O O O O O X X
E>F E 요소의 자식인 F 요소 선택 O O O O O O O X
E+F E 요소를 뒤의 F 요소 선택 O O O O O O O X
E[foo^="bar"] ‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택 O O O O O O O X
E[foo$="bar"] ‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택 O O O O O O O X
E[foo*="bar"] ‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택 O O O O O O O X
E:root 문서의 최상위 루트 요소 선택 O O O O O X X X
E:nth-child(n) 그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택 O O O O O X X X
E:nth-last-child(n) n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택 O O O O O X X X
E:nth-of-type(n) E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택 O O O O O X X X
E:nth-last-of-type(n) E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택 O O O O O X X X
E:last-child E 요소 중 마지막 자식이라면 E 선택 O O O O O X X X
E:first-of-type E 요소 중 첫번째 E 선택 O O O O O X X X
E:last-of-type E 요소 중 마지막 E 선택 O O O O O X X X
E:only-child E 요소가 유일한 자식이면 선택 O O O O O X X X
E:only-of-type E 요소가 같은 타입이면 선택 O O O O O X X X
E:empty 텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택 O O O O O X X X
E:target E의 URI의 대상이 되면 선택 O O O O O X X X
E:enabled 활성화된 폼 컨트롤 E요소 선택 O O O O O X X X
E:disabled 비활성화된 폼 컨트롤 E요소 선택 O O O O O X X X
E:checked 선택된 폼 컨트롤(라디오버튼,체크박스)을 선택 O O O O O X X X
E:not(s) s가 아닌 E 요소 선택 O O O O O X X X
E~F E 요소가 앞에 존재하면 F를 선택 O O O O O O O X

<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3

참조:


상속

CSS에서 상속이란 특정 속성들이 부모 요소로부터 자식 요소로 전달되는 개념입니다. 이것은 유전학에서 말하는 상속과 매우 흡사합니다. 부모의 눈이 파란색이라면, 자식들의 눈 또한 파란색일 확률이 높습니다.

모든 CSS 속성들이 상속되는 것은 아닙니다. 상속된다면 좀 이상한 것들이 있기 때문이죠. 예를 들어, 마진은 상속되지 않습니다. 자식 요소가 부모와 동일한 마진을 가지는 경우는 많지 않기 때문입니다. 대부분의 경우, 상식적으로 생각하면 어떤 속성들이 상속되고 어떤것들이 그렇지 않을 지 쉽게 짐작할 수 있습니다. 좀 더 구체적인 내용을 원한다면, CSS 2.1 명세의 속성 요약 테이블을 보면 될 것입니다.


상속이 유용한 이유

그러면 CSS는 왜 상속이라는 메커니즘을 가지고 있을까요? 가장 쉬운 답안은, 상속이라는 시스템이 없었다면 어땠을지 생각해 보는 것입니다. 상속의 개념이 없었다면 글꼴, 글씨크기, 글색상 같은 것은 모든 요소들에 대해서 전부 각각 지정했어야 했을 것입니다.

html 요소나 body 요소에서 글씨 속성을 정하고 모든 요소들이 그것을 물려받게끔 할 수 있습니다. 특정한 컨테이너 요소에서 배경색과 전경색을 정하면, 그 컨테이너에 들어 있는 모든 자식 요소들이 전경색과 배경색을 물려받습니다. 원래 배경색은 상속되지 않는것이 맞지만 각 요소들의 기본 배경색이 투명하기 때문에 컨테이너가 가진 배경색이 그대로 비쳐 보이는 것입니다. 이 효과는 마치 배경색이 상속되는 것 처럼 보이지만 그렇지는 않습니다. 만약 배경 이미지가 상속된다면 그 결과는 아주 이상할 것입니다.


상속의 원리

HTML의 모든 요소들은 부모로부터 상속할 수 있는 속성은 전부 상속합니다. 유일한 예외라면 html 요소입니다. 부모가 없으니 당연하지요.

물려받은 속성이 적용될지 아닐지는 다른 것들과의 관계에서 설정됩니다. 나중에 캐스케이딩을 다루면서 다시 살펴볼 것입니다. 지금은 그냥, 어머니가 파란 눈을 가졌더라도 아이가 갈색 눈을 가질 수 있는 정도로만 이해하세요.



Descendant Selector


하위 선택자. 부모를 지정해주면 그 아래있는 자손만 선택


부모를 앞에 쓰고 그 뒤에 자식을 쓰면 된다.


li a {속성: 값;}                   li 안에 위치한 자손 a 를 선택함


p strong {속성: 값;}           p 안에 위치한 자손 strong을 선택함


html body p {속성: 값;}       html 안에 위치한 body 안에 위치한 자손 p 를 선택함


 


자식 선택자 child Selector / 꺾음 괄호( > )사용


자손 선택자와 비슷하게 자식 선택자로 사용하여 자식을 선택할 수 있다. 꺾음 괄호( > ) 사용


어느 부모의 어느 자식인지 정확히 지정할 수 있는 선택자.


#nav>p                           아이디 nav (부모)의 자식 p를 모두 선택함


p>strong                         p(단락:부모)내부의 자식 strong을 모두 선택함


 


인접 형제 선택자 / ( + ) 플러스 기호 사용


부모의 가장 가까운(인접한) 형제를 찾는 선택자.


h1 + p                         h1(부모)의 가장 가까운 자식 p 를 선택함


                                  (h1 아래 자식 p가 많을 경우 가장 h1에 인접한 단 하나의 p만 선택됌)


 


일반 형제 선택자 / ( ~ ) 물결 기호 사용


위의 인접 형제에서는 h1에 가장 인접한 단하나의 자식 p만 찾는 반면에,


이 일반 형제 선택자는 h1의 자식들 p를 모두 선택한다.


h1 ~ p                           h1 자식의 p를 모두 선택


 

body {

/* font-family: 폰트, 폰트, 폰트, 폰트 패밀리;

1. Serif(명조체) : Times, 궁서체, 바탕체

2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕

3. Monospace(고정 폭; 모든 알파벳 폭이 똑같다.): Courier, Monaco

4. Cursive(흘림체): Comic Sans

5. Fantasy: impact

*/


font-family: Verdana, Geneva, Arial, Sans-serif;


/*

Verdana 먼저 찾고, 없으면 Geneva. 없으면 Arial. 없으면 sans-serif 를 찾는다.

1. 가장 많이 웹페이지보는 운영체제에 적합한 폰트를 정의한다.

2. 없으면 그 다음 적합한 폰트를 정의.

3. 위와 같다.

4. Sans-serif는 브라우저가 디폴트로 사용하기로한 폰트를 찾아 보여준다.

*/

<!--[if !supportEmptyParas]--> <!--[endif]-->

/* font-size: 폰트의 높이

1. px : 픽셀 단위로 지정 가능하다.

2. % : 기존 다른 폰트 크기를 기준으로 설정

3. em: 배수. 기존 다른 폰트 크기를 기준으로 설정

4. 상수: xx-smail ~ xx-large

-> body에서 폰트의 기본 크기 값을 설정한다.

-> 가능하면 상수값으로 설정한다.

-> body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.

<!--[if !supportEmptyParas]--> */

}

<!--[if !supportEmptyParas]--> <!--[endif]-->

상속

스타일 중 일부는 자손에게 상속된다.

예시) font

<!--[if !supportEmptyParas]--> <!--[endif]-->

상속안되는 것

예시) border

<!--[if !supportEmptyParas]--> <!--[endif]-->

!부모로부터 상속받는 key가 있고, 상속받지 않는 key가 있다는 걸 알고 있자.

<!--[if !supportEmptyParas]--> <!--[endif]-->

italic: 폰트에서 제공하는 기울림체 사용

oblique: 폰트에 기울림체가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생.

벡터 폰트: 창을 늘였다가 줄여도 폰트 크기는 유지된다. 단점은 출력이 느리다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

* Box

□

배경안에 색, 그림을 넣을 수 있다.

border안에 내용물이 들어온다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

padding - 박스 안쪽 폭

margin - 박스 바깥쪽 폭

width - 박스 안에 내용물의 너비

<!--[if !supportEmptyParas]--> <!--[endif]-->

margin 설정 시 두 개 박스 사이에 간격은 겹친다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

□

↕ 두 박스 사이에 마진은 겹침

□

실제너비 = width + border(경계선 좌/우 너비) + padding(좌/우) + margin(좌/우)

웹 페이지 크기는 1024.

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> <!--[endif]-->

#guarantee {

line-height: 1.9em;

font-style: italic;

background-color: #a7cece;

border-color: white;

border-style: dashed;

border-width: 5px;

padding: 25px;

padding-left: 80px;

margin: 30px;

margin-right: 250px;

background-image: url(images/background.gif);

background-position: bottom right;

background-repeat: no-repeat;

width: 100px;

}

아이디 guarantee로 되어있는 것에 대해 스타일을 바꿔준다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

line-height: 1.9em;

/* 라인 폭넓이를 1.9배로 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

font-style: italic;

/* 글자 스타일을 '기울임'으로 바꾼다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

color: #444444;

/* 글자 색상을 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

font-family: Georgia, "Times New Roman", Times, serif;

/* 글꼴 그룹 지정하는 것으로, Times New Roman같은 경우에는 이름 사이에 공백이 있기 때문에 쌍따옴표로 감싸줘야 한다. 각각의 폰트는 하나로만 되어 있는 것이 아니라 세트로 구성되어 있다. 위 font-family 참조. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

padding: 25px;

/* 해당 엘리멘트 박스 안쪽에 너비를 조절한다.

상 / 우 / 하 /좌 너비를 25px로 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

padding-left: 80px;

/* 해당 엘리멘트 박스 안쪽에서 왼쪽 너비를 80px만큼 더 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

margin: 30px;

/* 해당 엘리멘트 박스 바깥쪽 모든 너비를 30px만큼 더 늘린다.

padding과 마찬가지로 상 / 우 / 하 / 좌 너비로 순으로 간다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

margin-right: 250px;

/* 해당 엘리멘트 박스 바깥쪽 우측 너비를 250px만큼 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

border-style: dashed;

/* 테두리(경계)선 스타일을 dashed로 설정한다 */

<!--[if !supportEmptyParas]--> <!--[endif]-->

border-width: 5px;

/* 테두리(경계)선 굵기를 5px만큼 늘린다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

border-color: red;

/* 테두리(경계)선 색상을 red로 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-color: #a7cece;

/* 해당 엘리멘트 박스 배경색상을 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-image: url(images/background.gif);

/* 해당 엘리멘트 박스 배경그림을 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-repeat: no-repeat;

/* 해당 엘리멘트 박스 안에 배경 이미지를 반복해주는데, no-repeat 은 반복하지 않고 한 번만 출력한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

background-position: bottom right;

/* 해당 엘리멘트 박스 안에 배경 이미지 위치를 잡아준다. 우측 하단으로 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

width: 100px;

/* 해당 엘리멘트 박스 가로 크기를 100px로 설정한다. */

<!--[if !supportEmptyParas]--> <!--[endif]-->

<!--[if !supportEmptyParas]--> 

div - block

span - in line

<!--[if !supportEmptyParas]--> <!--[endif]-->

웹 브라우저는 HTML 문서에 기록된 순서대로 출력한다.

출력하다가 화면의 오른쪽 경계에 부딪히면 다음 라인으로 넘어간다.

만약, 출력하다가 오른쪽이나 왼쪽에 공중부양된 엘리멘트가 있다면 그 엘리멘트의 경계면을 따라서 출력한다.

왜냐하면 콘텐츠는 보여야 되기 때문이다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

1. div

- UI 컴포넌트를 묶는 역할. 여러 개의 UI 컴포넌트를 하나의 단위로 다루기 위함.

- block 형식. 라인 전체를 점유한다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

HTML에서 쓰지 말아야 할 태그

<b>, <i>, <center> 의미를 나타내지 않고 모양을 나타내는 것.


*float

속성: left, right, none, inherit

순서가 아래와 같이 있다면 1번이 빠지고 뒤에 있던 숫자들이 앞으로오고 1번은 우측이나 좌측으로 빠져서 같이 있다.

<!--[if !supportEmptyParas]--> <!--[endif]-->

①      ②, ①

②      ③

③ - > ④

④      ⑤

⑤

<!--[if !supportEmptyParas]--> <!--[endif]-->

footer에서 주로 사용되는 것은 clear이다.

footer는 하단에 copyright를 쓰이는데에 사용된다.


2. span

- 콘텐츠의 일부를 논리적으로 구분하기 위함.

- inline 형식.

 

<ul>

<li><span class="cd">Buddha Bar</span>,

<span class="artist">Claude Challe</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">When It Falls</span>,

<span class="artist">Zero7</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">Earth 7</span>,

<span class="artist">L.T.J. Bukem</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">Le Roi Est Mort, Vive Le Roi!</span>,

<span class="artist">Enigma</span></li>

<!--[if !supportEmptyParas]--> <!--[endif]-->

<li><span class="cd">Music for Airports</span>,

<span class="artist">Brian Eno</span></li>

</ul>

<!--[if !supportEmptyParas]--> <!--[endif]-->

body {

background-color: #b5a789

font-family: Georgia, "Times New Roman", Times, serif /* 글씨체중에 띄어쓰기가 있는 글씨체는 “ ” 안에 넣어준다.

font-size:10pt

/* margin: 0px 0px 0px 0px; */

/* margin: 0 0 0 0; */

/* 첫번째(위/아래) 두번째(좌/우) */

/* margin: 0px 0px; */

margin: 0px /* 상/하/좌/우 */

}



.beanheading img {

position: relative /* 출력 순서를 지키며 상/하/좌/우 이동 */

left: 120px

}

 

rgba(R,G,B,A) / hsla(H,S,L,A)

기존 방식은 16진수 6자리를 이용하여 두자리씩 #00/00/00 나누어 표기하는 방식을 사용했었는데, CSS3에서는 rgba(R,G,B,A) 형식의 10진수(0~255)를 통한 RGB표현 그리고 A(투명도)를 표시하거나 HSLA(색상각도,채도,명도,투명도)로 표기할 수 있다.

Source
div{
  padding:10px;
  color: rgba(0,0,0,1);
  color: hsla(180,0%,0%,1);
  background-color: rgba(150,100,80,.5);
  background-color: hsla(220,64%,69%,.5);
}
속성사용방법
color: ①rgba(0,0,0,1);
color: ②hsla(180,0%,0%,1);
background-color: ①rgba(150,100,80,.5);
background-color: ②hsla(220,64%,69%,.5);
같은 기능을 하지만 두 가지 모두 테스트 해보고 차이점을 파악해 보자.
① – (R,G,B,투명도) ② – (색상각도,채도,명도,투명도)
좀 더 디테일하게 적용 할 수 있는 속성들
color:
background-color:

gradient
배경에 그라데이션을 적용 할 수 있고 한가지 색상뿐 아니라 여러 색상표현이 가능하다.
Source
div{
  padding:10px;
  border:solid 5px #66CCFF;
  border-radius: 20px;
  background:-webkit-gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
  background:gradient(linear, 80% 20%, 10% 20%, from(#ACE8E8), to(#E1F7F7));
}
opacity
요소에 투명도 값을 지정하는 속성이며 요소 전체에 효과가 적용된다.
Source
div{
  padding:10px;
  opacity:.5;
  background:#<| class="nu0">777|>;
}
text-shadow
일반 텍스트 컨텐츠에 그림자를 입히는 속성이다.
Source
div{
  text-shadow:4px 4px 4px #aaa;
  font-size:5em;
  font-family: arial;
}
마크업에서 텍스트를 “Clear:both;” 라고 변경하고 진행하면 된다.
View
속성사용방법

text-shadow: ①4px 4px ②4px ③#aaa;
① – 가로,세로 그림자거리 ② – 그림자 blur 크기
③ – 그림자 색상
text-overflow
텍스트 컨텐츠가 넘칠 때 줄여주거나 숨기거나 하는 속성이다.
Source
div{
    padding:10px;
    width:300px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    border:5px solid #ccc;
}

css는 엘리먼트가 보여지는 방법을 제어하기 위해 박스 모델을 사용한다. 박스는 콘텐츠 영역과 선택 가능한 패딩, 테두리 그리고 마진으로 구성되어 있으며, 콘텐츠 영역은 엘리먼트의 콘텐츠를 포함한다.

패딩은 콘텐츠 영역 주위에 시각적인 빈 공간을 생성하는데 사용되며, 패딩과 콘텐츠를 둘러싸는 테두리는 콘텐츠를 시작적으로 분리하는 방법을 제공한다.

마진은 테두리와 패딩 그리고 콘텐츠를 둘러싸며, 엘리먼트와 다른 엘리먼트 사이에 빈 공간을 추가한다.
패딩과 테두리, 마진은 모두 선택이 가능하며, 엘리먼트의 배경은 콘텐츠 밑에 보이며, 패딩은 마진 밑에서 보이지 않는다. 패딩과 마진의 크기는 픽셀 혹은 비율로 설정하며, 테두리의 넓이는 픽셀이나 thin, medium, thick 키워드를 사용해서 설정한다.

하나의 그룹으로 엘리먼트에 대한 스타일을 합치기 원할때는 class 속성을 사용하며, 엘리먼트에 유일한 이름을 주기 위해서는 id속성을 사용하며, 유일한 스타일을 제공할 경우에도 id속성을 사용한다. 주어진 id가 있는 페이지에서는 오직 하나의 엘리먼트만 올 수 있다.

하나의 엘리먼트는 오직 하나의 id만 가질 수 있지만, 많은 클래스에 속할 수 있으며, XHTML에서 한개 이상의 스타일 시트를 사용 할 수 있다. 두 개의 스타일 시트가 속성 정의에서 충돌할 경우, XHTML 파일의 가장 마지막에 잇는 스타일 시트가 우선 순위를 가진다.

<div> 엘리먼트들은 논리적인 구간 안으로 서로 연관된 엘리먼트들이 합쳐져 그룹화 되는데 사용 된다. 논리적인 구간을 생성하는 것은 페이지의 주요 콘텐츠 영역과 머리글 그리고 바닥글을 식별하는데 도움을 줄 수 있다.
평이한 스타일을 필요로 하는 엘리먼트들을 함께 묶기 위해 <div> 엘리먼트를 사용하며 스타일링과 명쾌함을 위해 파일에 더 많은 구조를 추가하려면 중첩된<div> 엘리먼트를 사용하고, 그럴 필요가 없다면 추가 하지 않는다.
중첩된 <div>에 있는 border 속성을 사용하여 하나의 엘리먼트 그룹 주위에 테두리를 추가 할수 있다. 
width속성은 엘리먼트의 콘텐츠 영역의 너비를 설정한다. 엘리먼트의 전체 너비는 콘텐츠 영역의 너비와 패딩, 테두리 그리고 추가한 마진의 너비를 합한 너비가 되며, 일단 엘리먼트의 너비를 설정하게 되면 브라우저 윈도우의 전체 너비에 맞추기 위해 확장할 필요가 없다. 

Text-align은 블록 엘리먼트를 위한 속성이며, 블록 엘리먼트에 있는 모든 인라인 엘리먼트를 가운데로 놓는다. 어떤 중첩된 블록 엘리먼트에 의해 서도 상속된다. 다른 엘리먼트 내에 중첩된 엘리먼트를 선택하기 위해 자손 선택자를 사용할수 있으며, 자손 선택자는 div h2 {....} 엘리먼트에 중첩된 모든 <h2>를 선택할수 있다.

<span> 인라인 멜리먼트는 <div> 엘리먼트와 비슷하다. 그것은 연관된 인라인 엘리먼트들과 텍스트를 하나로 묶는데 사용된다. <div>처럼 클래스를 꾸미기 위해 <span>엘리먼트를 클래스(혹은 유일한 id를 가진 <span>엘리먼트)에 추가할수 있다.

블록 엘리먼트들은 엘리먼트들 사이에 라인 브레이크를 넣고 위에서 아래로 흐르며, 드폴트로 각각의 블록 엘리먼트는 브라우저 윈도우의 전체 너비를 점유한다. 인라인 엘리먼트는 하나의 블록 엘리먼트 내부에서 왼쪽 위에서 오른쪽 아래 방향으로 흐르며, 한 줄 이상이 필요하게 되면, 브라우저가 새로운 줄을 생성하고 인라인 엘리먼트를 포함하기 위해 세로 방향으로 블록 엘리먼트를 확장한다.
통상적인 페이지 흐름에 있는 두 개의 블록 엘리먼트에 근접해 있는 top과 bottom 마진은 둘 중 더 큰 마진의 크기로 합쳐지거나 같은 크기를 가진다면 한쪽 마진의 크기로 합쳐진다.
떠다니는 엘리먼트들은 보통의 흐름 밖으로 옮겨지며, 왼쪽 혹은 오른쪽에 위치하게 된다. 따다니는 엘리먼트들은 블록 엘리먼트의 맨위에 있으며 그들의 흐름에 영향을 주지 않는다. 인라인 콘텐츠는 떠있는 엘리먼트의 경게를 존중하며, 그것 주위로 흘러간다.
clear 속성은 떠다니는 엘리먼트가 블록 엘리먼트의 왼쪽 혹은 오른쪽에 오지 않도록 명시하는데 사용된다. clear가 설정된 블록 엘리먼트는 그것의 한쪽에서 블록 엘리먼트가 자유로와 질때까지 아래로 내려갈 것이다.

- liquid 레이아웃 : 브라우저 윈도우를 확장할때 페이지를 맞추기 위해 페이지의 콘텐츠를 확장한다.
장점 : 브라우저의 크기가 어떻든 보기에 좋은 모양으로 출력 된다.
단점 : 코딩이 복잡하다. 원하는데로 완력하게 구현하기 어렵다.

- frozen 레이아웃 : 콘텐츠의 너비가 고정되고 브라우저 윈도우의 크기에 따라 확장되거나 축소되지 않는다. 이것은 디자인에 대한 제어권을 좀더 제공한다는 장점이 있으나, 효과적으로 브라우저의 너비를 사용하지 못한다.
장점 : 코딩하기 편하다. 보기 좋게 코딩해 두면 그 모양을 계속 유지할 수 있다.
단점 : 사용자가 한번에 화면을 다 볼수 없어 ㅅ크롤 바를 움직여야 하는 경우가 종종 있다.
화면에 완벽하게 메우기는 어렵고, 또 화면에 완벽하게 메우면 화면을 보기가 너무 불편해서 대부분 800px정도로 토딩하는걸 고려 했을때, 화면의 왼쪽에 딱 붙어서 출력 되기 때문에 화면을 완전히 확장해도 보기에 이상한 화면이 된다.

- jello 레이아웃 : 콘텐츠 너비가 고정되어 있지만 마진은 브라우저 윈도우와 함께 확장되고 축소된다. 보통 페이지의중앙에 콘텐츠를 위치 시키며, 이것은 frozen 레이아웃이 가진 장점과 같지만 더 매력적이다.  
콘텐츠 크기는 고정되어 있되 콘텐츠를 가운데로 정렬하여 약간의 불편함은 있으나 화면이 많이 확장 되어도 보기에 나쁘지 않는 상태를 유지 한다.

position 속성에 설정할 수 있는 값은 static, absolute, fixed, relative의 총 4가지가 있다. 

static 포지셔닝 
 - position 속성의 디폴트 값이며, 페이지의 일반적인 흐름에 엘리먼트를 위치 시킨다.

absolute 포지셔닝
 -  페이지의 어느곳에라도 엘리먼트를 위치 시킬수 있다. 디폴트로 절대 위치를 잡은 멜리먼트들은 페이지의 가장자리에 상대적으로 위치하게 된다. 절대적으로 위치한 엘리먼트들은 z-index 속성을 사용하여 서로의 위로 층층이 높여질 수 있다. 
- 고정된 위치에 있는 엘리먼트들은 항상 페이지가 스크롤 될 때 움직이지 않고 브라우저 윈도우에 상대적으로 위치해 있는다. 페이지에 있는 다른 콘텐츠들은 이러한 엘리먼트 밑으로 스크롤 된다. 
- 상대적으로 위치한 엘리먼트들은 먼저 일반적으로 페이지로 흘러 들어가며, 명시된 양에 의해 상쇄되고 통상적으로 위치해 있는 공간을 비어 있게 남겨 둔다. 
position - fixed
- 일반적으로 absolute 와 같은 성질을 가진다. 다른 점이라면 fixed 는 스크롤을 내려도 브라우저 상에서 위치가 변하지 않고 고정된다.
background-attachment 의 효과와 동일하다

relative 포지셔닝
 - left, right, top, bottom 일반적으로 흐름에 잇는 엘리먼트들의 위치로부터의 상쇄된 양을 참조한다.

float 
- 여러개의 컬럼을 가진 레이아웃을 위한 유연한 해결책을 제공하며, absolute 포지셔닝으로는 할수 없는 엘리먼트를 정리 한다.

- 박스 이동, 정렬(float 속성)

•속성 : float
•값 : left, right, none, inherit
•기본값 : none
•적용대상 : position 속성의 값이 'static' 인 요소(content 속성으로 생성된 내용 제외)

속성 값에 대한 의미는 다음과 같다. 

float: left : 그 요소를 왼쪽으로 float된 블록 박스로 만든다.

float: right : 그 요소를 오른쪽으로 float된 블록 박스로 만든다.

float: none : 그 요소를 float 하지 않는다. 

float 속성을 적용하는 요소는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있다. 

float는 뒤에 이어지는 다른 블록 레벨 요소의 박스에서도 유효하며 float가 헤제되지 않는다.(clear 속성으로 해제 가능) 

- 박스 이동, 정렬 해제(clear 속성)

•속성 : claer
•값 : left, right, none, both, inherit
•기본값 : none
•적용대상 : 블록 레벨 요소

속성 값에 대한 의미는 다음과 같다. 

clear: none : float에 대하여 박스의 위치를 제약하지 않고 float는 계속해서 유효, float는 해제되지 않는다.

clear: left : 왼쪽으로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 왼쪽 float 해제

clear: right : 오른쪽으로 플로트된 박스보다 아래에 새로운 박스를 생성하여 표시, 오른쪽 float 해제

clear: both : 좌우로 float된 박스보다 아래에 새로운 박스를 생성하여 표시, 좌우 양측 float 해제

clear 속성은 float 된 박스 뒤에 이어지는 박스가 인접하지 않게 배치하는 속성이다. 

- 겹쳐지는 순서(z-index 속성)

•속성 : z-index
•값 : auto, 정수, inherit
•기본값 : auto
•적용대상 : position 속성의 값이 'static' 이외의 요소

속성 값에 대한 의미는 다음과 같다. 

z-index: auto : 그 박스의 겹쳐지는 순서는 부모 요소와 같다. 새로운 순서를 지정하지 않는다.

z-index: 정수 : 그 박스의 겹쳐지는 순서를 명시하며 기준이 되는 '0'이 자동으로 지정된다. 값이 큰 박스가 값이 작은 박스보다 항상 앞에 표시된다. 마이너스 값도 지정이 가능하다. 같은 값의 박스는 XHTML 에서 뒤에 출현하는 요소가 앞에 표시된다.

- M I N -
 


저작자표시

'학습정리 > by Min' 카테고리의 다른 글

안드로이드 nfc 사이트  (0) 2013.07.18
AOP(Aspect-oriented programming)  (0) 2013.07.12
nodejs  (0) 2013.07.11
박스 모델  (0) 2013.06.25
폰트와 색으로 장식하기  (0) 2013.06.25
by 알 수 없는 사용자 2013. 6. 26. 16:42

HTML & CSS

학습정리/by aking

CSS 시작하기

  • HTML의 본연의 목적인 구조화된 문서로써 제 역할을 수행하기 위해 디자인적인 요소는 HTML과 완전히 분리시켜

  • ‘구조화된 HTML을 만들어보자‘ 라는 것이 주된 목적이었다.

  • 거기에 따라 HTML에서 디자인에 관련된 요소들은 전부 사용을 지양할 것을 권고하고 있다.

 


구조화된 HTML?

  • 그럼 구조화된 HTML이란 무엇인가? 구조화된 HTML은 HTML태그 본연의 용도에 맞게 사용한다는 것으로

    예를 들면 최상위 제목을 뜻하는 <h1> 태그는 문서의 제목 수준으로 쓰이며, 본문 내용은 <p> 태그로 사용한다.

  • 이렇게 역할을 나뉘게 되면 디자인적 요소가 대부분 배제되기 때문에 HTML을 알아보기 훨씬 쉽다.

 


분담 역할

  • 이렇게 역할을 분담하게 되면 디자인에 필요한 부분은 CSS가 전담하기 때문에

    웹 디자이너와 웹 개발자간의 협업이 훨씬 용이해진다.

  • 게다가 CSS는 별도의 파일 형태로 다른 문서에서도 동일한 CSS를 호출할 수 있기 때문에

    트래픽을 줄이는 효과도 있다.

 


좀 더 Stylish한 것을 원하나요?

  • 이러한 문제들 때문에 등장한 것이 바로 css (Cascading Style Sheets)입니다.

  • css는 세밀하게 디자인할 수 있는 명령어 집단이라고 생각하시면 됩니다.

  • css는 실제로 HTML보다 스타일 정보를 명시하는데 있어 훨씬 잘 들어맞는다.

  • 약간의 css를 사용하는 것만으로도, HTML의 스타일에 꽤 큰 효과를 줄 수 있습니다.

  • 또한 여러 페이지들의 스타일을 한 번에 처리하는데 있어서도 css가 훨씬 더 나은 방법이라는 것을 알게 될 것이다.

 

 

HTML 구조

<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />

<title>브라우저 타이틀바 제목</title>

<style type=“text/css”>

 

/* 태그명으로 찾기 */

h1 {

text-align: center; /* 글자 가운데 정렬 */

color: red; /* 글자 빨간색 */

}

 

/* 아이디로 찾기 */

#p1 {

border-style: dotted; /* 테두리선 스타일을 도트로 설정 */

border-width: 5px; /* 테두리선 상하 좌우 5px로 설정 */

                            /* 상 / 우 / 하 / 좌 / 로 시계방향으로 설정 */

border-color: blue; /* 테두리선 색상을 블루로 설정 */

}

 

/* 클래스(분류)로 찾기 */

.desc {

background-color: yellow; /* 배경색상을 노랑색으로 설정 */

}

 

/* 동일한 태그와 해당 아이디로 찾기 */

 

p#intro {

color: rgb(0,255,0); /* 글자색을 RGB로 설정 */

font-family: 궁서; /* 글씨체 궁서체로 설정 */

}

</style>

 

</head>

<body>


<h1 id=“header1” class=“desc”>이것은 태그명과 클래스로 만들어놓은 style 적용됨.</h1>


<p id=“intro”>이 문장은 p태그와 id 값이 intro이 같아야 스타일 설정이 됩니다.</p>


</body>

</html>

 


<BONUS> 디자인하는데 필요한 색상 RGB!

R

G

B

0

0

f

f

0

0

0

0

0

0

0

0

0

0

1

1

1

1

1

1

1

1

0

0

0

0

0

0

0

0

<- 1byte ->

<- 1byte ->

<- 1byte ->

0

255

0









시맨틱 웹이이란?

 

들어가기 앞서 시맨틱 웹과 현재 웹의 차이를 알아보자.

 

  • 현재 웹상은 컴퓨터가 해석할 수 없는 시각정보에 대한 메타데이터와 자연어로 기술된 문장으로 가득 차 있다.
  • 예를 들어 <em>원숭이</em> 엉덩이는 <em>빨갛다.</em> 라는 예에 볼 수 있듯 <em> 태그는 단지 원숭이 엉덩이는 빨갛다. 라는 단어를 강조하기 위해 사용된다.
  • 이 HTML을 받아서 처리하는 컴퓨터는 원숭이라는 개념과 빨갛다. 라는 개념이 어떤 관계를 가지는지 해석할 수 없다.
  • 단지 <em> 태그로 둘러싸인 구절을 다르게 표시하여 시각적으로 강조할 뿐이다.
  • 게다가 원숭이 엉덩이는 빨갛다. 라는 것을 서술하는 예의 문장은 자연어로 작성되었으며 기계는 단순한 문자열로 해석하여 화면에 출력한다.

 

  • 시멘틱 웹은 XML에 기반한 시맨틱 마크업 언어를 기반으로 한다.
  • 하지만 XML로 정의한 태그는 사람이 이해하기 어렵지 않으나 기계가 자동적으로 그 의미를 이해하기는 어렵다.
  • 특히 태그 사이의 의미 연관성을 추론하기란 매우 어렵다.
  • 임의로 만든 태그의 사용법은 알 수 있어도 어떤 의미를 담고 있는 태그인지 파악하기는 어려운 것이 XML의 단점인 것이다.
  • 이런 문제를 해결하기 위해 제시된 기술이 있는데 그것이 바로 RDF (Resource Description Framework)이다.
  • RDF는 특정 자원에 대한 메타데이터를 설명하는 XML기반의 프레임워크이다.
  • RDF는 자원, 속성, 속성값을 묶어서 하나의 단위로 취급하는 기술로 정보를 구성하는 자원에 대한 좀 더 세밀한 설명과 관계파악을 쉽게 해준다.
  • 현재 시맨틱 웹의 구조는 RDF와 같은 기술에 크게 의지하고 있다.

 

시맨틱 웹을 좀 더 알아보자.

  • 시맨틱 웹이란 단어를 풀어보자면 ‘의미를 가지는 웹’, 또는 ‘의미론적인 접근’. 좀 더 풀어보자면 ‘뜻을 살린 웹’을 뜻한다.
  • 이는 컴퓨터가 사람을 대신하여 정보를 읽고 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 하는 차세대 지능형 웹을 의미한다.
  • 시맨틱 웹의 궁극적인 목적은 웹에 있는 정보를 컴퓨터가 좀 더 이해할 수 있도록 표준 및 기술을 개발하여 의미적 검색, 데이터 통합, 네비게이션, 업무의 자동화 등을 지원하는 것이다.

 

 

 

 

- a.k.a. aking -


 

 

저작자표시

'학습정리 > by aking' 카테고리의 다른 글

사이트정리  (0) 2013.07.21
안드로이드 NFC  (0) 2013.07.19
Java Script  (0) 2013.07.09
(수정중) GIT Server 구축 및 Log4J 설정  (0) 2013.06.24
by 알 수 없는 사용자 2013. 6. 25. 20:50

박스 모델

학습정리/by Min

박스 모델

박스 모델은 좁은 범위로 보면 HTML로 구조화된 콘텐츠를 다른 콘텐츠와 구분하고 조화롭게 배치하기 위한 개념이며, 큰 범위로 보면 모든 HTML 요소가 갖는 블럭 개념입니다.

 

블럭 레벨 요소 뿐만 아니라, 인라인 레벨 요소 또한 박스 모델을 갖습니다. 다만, 지정할 수 있는 속성이 제한되어 있습니다.

 

박스 모델의 구성 요소

넓이 : 컨텐츠의 가로 크기

높이 : 컨텐츠의 세로 크기

패딩 : 컨텐츠와 테두리 사이의 간격, 테두리를 경계로 안쪽 여백이라고도 함. 배경이 표시됨

테두리 : 패딩과 마진의 경계

마진 : 인접한 박스와 간격, 테두리를 경계로 바깥 여백이라고도 함.

 

박스 모델의 크기

가로 크기 : "왼쪽 마진 + 왼쪽 테두리 + 왼쪽 패딩 + 컨텐츠 넓이 + 오른쪽 패딩 + 오른쪽 테두리 + 오른쪽 마진"의 크기를 모두 더한 값이다.

세로 크기 : "위쪽 마진 + 위쪽 테두리 + 위쪽 패딩 + 컨텐츠 높이 + 아래쪽 패딩 + 아래쪽 테두리 + 아래쪽 마진"의 크기를 모두 더한 값이다.

 

박스모델의 속성

  • margin : border를 기준으로 박스의 여백을 지정, 시각적인 요소는 없음
  • border : 박스의 테두리
  • padding : 테두리와 content간의 간격
  • content : 엘리먼트 안에 포함되는 컨텐츠

 

content(컨텐츠)

  • 엘리먼트안에 포함되는 컨텐츠로 예를들어 <div>test</div>라고 태그를 기술했을 때 div앨리먼트의 content는 test임
  • content는 폭(width)과 높이(height)를 지정할 수 있다.

border(보더), 테두리

  • 엘리먼트의 테두리
  • 테두리는 margin과 padding의 경계가 된다.
  • 테두리의 굵기와 색상과 스타일을 지정할 수 있다.

padding(패딩)

  • 테두리와 컨텐츠 간의 여백

margin(마진)

  • 엘리먼트와 엘리먼트 간의 여백
  • 위 아래에 인접한 엘리먼트 간에는 margin의 값이 더 큰 쪽의 margin이 적용됨(좌우는 아님)

 

- M I N -


저작자표시

'학습정리 > by Min' 카테고리의 다른 글

안드로이드 nfc 사이트  (0) 2013.07.18
AOP(Aspect-oriented programming)  (0) 2013.07.12
nodejs  (0) 2013.07.11
css & selector & 상속  (0) 2013.06.26
폰트와 색으로 장식하기  (0) 2013.06.25
by 알 수 없는 사용자 2013. 6. 25. 20:31

폰트와 색으로 장식하기

학습정리/by Min

폰트와 색으로 장식하기

- 대부분의 컴퓨터에서는 특정한 폰트들만이 설치되며, 따라서 사용할 폰트를 선택하는데 있어서 신중해질 필요가 있다.

 

폰트 패밀리(font family)란?

일반적인 특성을 공유하는 폰트의 집합체를 담고 있으며, 산세리프(snas-serif), 세리프(serif). 모노스페이스(monospace), 흘림체(cursive) 그리고 판타지(tantasy)의 총 5개가 존재한다.

 

※ 폰트들은 컴퓨터에 따라서 다르게 보일 수 있다. 사실 사용 가능한 폰트들의 집합은 컴퓨터에 실치 된 폰트와 어플리케이션뿐만 아니라 운영체제에 따라 바뀔 수 있다. 따라서 컴퓨터에 있는 폰트들은 사용자들의 컴퓨터에서 사용 가능한 폰트들과 다를 수 있다는 점을 기억해야한다.

 

css는 font-family, font-weight, font-size, font-style 같은 속성들을 포함하여 폰트가 보이는 모습을 제어한다.

 

font-size 속성을 사용하여 폰트의 크기를 제어 할 수 있다.

px, em, %혹은 키워드로 명시 한다.

폰트 크기를 픽셀로 명시하는 것은 문자의 높이를 구성하는데 얼마나 많은 픽셀이 사용되는지 브라우저에가 말해주는 것이며,

키워드를 사용하는 것은 body 규칙에 있는 기본 폰트 크기로 설정하는 것이다. 따라서 사용자들이 텍스트를 좀더 크게 혹은 작게 만들기를 원한다면 모든 브라우저에서 폰트 크기를 조절이 가능하다.

예) body { font – size: 14px; }


body {

/* font-family: 폰트, 폰트, 폰투, 폰트패밀리;

1. Serif(명조체) : times,  궁서체, 바탕체

2. Sans-serif(고딕체) : Arial, 굴림체, 돋움체, 맑은고딕

3. Monospace : Courier, Monaco

4. Cursive(흘림체) : Comic Sans

5. Fantasy : impact

*/

  font-family:     Verdana, Geneva, Arial, sans-serif;

  

  /* font-size : 폰트의 높이

  1. px : 픽셀

  2. % : 기존의 크기를 기준으로 설정

  3. em : 배수, 기존의 크기를 기준으로 설정

  4. 상수 : xx-small ~ xx-large

  => body에서 폰트의 기본 크기 값을 설정한다. 가능하면 상수값으로 설정한다.

  => body의 기본 값을 기준으로 나머지 엘리먼트들은 % 또는 em으로 설정한다.

  */

  font-size:       small;

  color: blue;

  background-color: gray;

}

h1 {

  font-size:       170%; 

}

h2 {

  font-size:       1.3em;

}



#p1{

color: red;

border: 1px solid green;

}



/* italic : 폰트에서 제공하는 기움림체 사용

   oblique : 폰트에서 기움림채가 없더라도 소프트웨어적으로 처리. 폰트가 미려하지 않다. 계단현상 발생 

   */

blockquote {

font-family: Didot;

  font-style:      italic;

}

 

color 속성을 사용하여 텍스트에 색을 추가한다.

css는 검정색, 흰색, 빨강, 파랑, 녹색을 포함한 17가지의 미리 정의도니 색을 가지고 있다.

색의 비율이나 0에서 255까지의 숫자 값, 혹은 hex 코드를 사용하여 사용자가 원하는 색을 명시 할 수 있다.

예) body { font-weigth: bold; }



/* color (빛의 삼원색 사용 Red, Green, Blue) R B G

1. rgb(255,255,255)

2. rgb(20%, 30%, 100%)

3. #ffffff

4. #ffffffff (투명도 포함)

*/


h1, h2 {

  font-weight:     normal;

  color:           #ff0000;

  border-bottom:   thin dotted #888888;

  background-color: rgba(255,255,255,0.5); a는 투명도이다. 0~1사이로 소수점으로 지정할 수 있다.

  

}


 

 

 

 

 

 

text-decoration 속성을 사용하여 텍스트에 더 많은 스타일을 추가 한다

밑줄이나 윗줄, 가운데 줄과 일부 브라우저에서 동작하는 깜박거리는 텍스트 같은 텍스트에 장식적인 효과를 추가하는 역할을 한다.

예) body { text-decoration: underline; }

예) em { text-decoration: line-through; }

예) em { text-decoration: underline overline; }

원하지 않는 텍스트 데코레이션을 상속받았다면 속성값을 none으로 해서 장식을 하지 않을 수 있다.

예) em { text-decoration: none; }

 

- M I N -







저작자표시

'학습정리 > by Min' 카테고리의 다른 글

안드로이드 nfc 사이트  (0) 2013.07.18
AOP(Aspect-oriented programming)  (0) 2013.07.12
nodejs  (0) 2013.07.11
css & selector & 상속  (0) 2013.06.26
박스 모델  (0) 2013.06.25
by 알 수 없는 사용자 2013. 6. 25. 19:43

스프링 프레임워크 설정

학습


 <!--
 - 스프링 프레임워크의 ContextLoaderListener는
 기본적으로 Context Root에서 설정파일을 찾는다. 예) services.xml
 - 만약, 클래스 경로에서 찾게 하고 싶으면 설정 파일 경로 앞에 classpath: 을 붙여라.
   예) classpath:services.xml
  -->
 <context-param>
  <param-name>contextConfigLocation</param-name>
<!--   <param-value>/conf/services2.xml</param-value> -->

이 경우, 외부에서 접근이 가능해진다. 따라서 drop table을 할 수 있어서 (직접 db에 접근할 수 있어서) 위험하다
.
  <param-value>classpath:services.xml</param-value>
<!--   <param-value>/WEB-INF/services.xml</param-value> -->
따라서, 이런식으로 web-inf는 외부에서 접근 불가.
 </context-param>

=================================================================================================================   
WebApplicationContext appContext =
  WebApplicationContextUtils.getWebApplicationContext(
  this.getServletContext());


그 어플리케이션에서 다루는 beanContainer를 리턴해줌.

WebApplicationContext appContext의 super class는 contextListener임.


=================================================================================================================

dispatcher serlvet = front controler
요청이 들어왔을 때 해당되는 서블릿을 찾아서 연결시켜주는 역할


* spring framework의 장점

-> annotation은 servlet 3.0에서만 돌아가는 단점이 있음.
따라서, 톰캣 6.0에서는 아예 annotaion을 인지를 못해서  dispatcher위의 @WebServlet(urlPatterns="*.do")를 찾지 못함.

but spring framework에서는 그런 버전에 좀 더 자유로움.
단,  web.xml에 명시적으로 적어줘야 함.


=================================================================================================================

<servlet>
  <servlet-name>dispatcher</servlet-name>
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  <init-param>
      <param-name>contextConfigLocation</param-name>
   <param-value>classpath:services.xml</param-value>
  </init-param>
  <load-on-startup>1</load-on-startup>
 </servlet>

 


<init-param>
      <param-name>contextConfigLocation</param-name>
   <param-value>classpath:services.xml</param-value>
  </init-param>
=> dispatcher servlet 이 관리하는 부분.

=================================================================================================================
이제부터 우리는, 스프링 프레임 워크에서 제공하는 front controller를 이용해서 , page controller에 접근함.
따라서 action interface가 더이상 필요가 없음.

 

* spring MVC Controller 만들기
1. @Controller
2. @RequestMapping("url")
 -> value = 서블릿 url


* 요청을 다루는 method = handler method
 @RequestMapping("/hr/searchEmp")
 public String execute(int deptno, Model baguni) throws Exception {
  
  baguni.addAttribute("employeeList", employeeDao.getEmployeeList(deptno));
  
  return "/hr/employeeList.jsp";
 }
 
여기서, execute()메서드가 요청을 다루는 handler method


=====================================================================================================================
* 날짜 형식을 바꿔서 해야함.

 @InitBinder
 public void initBinder(WebDataBinder binder) {
  SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
  dateFormat.setLenient(false);
  binder.registerCustomEditor(Date.class, new CustomDateEditor(dateFormat, false));
 }


 

 

저작자표시

'학습' 카테고리의 다른 글

시간 설정 소스 yyyy-MM-dd  (0) 2013.07.05
by 알 수 없는 사용자 2013. 6. 25. 18:22

6.25

학습정리/by H2K

1. Spring Framework에서의 FileUpload
2. Command Pattern을 이용한 PageController 관리
3. Filter & Interceptor

4. Mybatis의 Injection Mapping 기능을 이용하여 Dao 구현클래스 삭제
5. HTML기초

 

 

1. Spring Framework에서의 FileUpload

Controller에 관한 객체는 DispatchServlet에서 관여하기 때문에 FileUpload에 대한 것은 dispatch-servlet.xml 설정파일에 등록하여야 한다.

 

A. dispatch-servlet.xml

(스프링 Docs참고)17 .10.2. Using a MultipartResolver  with Commons FileUpload

 

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="maxUploadSize" value="1000000" />

</bean>


* Spring framework 2.5 미만에서는 아래 설정을 따르면 된다.

<bean id="multipartResolver" class="org.springframework.web.multipart.support.StandardServletMultipartResolver">
</bean>

 

B. Controller 

* 파일 경로에 주의 한다

 

@Controller
@RequestMapping("/upload/upload")
public class FileUploadAction {


@Autowired
ServletContext ctx;

 

@RequestMapping
public String execute(@RequestParam("name") String name, @RequestParam(value = "age", defaultValue = "0") int age, @RequestParam("photo1") MultipartFile photo1, @RequestParam("photo2") MultipartFile photo2, Model model) throws Exception {

 

model.addAttribute("name", name);
model.addAttribute("age", age);

 

File photo1File = getNewFile();
photo1.transferTo(photo1File);

 

File photo2File = getNewFile();
photo2.transferTo(photo2File);

 

model.addAttribute("photo1", photo1File.getName());
model.addAttribute("photo2", photo2File.getName());

 

return "upload/upload";
}

 

private File getNewFile() {
String repositoryPath = ctx.getRealPath("/files");
String newFileName = "file_" + System.currentTimeMillis() + Math.random();
return new File(repositoryPath + "/" + newFileName);
}

 

}

 

C. JSP

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>업로드 결과</title>
</head>
<body>
이름: ${name}<br>

나이: ${age}<br>

사진1: ${photo1}<br>
<img src="../files/${photo1}"><br>

사진2: ${photo2}<br>
<img src="../files/${photo2}"><br>
</body>
</html>

 

 

 

2. Command Pattern을 이용한 PageController 관리

 

Command Pattern: 메서드의 호출을 캡슐화(클래스화) -> 메서드를 클래스화

 

왜 쓰나?
클래스 하나에 메서드가 계속 추가될 경우 문제점이 발생할 수 있기 때문에 거대화된 클래스의 메서드를 각각 분리
1. 클래스의 변경이 잦은 경우(유지보수 차원에서 메서드의 추가 변경이 잦다)
2. 이 클래스를 사용하는 다른 클래스가 영향을 받을 수 있고, 하나의 클래스에 많은 메서드가 있음으로 가독성이 떨어지게된다.
3. 메서드를 분리하여 각각 클래스화 함으로 문제를 해결

 

* 만약 한 클래스에 계속 메서드가 추가되는 상황이 발생하게 된다면 커맨드 패턴을 사용해서 클래스로 분리하라

 

여러 기능을 수행하는 메서드들을 가지고 있는 통합된 Action클래스인 EmployeeController.java

@Controller
@RequestMapping("/hr")
public class EmployeeController {

 

@Autowired
EmployeeDao employeeDao;

 

@InitBinder
public void initBinder(WebDataBinder binder) { }

 

@RequestMapping("/searchEmp")
public ModelAndView list(@RequestParam(defaultValue = "0") int deptno) throws Exception { }

 

@RequestMapping(value = "/addEmp", method = RequestMethod.GET)
public String addForm() throws Exception { }

 

@RequestMapping(value = "/addEmp", method = RequestMethod.POST)
public String add(Employee employee, BindingResult result) throws Exception { }

 

@RequestMapping("/retrieveEmp")
public String retrieve(@RequestParam("empno") int empno, ModelMap modelMap) throws Exception { }

 

@RequestMapping(value = "/updateEmp", method = RequestMethod.GET)
public String updateForm(@RequestParam("empno") int empno, Model model) throws Exception { }

 

@RequestMapping(value = "/updateEmp", method = RequestMethod.POST)
public String update(Employee employee, BindingResult result) throws Exception { }

 

@RequestMapping("/deleteEmp")
public String delete(@RequestParam("empno") int empno) throws Exception { }

}


각각 기능(메서드)을 갖는 클래스로 분리한다

@Controller
public class EmployeeAddAction {

@Autowired
EmployeeDao employeeDao;

@InitBinder
public void initBinder(WebDataBinder binder) { }
 
@RequestMapping(value="/hr/addEmp",method=RequestMethod.GET)
public String form() throws Exception { }

 

@RequestMapping(value="/hr/addEmp",method=RequestMethod.POST)
public String add(Employee employee, BindingResult result) throws Exception { }

 

}

 

@Controller
public class EmployeeDeleteAction {

 

@Autowired
EmployeeDao employeeDao;

 

@RequestMapping("/hr/deleteEmp")
public String execute(int empno) throws Exception { }
 
}

 

@Controller
public class EmployeeListAction {

 

@Autowired
EmployeeDao employeeDao;

 

@RequestMapping("/hr/searchEmp")
public ModelAndView execute(@RequestParam(defaultValue="0") int deptno) throws Exception { }
 
}

 

@Controller
public class EmployeeUpdateAction {

 

@Autowired
EmployeeDao employeeDao;

 

@InitBinder
 public void initBinder(WebDataBinder binder) { }
 
@RequestMapping(value="/hr/updateEmp", method=RequestMethod.GET)
public String form(int empno, Model model) throws Exception{ }
 
@RequestMapping(value="/hr/updateEmp", method=RequestMethod.POST)
public String execute(Employee employee, BindingResult result) throws Exception { }
 
}

 

@Controller
public class EmployeeDetailAction {

 

@Autowired
EmployeeDao employeeDao;

 

@RequestMapping("/hr/retrieveEmp")
public String execute(@RequestParam("empno") int empno, ModelMap modelMap) throws Exception { }

 

}

 

 


3. Filter & Interceptor(핸들러 인터셉터)

 

Filter:

인터페이스 javax.servlet.Filter를 구현한 클래스로 다음의 메서드를 갖는다

init(FilterConfig arg0)

doFilter(ServletRequest request, ServletResponse response, FilterChain next)

destroy( )

 

Interceptor:

추상클래스 org.springframework.web.servlet.handler.HandlerInterceptorAdapter를 상속받은 클래스로 다음의 메서드를 갖는다

preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)

postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView)

afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)

 

공통점: PageController의 실행 전,후로 꽂아넣을 수 있는 기능을 수행한다(ex.암호화, 복호화 등..)
차이점: Filter는 FrontController인 DispatchServlet 앞에, Interceptor는 뒤에 위치한다

 

* 인터셉터 내부 메서드의 실행순서
preHandler() -> Action실행 -> posthandler() -> JSP실행 -> afterCompletion()

 

* 언제 인터셉터를 사용하나?(인터셉터를 사용하는 예)

Request부터 Response까지의 시간을 측정할 때 사용한다.

어떤 부분이 실행중 일 때 지연시간이 큰지 알아낼 수 있다(인터셉터 내부 메서드 실행순서를 이용)

 

* 인터셉터를 사용하기 위해서는 dispatch-servlet.xml에 아래와 같이 설정을 등록하여야 한다.

<bean id="handlerMapping" class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotationHandlerMapping">

<property name="interceptors">

<list>
    <ref bean="testInterceptor"/>
</list>

</property>

</bean>
<bean id="testInterceptor" class="bit.java39.interceptors.TestInterceptor"/>
</beans>

 

 

 

4. Mybatis의 Injection Mapping 기능을 이용하여 Dao 구현클래스 제거

 

* Dao인터페이스와 Mapper.xml 설정파일만으로 실행 가능하다(Mybatis 3.0이상에서 정상 작동한다)

 

참고자료: http://mybatis.github.io/spring/mappers.html#scan

MapperScannerConfigurer

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="org.mybatis.spring.sample.mapper" />
</bean>

 

Dao의 설정에 관여하는 services.xml에 추가하여 사용한다.(Dao의 메서드와 Mapper의 ResultType에 주의)

 

services.xml에 설정추가

<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    <property name="basePackage" value="bit.java39.dao" />
</bean>

 

EmployeeDao.java 인터페이스
public interface EmployeeDao { 

List<Employee> getEmployeeList(int departmentNo) throws Exception;
int insert(Employee employee) throws Exception;
Employee getEmployee(int empNo) throws Exception;
int delete(int empNo) throws Exception;
int update(Employee employee) throws Exception;

}

 

EmployeeMapper.xml설정
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

 

<mapper namespace="bit.java39.dao.EmployeeDao">


<select id="getEmployeeList" resultType="Employee">
    select 
        e.empno as no, 
        e.ename as name, 
        e.job, 
        e.sal as salary, 
        d.dname as departmentName, 
        d.loc as departmentLocation, 
        m.ename as managerName
    from emp e 
        left join dept d on e.deptno=d.deptno
        left join emp m on e.mgr=m.empno
</select> 
 
<insert id="insert" parameterType="Employee">
    insert into emp (empno,ename,job,mgr,hiredate,sal,comm,deptno) 
        values (
        #{no}, #{name}, #{job}, #{managerNo}, 
        #{hireDate}, #{salary}, #{commission}, #{departmentNo})
</insert>
   
<select id="getEmployee" parameterType="int" resultType="Employee">
    select 
        empno no,
        ename name,
        job,
        mgr managerNo,
        hiredate,
        sal salary,
        comm commission,
        deptno departmentNo
from emp
where empno=#{value}
</select>
   
<delete id="delete" parameterType="int">
    delete emp where empno=#{value}
</delete>
   
<update id="update" parameterType="Employee">
    update emp set
        ename=#{name},
        job=#{job},
        mgr=#{managerNo},
        hiredate=#{hireDate},
        sal=#{salary},
        comm=#{commission},
        deptno=#{departmentNo}
        where empno=#{no}
</update>
</mapper>   

 

 


5. HTML

 

A. Semantic Web(구조화된 웹): 각각 태그에 의미를 부여한다(태그의 용도대로 사용하자)
B. DOM: HTML 엘리먼트를 객체화시켜 tree구조로 관리
C. block 태그: 라인을 점유하는 태그들(라인의 변경)
   inline 태그: 라인속에 참여하는 태그들(라인이 바뀌지 않는다)
D. Doctype

 

block 태그
-> <h*> 헤더태그
-> <p> 문단태그
-> <ol> 순서있는줄태그
-> <ul> 순서없는줄태그
-> <li> 라인아이템태그
-> <div> 분할태그
-> <address> 주소태그
-> <blockquote> 인용문태그

 

inline 태그
-> <a> 앵커태그
-> <i> 이탤릭체태그
-> <b> 볼드체태그
-> <em> 엠퍼사이즈태그
-> <span> 확장태그
-> <img> 이미지태그
-> <q> 인용문태그

* 각 태그에 대한 자세한 설명은 검색하면 잘 나오므로 알아서 찾아보자.....

 

 

 

 

 


 

저작자표시

'학습정리 > by H2K' 카테고리의 다른 글

node.js, CORDOVA, PhoneGap  (0) 2013.07.11
javaScript, jQuery 함수  (0) 2013.07.08
NegotiatingViewResolver  (0) 2013.07.07
by 알 수 없는 사용자 2013. 6. 25. 11:24

(수정중) GIT Server 구축 및 Log4J 설정

학습정리/by aking


금일 배운 학습 내용



  • GIT Server 구축
  • DB분리 작업
  • Log 설정



  • GIT Server 구축

Eclipse -> Help -> Eclipse Marketplace에서 Git 검색 후 EGit - Git Team Provider를 Install 시킨다.



http://www.springsource.org -> Code Samples -> Spring Framework Samples ->

 

Git Read-Only -> URI 가져오기




Eclipse -> Git Repositories -> Clone a Git repository





Next -> Next -> Finish



SVN Repositories에서 하는 것처럼 별다른 것 없이 URI에 Git Source 주소를 적어 등록시킨다.








등록이 되었으면 spring-petclinic -> Working Directory -> Import Projects






Import 시키면 Package Explorer에 등록된 것을 확인 할 수 있다.





  • DB분리 작업


Services.xml에 보관해둔 DB정보를 분리 작업을 한다.



Step1. data-access.properties


Import해둔 spring-petclinic -> src -> main -> resources -> spring ->

 

data-access.properties 파일을 작업 할 프로젝트 resources에 가져와서


DB정보를 data-access.properties 파일에다 저장해준다.


jdbc.driverClassName=oracle.jdbc.driver.OracleDriver

jdbc.url=jdbc:oracle:thin:@localhost:1521:xe

jdbc.username=scott

jdbc.password=tiger



Step2. Services.xml


  <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource" destroy-method="close">

  <property name="driverClassName" value="oracle.jdbc.driver.OracleDriver"/>

  <property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"/>

  <property name="username" value="scott"/>

  <property name="password" value="tiger"/>

  </bean>


위 DB정보를 EL(Expression Language)로 적어준다.


<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"

destroy-method="close">

<property name="driverClassName" value="${jdbc.driverClassName}" />

<property name="url" value="${jdbc.url}" />

<property name="username" value="${jdbc.username}" />

<property name="password" value="${jdbc.password}" />

</bean>



위 DB정보를 data-access.properties 파일로 생성해 저장한다.


context:property-placeholder location="classpath:data-access.properties" />


 


Spring framework 2.5 미만에서는 위 코드를 사용하지 못하고, 아래 코드를 사용하게 된다.


<bean

class="org.springframework.beans.factory.config.PropertyPlaceholderConfigurer">

<property name="locations" value="classpath:data-access.properties" />

</bean>






  • Log 설정


Pom.xml -> Dependencies 에서 log4j 검색 후 1.2.14 버전을 추가한다.



  •  log4j 설정
1. web.xml에 context-param과 Listener 설정을 안해줘도 classpath의 루트 경로에
log4j.properties 파일을 두면 자동으로 loggin이 활성화 된다.

2. 또는, WEB-INF/.../log4j.properties 파일을 둔 경우, 아래와 같이 web.xml 파일에
log4jConfigLocation 이라는 이름으로 파라메터 정보를 설정하고,
log4jConfigListener를 사용하여 로딩하는 방법도 있다.

  • log4j 설정파일 위치 설정 (2번방법)
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/log4j.properties</param-value>
</context-param>

  • web.xml에서 Listener 설정 (2번방법)
<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>

  • log4j.properties 생성 및 설정

WEB-INF 폴더안에 log4j.properties (File) 생성하고 작성한다.


# DEBUG < INFO < WARN < ERROR < FATAL

log4j.rootCategory=DEBUG, stdout, dailyfile


# setting stdout logger

log4j.appender.stdout=org.apache.log4j.ConsoleAppender

log4j.appender.stdout.layout=org.apache.log4j.PatternLayout

#log4j.appender.stdout.ImmediateFlush=true

#log4j.appender.stdout.Target=System.err

log4j.appender.stdout.layout.ConversionPattern=[%5p] [%t] (%F) - %m%n


# setting dailyfile logger

log4j.appender.dailyfile=org.apache.log4j.DailyRollingFileAppender

log4j.appender.dailyfile.layout=org.apache.log4j.PatternLayout

log4j.appender.dailyfile.layout.ConversionPattern=[%5p] [%t] (%F) - %m%n

log4j.appender.dailyfile.DatePattern='.'yyyy-MM-dd

log4j.appender.dailyfile.threshold=DEBUG


#시스템 properties에 집어넣을 경로 ${webapp.root} 설정

#1. context-param web.xml에 집어 넣기.

#-> context-param 정의

# <context-param>

# <param-name>webAppRootKey</param-name>

# <param-value>webapp.root</param-value>

# </context-param>


#2. log4jConfigListener 또는 WebAppRootListener에 추가하기.



log4j.appender.dailyfile.File=${webapp.root}/WEB-INF/log/web03.log


#log4j.logger.org.springframework=DEBUG

#log4j.logger.org.apache=DEBUG

#log4j.logger.org.mybatis=DEBUG


#log4j.logger.java.sql=DEBUG

#log4j.logger.java.sql.Connection=DEBUG

#log4j.logger.java.sql.Statement=DEBUG

#log4j.logger.java.sql.PreparedStatement=DEBUG

#log4j.logger.java.sql.ResultSet=DEBUG


log4j.logger.bit.java39.dao=TRACE




[%p]

 로그 기록 범위 

 [%t]

 스레드

 (%F)

 현 파일명

 %m

 메시지를 출력

 %n

 다음라인으로 이동





  • 시스템 properties에 집어넣을 경로 설정하기
    <!-- 다음 파라메터는 log4jConfigListener에 의해 시스템 프로퍼티로 등록된다.
    -> log4jConfigListener는 webapp.root 이름으로 웹 애플리케이션 루트 경로를 저장한다.
     -->

1. context-param web.xml에 집어넣기
- context-param 정의

<context-param>
    <param-name>webAppRootKey</param-name> <!-- 시스템 프로퍼티에 넣으려면 반드시 이 이름으로 설정해야 한다. -->
    <param-value>webapp.root</param-value>     <!-- 값은 마음대로. log4j.properties에서 사용할 이름이다. -->
</context-param>


2. log4jConfigListener 또는 WebAppRootListener 추가하기



  • Log4j 설정

기본 디폴트는 DEBUG이다.

  • logger 지정
    • 로그 기록의 범위 지정
      • DEBUG < INFO < WARN < ERROR < FATAL
        • 지정한 것보다 같거나 작은 것 모두 출력

예시) DEBUG로 지정하면 그 아래 모든 것이 출력된다.


  • 로그 출력 방법 (이름은 마음대로 설정해도 상관없다.)
예시) log4j.rootCategory=DEBUG, stdout, dailyfile
예시) 각 출력 방법을 지정
- log4j.appender.방법이름=방법지정

  • 출력할 대상 지정
    • log4j.logger


  • 선언 방법
private Logger logger = Logger.getLogger(Logger.class);

static 사용하지 말고 private로 사용한다.

  • 사용방법

logger.debug("오호라...debug...");

logger.info("오호라...info...");

logger.warn("오호라...warn...");

logger.fatal("오호라...fatal...");



  • File로 추출할때 방법 (log4j.properties)

log4j.appender.dailyfile.File=${webapp.root}/web03/WEB-INF/log/web03.log


- 시스템루트를 지정하지 않고 동적으로 받아와 해당 루트에 로그파일을 생성하기 위함.





  • 실제 경로 확인하는 방법

Properties props = System.getProperties();
for(Object key : props.keySet()){
System.out.println(key + " , " + props.getProperty((String)key));
}




- a.k.a. aking -


저작자표시

'학습정리 > by aking' 카테고리의 다른 글

사이트정리  (0) 2013.07.21
안드로이드 NFC  (0) 2013.07.19
Java Script  (0) 2013.07.09
HTML & CSS  (0) 2013.06.25
by 알 수 없는 사용자 2013. 6. 24. 22:18

팀원3

팀원소개


1. 이름?

Min

2. 생년월일?

1979. 10. 07 

3. 사는곳?

건대입구 근처 

4. 함께 살고있는 사람?

와이프와 아들 

5. 요즘 난 이것땜에 산다?

와이프와 아들 

6. 좋아하는 음식, 잘하는 요리?

밥 

7. 가보고 싶은 나라는?

뉴질랜드 

8. 10년안에 꼭 이루고 싶은것이 있다면?

와이프와 나눈 말 

9. 지금 내게 가장 소중한것은?

가족 

10. 태어나 처음으로 감동을 안겨준 노래가 있다면?

GOD - 어머님께 

11. 이순간 가장 큰 고민은?

현재의 내 모습에서 보는 미래 

12. 나에게 있는 것중 가장 버리고 싶은 것?

뱃살 

13. 나의 친화력?

상? 중? 

14. 그래도 내가 이건 최고지~라고 할수 있는 것은?

체력 

15. 비가오면 생각나는 것은?

음악, 와이프, 아들 

16. 꼭 한번 만나보고 싶은 사람?

아버지 

17. 다시 돌아가고 싶은 시절이 있다면?

초등학교 시절 

18. 항상 생각만하고 못하는것이 있다면? 

효도 

19. 어떤 스타일에 옷을 좋아하나요?

편한 스타일 

20. 한마디 

 신의 개발자가 되자!~!


저작자표시
by 알 수 없는 사용자 2013. 6. 24. 20:29
| 1 2 3 |

티스토리툴바