관리 메뉴

새로운 시작, GuyV's lIfe sTyle.

닷넷 게시판 만들기 Part 17 - 웹폼에 대하여 좀 더 상세하게 본문

ⓟrogramming/asp.net 게시판

닷넷 게시판 만들기 Part 17 - 웹폼에 대하여 좀 더 상세하게

가이브 2011. 2. 11. 17:35
2011/01/19 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 10
2011/01/20 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 11
2011/01/21 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 12
2011/01/25 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 13
2011/01/26 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 14
2011/01/31 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 15
2011/02/10 - [ⓟrogramming/asp.net 게시판] - 닷넷 게시판 만들기 Part 16


1. 닷넷 개발환경 준비, 테스트
2. 닷넷 알아보기 [7/7]
3. asp.net 컨트롤 [8/..]


이전 시간에 이어 웹폼에 대해 계속 알아보자.

<ASP:Calendar>웹 폼 컨트롤을 실행해보셨을 것이다.

이렇듯, 신기하게도(?) 간단한 코드만으로 이 정도의 기능을 기본적으로 구현할 수 있다. 또한 Calendar 컨트롤 클래스는 여러 메서드와 속성을 가지고 있고, 이런 기본 값들을 수정하여 자기가 원하는 디자인으로 만들거나, 일정을 관리하는 기능이 필요하다면 해당 날짜에 버튼을 만들어 넣을 수도 있다. 일반 달력처럼 토요일의 날짜 색은 파란색, 일요일의 날짜색은 빨간색으로 지정한다거나, "월화수목금토일"의 요일명 항목의 글꼴을 바꿀 수 있는 등등, 달력을 만들기 위해 테이블 태그로 디자인을 직접 하지 않아도 된다.

이 외에도(강의에서는 다루지 않겠지만-웹폼은 사용하는 법만 알면 된다-) 여러모로 손이 가는 일을 많이 덜어줄 만한 웹폼 컨트롤이 존재한다.

Calendar 컨트롤로 시작했으니 예제를 이 녀석으로 잡기로 하고 이번 시간에는 웹폼을 사용하는 방법을 알아보기로 하자.

웹폼은 Class 라고 했다.
그래서 웹폼은 꼭 <ASP:웹폼이름 runat="server">형식으로 aspx 파일의 디자인에 붙여넣지 않아도 컨트롤을 프로그래밍 코드로 클래스(Class)를 인스턴스(Instance)로 만들어 페이지에 추가시키기만 하면 된다. 그리고 속성을 조작하여 기본 디자인을 바꿀 수 있으며, 각종 클릭(예를 들어 날짜선택)을 했을 때 그것을 처리할 수 있는 이벤트를 만들어 해당 기능을 구현할 수도 있다.

그렇다면,

<!-- 디자인 -->
<ASP:Calendar .. runat="server" />


이렇게 디자인으로 넣는 방법과,

// C# 코드
Calendar cal = new Calendar();
frm.Controls.Add(cal);


<!-- 디자인 -->
<form runat="server" id="frm">
</form>



#참고: 디자인이라는 말은 말 그대로 HTML에서 보여주기 위한 영역인 <body>...</body>라고 태그 내에 하드(Hard, 손수/직접)코딩 된 자료 라고 생각하자)

이렇게 프로그래밍 코드로 만들어 넣는 방법을 비교했을 때, 결과는 똑같으나 프로그래밍 코드로 넣는 이점은 무엇일까?

<ASP:Calendar ..>처럼 디자인 단에 넣는다고 하더라도, 해당 웹폼에 id 값을 할당해주고, 접근하여 각종 속성값을 변경할 수 있긴 하다. 간단하게 말하면 프로그래밍 코드로 넣는 이유는 동적으로 컨트롤을 만들거나 제어하기 위해서이다.

아직 별로 와닿지 않는 말이긴 하겠으나 이렇게 알아놓기로 하고,
이전 시간 예제처럼, 디자인에 <ASP:Calendar>하나를 추가해놓은 소스를 재사용하기로 하자.

calendar.aspx


<%@ Page Language="C#" runat="server" %>
<script language="C#" runat="server">

void Page_Load()
{
}

</script>


<html>
<head>
<title>웹폼 - Calendar 컨트롤</title>
</head>

<body>


<form runat="server">
<ASP:Calendar id="cal1" runat="server" />
</form>


</body>
</html>


디자인 단에 Calendar 웹폼을 넣어주었고, id="cal1" 속성을 주어 cal1 이라는 이름으로 ID를 지정해주었다. Calendar를 포함한 모든 웹폼에서는 기본적으로 이렇게 코딩하여 디자인 단에 배치를 하게 된다. id 속성이 필수는 아니지만 지정하지 않을시에는 id가 없어서 해당 컨트롤에 접근하기게 힘들기 때문에 일반적으로 지정하여 해당 컨트롤을 조작할 수 있게 한다.

자~ 이제, 여러분들은 웹폼 클래스만 알고 있다면 디자인 단에 웹폼을 넣을 수 있게 되었다.

<ASP:웹폼클래스명 id="접근_아이디" runat="server" /> 

Quiz. 웹폼클래스명은 어디서 찾을 수 있다고 했던가? 그렇다. MSDN 이다.
(http://msdn.microsoft.com/ko-kr/library/system.web.ui.webcontrols(v=VS.80).aspx)


예전 Part 15 에서 입력받는 폼 형식을 나열해보았다. 이것을 이제 웹폼의 클래스명과 매치시켜보자.

<input type="..."> 의 형식의 입력폼

text : 자유롭게 입력하는 한 줄 입력
  ▶ <ASP:TextBox>
password : 비밀번호 입력 용도의(입력이 가려지는) 한줄 입력
  ▶ <ASP:TextBox TextMode="Password" >
hidden
: 화면에 보여지지 않고 값을 저장하는 값
  ▶ <ASP:HiddenField>
file
: [찾아보기]와 같은 버튼을 눌러 컴퓨터에 있는 파일을 선택하여 전송할 수 있는 용도
  ▶ <ASP:FileUpload>
radio
: 여러개 중 하나만 고를 수 있는 동그란 체크 입력
  ▶ <ASP:RadioButtonList> .. </ASP:RadioButtonList>
checkbox
: 여러개 중 하나 이상 여러개 고를 수 있는 네모 체크 입력
  ▶ <ASP:CheckBoxList> .. </ASP:checkBoxList>
submit
: <form>의 내용을 페이지로 전송하는 버튼
  ▶ <ASP:CheckBoxList> .. </ASP:checkBoxList>
image
: <form>의 내용을 페이지로 전송하는 이미지 버튼
  ▶ <ASP:ImageButton>
reset
: <form>의 변경된 내용을 모두 초기화 하는 버튼
  ▶ 없음. <ASP:Button>을 이용하여 구현가능

<input> 태그가 아닌 다른 폼
textarea
: 엔터로 여러 줄의 내용을 넣을 수 있는 여러줄 입력.
  ▶ <ASP:TextBox TextMode="Multiline" >
select
: 여러개 중 하나를 선택할 수 있는 형식의 입력
  ▶ <ASP:DropDownList> .. </ASP:DropDownList>
button
: 누를 수 있는 버튼
  ▶ <ASP:Button>


잘 보면, 단독으로 사용할 수 있는 컨트롤이 있고 RadioButtonList, CheckBoxList, DropDownList 와 같이 끝에 List라고 붙은 컨트롤은 여러항목이기 때문에 해당 컨트롤에는 무언가가 포함되는 것을 암시한다. 이들의 태그를 생각해보자. 하나 같이 2개 이상의 항목이 존재하지 않았던가?

또한 밑줄(TextMode)로 된 것처럼, 동일한 TextBox 컨트롤이지만 속성을 주어서 여러 줄을 입력받는 <textarea>폼(form)태그가 될 수 있고, <input type="password">형식의 태그가 될 수 있음을 알 수 있다.

asp.net 의 서버컨트롤인 웹폼은 결과물이 태그이기 때문에, 해당 태그에 대응되는 속성(프로퍼티)를 각각 보유하고 있다. 또한 이들은 WebControls 이라는 클래스를 공통적으로 사용하기 때문에 중복되는 메서드와 프로퍼티도 있다.
그러므로,

외울 필요 없이 하나하나 필요한 컨트롤은 MSDN에서 해당 이벤트, 메서드, 속성을 찾아가며 사용

하면 된다. 당연히 찾기 귀찮으시면 외우면 되겠다. ^^
(빈번하게 사용하기에, 자동으로 외워질 것이다)

이정도면 여러분들이 웹폼이 어떤 것인지 감을 잡았으리라 생각한다.

다시 Calendar 컨트롤로 넘어와보자.
기본 Calendar에 속성 값을 조작하여 좀 더 그럴싸하게 만들어보자.


너무 좁아서 복잡해 보인다. 먼저 디자인을 좀 바꾸어보자.
일반적으로 '웹폼 컨트롤의 디자인을 변경'한다고 하면, 컨트롤 클래스의 속성 값을 조작한다고 생각하자.

1. 달력의 길이와 높이를 적당하게 조절해보자.
2. 달력에 구분선을 주어 일반 달력처럼 보이게하자.
3. 날짜의 첫 줄인 "일 월 화 수 목 금 토" 항목에 배경색을 넣어주자.


우리는 하는 방법을 알기만 하면 되므로, 이 정도만 수행해보자.

앞에서 말했지만 웹폼은 클래스이며, 클래스의 모든 것은 MSDN에 나와있다.
웹폼은 System.Web.UI.WebControls 라는 네임스페이스에 클래스로 포함되어 있다고 했고, Calendar 가 클래스 이름이므로 System.Web.UI.WebControls.Calendar 클래스의 멤버를 찾으면 된다. 여기를 클릭해서 페이지를 열어보자.

1. 달력의 길이와 높이를 적당하게 조절해보자.
2. 달력에 구분선을 주어 일반 달력처럼 보이게하자.
3. 날짜의 첫 줄인 "일 월 화 수 목 금 토" 항목에 배경색을 넣어주자.

1번을 해결하기 위해 MSDN 문서를 찬찬히 찾아보자.

.

.

.

.

.

.

( 귀찮으시겠지만 직접 꼭 찾아보시기 바란다. 10억원 분량의 닷넷 서적이라도 MSDN 만 못하다 )

길이(너비)는 대부분 컴퓨터에서 용어로 Width 를 사용한다. 그리고 높이는 Height 를 사용하는 것이 일반적이다. 해당 속성을 찾으셨는가? Width 는 속성의 맨 하단에 있다. (ABC 순..)


설명을 보니 우리가 원하는 속성이 맞는 듯 하다. (WebControl 에서 상속됨) 이 붙은 것은 이 속성은 어지간한 웹폼에는 공통적으로 존재하는 것이라는 말이다.

대충, Width는 너비이므로 크기를 지정하기 위해 정수형(int)으로 되었을 가능성을 유추할 수 있다. 일전에도 말했듯이 C# 프로그래밍 언어는 사람이 만들었고 가져다 쓰는 것도 프로그래머인 사람이 사용하기 때문에(고급 언어 라고 한다) 조금만 생각해보면 클릭하지 않고도 사용해볼 수 있을 것이다. 그러나! 우리는 클릭하자. ^^


구문 항목을 보자. 

우리 초보가 유심히 볼 것은, 속성 이름인 Width 앞에 붙은 녀석이다. 속성 앞에 붙은 것이 해당 속성의 자료형이기 때문이다. 닷넷에서는 자료형을 꼭 맞추어 줘야 하지 않는가?

예상과 다르게 int 형 따위가 아니라 Unit 형이다. 모르는 것이라고 당황하지 말자. 아래에 있는 속성 값 설명에서, Unit 링크가 걸려 있기 때문에, 클릭해서 Unit 이 어떤 자료형인지 알아보자.

"Unit 구조체"라는 제목이 붙은 문서가 열릴 것이다.네임스페이스를 보아하니, System.Web 네임스페이스 하위에 있는 것을 보니 asp.net 에서 사용하는 녀석이라고 생각할 수 있다. 어려운 것이나 모르는 것은 일단 접어두고, 초보에게 유용한 설명을 읽어보자.


Unit 은 HTML에 관련한 크기에서 대부분 사용한다고 했다. Width뿐만 아니라, 처음보는 속성인 BorderWidth, 그리고 우리가 바꾸어야 할 Height 등의 속성 형식에 사용된다는 것을 알 수 있다. 그리고 노란색 박스로 "-32768 ~ 32767"의 값만 나타낼 수 있다고 한다. 
결론은, int 형처럼 숫자를 넣으면 될 것 같다. 그리고 하단에 예제도 한번 슥~하니 읽고 넘어가자.

그렇다면 Calendar 클래스의 Height 속성은 볼 것도 없을 것 같다. ^^

이제, 적용하기 위해 ID가 cal1 으로 지정된 Calendar 컨트롤의 Width, Height 를 각각 500, 500 으로 변경하여 정사각형의 달력으로 만들자.

#참고
속성은 코드로 변경해도 되고, <ASP:Calendar>인 디자인 단에서 지정해줘도 모두 잘 작동한다. 일반적으로 디자인에 관련된 것들은 디자인 단에서 상수로 지정하는데, 우리는 클래스에 속성을 부여하는 것에 의미를 두기 때문에 프로그래밍 코드를 이용해서 지정하자.

당연히, 코드는 Page_Load() 에 작성해야 한다. Page_Load()는 aspx 실행시 자동 실행되는 메서드이다.

calendar.aspx 프로그램 코드 부분

<%@ Page Language="C#" runat="server" %>

<script language="C#" runat="server">

 void Page_Load()
 {
        cal1.Width = 500;
        cal1.Height = 500;

 }

</script>




당연히, 코드는 Page_Load() 에 작성해야 한다. 페이지가 로드될 때 바로 변경된다고 해석할 수 있다.


1. 달력의 길이와 높이를 적당하게 조절해보자.
2. 달력에 구분선을 주어 일반 달력처럼 보이게하자.
3. 날짜의 첫 줄인 "일 월 화 수 목 금 토" 항목에 배경색을 넣어주자.

2번 미션은 구분선 긋기. 마찬가지로 Calendar 클래스의 속성을 찾아보자.
ShowGridLines 라는 속성인데, 역시 클릭해서 이 녀석이 어떤 자료형으로 원하는지 살펴보자.

public bool ShowGridLines { get; set; }

True, False 2가지 값을 가지는 bool 형식이다.

그 밑에 있는 속성 값을 읽어보는 것도 빼먹지 말자.

Calendar 컨트롤의 날짜가 모눈선으로 구분되면 true이고, 그렇지 않으면 false입니다. 기본값은 false입니다.

기본값이 false 이기 때문에 선이 안보였던 것이다. true로 설정하자.


calendar.aspx 프로그램 코드 부분

<%@ Page Language="C#" runat="server" %>

<script language="C#" runat="server">

void Page_Load()
{
     cal1.Width = 500;
     cal1.Height = 500;

    cal1.ShowGridLines = true;
}

</script>




1. 달력의 길이와 높이를 적당하게 조절해보자.
2. 달력에 구분선을 주어 일반 달력처럼 보이게하자.
3. 날짜의 첫 줄인 "일 월 화 수 목 금 토" 항목에 배경색을 넣어주자.

마지막 미션은 날짜부분에 배경색을 넣는 것이다.

마찬가지로, MSDN 에 답이 있을 것이다.
필자는 DayHeaderStyle 속성 을 찾았다. 설명을 보아하니 우리가 하려고 하는 그것이 맞을
하다. 클릭해보자.

public
TableItemStyle DayHeaderStyle { get; }

이 속성은 TableItemStyle 이라는 우리가 알지 못하는 형식이다. 
설명을 읽어보자. 


복잡해 보이지만, 여튼 "요일을 표시하는 구역에 대한 스타일을 지정"한다고 하니 번지는 잘 찾아온 것 같다. 이 속성에 대해 자세한 것은 TableItemStyle을 참조하라고 나와있다.

위의 속성 값에 TableItemStyle 링크가 자동으로 걸려 있으므로, 설명대로 TableItemStyle에서 자세한 내용을 살펴보자.



개요를 읽어보니, TableRow,TableCell로 렌더링(결과로 변환)하는 컨트롤이라고 나와있다.
그 전에, 여러분들은 혹시 Calendar 컨트롤에서 달력이 <table>로 만들어진 느낌을 받지 못했던가? 여튼, TableItemStyle 속성은 테이블에 관련된 속성인 것을 알 수 있는데, 구문을 보니 이 속성은 클래스이다. 즉, 클래스 TableItemStyle 인 것이다.

이 말은, TableItemStyle.[속성명] 으로 또 지정을 해야된다는 것이다.
자, 우리가 찾아들어온 정보를 정리해보자.

DayHeaderStyle 속성은 TableItemStyle 클래스 형식이다.


그렇다면, TableItemStyle 클래스에는, 분명 배경색을 지정하는 속성이 있을 것이다.
지금 열린 MSDN의 좌측 메뉴에 보면, 클래스이기 때문에 분명 "멤버"가 존재할 것이다. 멤버를 클릭해보자. TableItemStyle 클래스의 배경색 지정 속성을 우리는 찾아야한다.

Public 속성 리스트에서 첫 줄에 나오는 것을 확인할 수 있는가?
BackColor 라는 속성이다. 우리는 이것을 또 클릭하여 TableItemStyle.BackColor 속성이 어떤 자료형인지 알아내야 한다.

public Color BackColor { get; set; }

Color 라는 형식이다. 하단에 있는 설명을 읽어보니, System.Drawing.Color 라는 클래스이다.

많이 복잡하지만, 또 정리해보자.

DayHeaderStyle 속성은 TableItemStyle 클래스 형식이다.
TableItemStyle 클래스에서, 배경색 속성은 BackColor 이다.
TableItemStyle.BackColor 속성은 Color 클래스 형식이다.


이제는 속성 값 항목 설명에서 System.Drawing.Color 를 클릭해서 Color 멤버를 또 살펴보아야 한다. 이름만 봐도 그리기에 관련된 색상에 관련된 클래스임을 알 수 있다. 우리가 바꿀 항목이 색상이기 때문에 잘 찾아온 것 같지 않은가?

System.Drawing.Color 는 기본적으로 static 형식이다. 그러므로, Color를 인스턴스 화 할 필요없이 그대로 사용할 수 있다.
System.Drawing.Color 의 멤버를 보면 속성이 나열되어 있는데, 매우 많은 것을 알 수 있다. 속성명을 보면 Red, Aqua, Black, Blue 등등 눈에 익은 색상명이 그대로 보인다. 

Color 클래스에는 일반적으로 자주 쓰이는 메서드가 있는데

Color.FromArgb();
Color.FromName();

두개 정도이다. 클릭해서 사용법을 익혀보는 것도 좋겠다.

이제, 우리의 주 목적인 달력의 "월 화 수 목 금 토 일" 타이틀의 배경 색상을 변경하자.
색은 노란색으로 변경하기로 하자. 그러기 위해서 사용해야할 문법은 다음처럼 된다.

Calendar.DayHeaderStyle.BackColor = System.Drawing.Color.Yellow;

이것을 우리의 cal1 달력에 적용하기 위해서는,

cal1.DayHeaderStyle.BackColor = System.Drawing.Color.Yellow;

달력의 인스턴스명을 적으면 끝.





그리고 System.Drawing 은 네임스페이이다. 참조에 포함시키기 위해서는

<%@ Import Namespace = "네임스페이스명" %>

형식으로 aspx 파일의 상단에 위치시키도록 하자.

calendar.aspx 프로그램 코드 부분

<%@ Page Language="C#" runat="server" %>

<script language="C#" runat="server">

void Page_Load()
{
    cal1.Width = 500;
    cal1.Height = 500;

   cal1.ShowGridLines = true;

   cal1.DayHeaderStyle.BackColor = System.Drawing.Color.Yellow;

}

</script>


코드는 위와 같이 처리할 수 있다.
이제 바뀐 달력 모양의 실행 결과를 확인하자.



잘 적용된 것을 볼 수 있다.

이렇게 프로그래밍 코드로 설정한 값을 디자인 단인 <ASP:Calendar ..> 에 속성값으로 주어 적용해보자.

먼저, 프로그래밍 코드는 주석처리 하거나 삭제해서 적용을 해제해준다.
그리고 우리가 살펴봤던 값 그대로 넣어준다.

<ASP:Calendar id="cal1" runat="server"
Width="500"
Height="500"
ShowGridLines="true"
DayHeaderStyle.BackColor="yellow"
/>



실행해보자.

오류가 발생할 것이다. 앞에서 찾아본 것중에 가장 복잡했던 색상지정 속성 때문인데, 웹폼에서 속성을 지정할 때는 DayHeaderStyle.BackColor="..." 와 같이 속성에 [클래스.속성]의 형식으로 들어갈 수가 없다. 이것은 문법상 맞지 않는다.


다른 웹폼 컨트롤이 마찬가지지만, 이렇게 Calendar 컨트롤처럼 특정 항목을 따로 꾸며주는 항목은 디자인 단에는 분리가 된다. DayHeaderStyle 의 이름의 끝에 "Style"이 붙은 것을 알 수 있다. 비슷한 형식으로 "Template(템플릿)" 이라는 것이 존재한다. 이러한 형식은 다음처럼 하위에 선언해주어 분리해줘야 한다.

<ASP:Calendar id="cal1" runat="server"
Width="500"
Height="500"
ShowGridLines="true"
>

<DayHeaderStyle BackColor="yellow"></DayHeaderStyle>


</ASP:Calendar>



추가된 코드처럼 해당 Style 클래스의 이름을 그대로 적어주고 속성값을 부여해준다.
이 디자인 코드는, 우리가 앞에서 프로그래밍 코드로 만든 세 가지 항목의 디자인을 적용한 것과 동일하다. 

정리해보자.

1. 웹폼 컨트롤은 <ASP:웹폼클래스명 runat="server" /> 형식으로 디자인 단에  만들 수 있다.
2. 웹폼 컨트롤은 클래스이기 때문에, 프로그래밍 코드로 인스턴스 화를 한 후 컨트롤을 추가시킬 수도 있다. (동적으로 만들 수 있다)
3. 디자인 단이든 코드 단이든 웹폼의 기능을 동일하게 속성 값으로 지정할 수 있다.

일반적으로, 특별한 목적이 아닌 이상 1번 항목처럼 디자인 단에 웹폼을 배치하여 웹사이트를 만든다는 것을 참고하자. 그러나, 같이 해본 것 처럼 3번이 가능하다는 것도 잊지말자.


이번 시간에는 정신없이 asp.net 에서 중요한 것을 짚고 넘어간 것 같다.

전체적으로 강의에서 여러번 MSDN 에서 자료를 함께 찾아봤었는데 이번에는 달력 요일의 배경색을 바꾸는데만 해도 복잡하게 찾아들어간다.

이것은 객체지향형 언어의 특징이다. 만들어진 클래스를 가능하다면 재사용하는 것이 목적이다.
우리가 살펴보았지만 System.Drawing.Color 와 같은 범용적인 클래스는 웹폼의 색상 뿐만 아니라, asp.net 에 있는 컨트롤 등의 색상을 표현하는 것 이상, 닷넷 전반적으로 색상을 표현하는 대부분의 기능에 모두 적용되어 있다. 


사실, 오늘 우리가 다뤄본 Calendar 컨트롤은, MSDN 에서나 아니면 asp.net 관련된 서적, 인터넷 문서 등에서 예제로 쉽게 원하는 것으로 꾸며볼 수 있다. 

강의에서 일부러 MSDN에서 찾고 적용해본 이유는 다들 아시리라 생각한다.

오늘 다뤄본 MSDN에서 찾는 방식은, 웹폼 컨트롤인 Calendar 뿐만 아니라, 우리가 이번 강의에서 속성명(또는 이벤트명)을 직접 찾아서 값을 주는 방법은 asp.net 의 모든 웹폼 컨트롤에서 적용된다. 그저 형식이 유별나거나 간단할 뿐이다.

여러분들은 이제 TextBox, Button 뿐만 아니라 다른 웹폼 컨트롤을

<ASP:웹폼클래스명 id=".." runat="server" />

이렇게 기본 형식을 디자인 단에 배치시키고, MSDN 또는 책에 나와 있는 여러가지 속성을 방금 했던 것처럼 직접 적용시켜보기를 바란다. 그리고 수행 결과를 "소스보기"하여 태그가 어떻게 렌더링(결과로 변경)되었는지도 유심히 보길 바란다. 



다음시간에 계속..

반응형
Comments