1. 테이블 생성
CREATE TABLE `TranTest` (
`num` int(11) NOT NULL auto_increment,
`col01` varchar(32) default NULL,
PRIMARY KEY (`num`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

CREATE TABLE `TranTest2` (
`num` int(11) NOT NULL auto_increment,
`col01` varchar(32) default NULL,
PRIMARY KEY (`num`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. 입력 용 프로시저 생성
CREATE PROCEDURE `Prc_TranTest_Input`
(
in in_col01 varchar(32)
)
BEGIN
INSERT INTO TranTest SET col01 = in_col01;
END;

3. SELECT 용 프로시저 생성
CREATE PROCEDURE `Prc_TranTest_Select`
(
in in_col01 varchar(32)
)
BEGIN
SELECT num, col01 FROM TranTest WHERE col01 like concat(in_col01, ‘%’) ;
END;

4. Transaction 용 프로시저 생성
CREATE PROCEDURE `Prc_TranTest_InError`
(
)
NOT DETERMINISTIC
SQL SECURITY DEFINER
COMMENT ”
BEGIN
DECLARE dbErr int default 0;
DECLARE CONTINUE HANDLER FOR SQLEXCEPTION SET dbErr = -1;
START TRANSACTION;
INSERT INTO TranTest SET col01 = ‘1234′;
INSERT INTO TranTest2 SET col012 = ‘1234′; //일부러 에러값을 내기위해 칼럼명을 다르게 적습니다.
IF dbErr < 0 THEN
ROLLBACK;
ELSE
COMMIT;
END IF;
END;

5. PHP 를 이용하여 SELECT 및 입력하기
$mysqli = new mysqli(”localhost”, “USERID”, “USERPW”, “USERDB”);
if (mysqli_connect_error()) {
printf(”Connect Failed : %s\n”, mysqli_connect_error());
exit;
}
$mysqli->query(”set names utf8″);

//SELECT
if($qry = $mysqli->query(”Call Prc_TranTest_Select(’123′)”)) {
$rs = $qry->fetch_object();
echo $rs->col01;
}

//INSERT TranTest;
$mysqli->query(”Call Prc_TranTest_InError()”);

P3P의 압축정책 Spec

개인 정보 태그	압축 토큰
<contact-and-other/>	CAO
<pseudo-analysis/>	PSA
<contact required="opt-in"/>	CONi
<other-recipient/>	OTR
<ours/>	OUR
<demographic/>	DEM
<online/>	ONL

범주	압축 토큰	설명
<physical/>	PHY	연락처 또는 위치 정보
<online/>	ONL	인터넷 상의 연락처 또는 위치 정보(예: 전자 메일 주소)
<government/>	GOV	정부에서 발급한 ID(예: 사회 보장 번호)
<financial/>	FIN	개별 재무 정보

용도	압축 토큰	설명
<customization/>	CUS	사용자에 의해 명시적으로 요청된 사이트 수정
<individual-analysis/>	IVA	개별 사용자와 관련될 수 있는 분석
<individual-decision/>	IVD	사용자 기록에 기초한 동작 수행
<contact/>	CON	개별 사용자에게 연락하는 데 사용할 수 있는 정보
<telemarketing/>	TEL	전화 판촉에 사용할 수 있는 정보
<other-purposes/>	OTP	다른 P3P 용도 이외의 기타 용도

수신인	압축 토큰	설명
<same/>	SAM	일관된 관례에 따라 고유한 목적에 데이터를 사용하는 정식 항목
<delivery/>	DEL	주어진 용도 이외에 목적에 데이터를 사용할 수 있는 배달 서비스를 수행하는 정식 항목
<other-recipient/>	OTR	공급자에게 책임이 있지만 알려지지 않은 방법으로 데이터를 사용할 수 있는 항목
<unrelated/>	UNR	공급자에게 알려지지 않은 방법으로 데이터를 사용하는 항목
<public/>	PUB	공개 포럼

여기에 안나온것들은

http://www.w3.org/TR/P3P/ 이곳에서 살펴봐라.

또 영어라고 울렁증 걸릴텐데 -_- 제가 찾아보니..

4.2 Compact Policy Vocabulary

여기부분을 봐라 ㅡㅡ 쫌 !!

쫌 알고 쓰자 -_-;;;

그리고 이건 덤으로 ...

The Situation

The other day I came across a weird security problem at work: While a system to customize a site's appearance worked fine in Firefox, storing the state kept failing in IE. Now, I'm not a big fan of these browser discussions and don't mind using either, but that error made me curious. I quickly found out that it was down to the company's security standard, which defaulted IE's privacy level to high-medium. This level doesn't allow third-party cookies for permanent storage, and as the whole site was running in a Frameset for a couple of days (thank you, domain-hogging cheapie-host), the cookies used were rightly considered third party.

They are allowed to be stored under this setting, though, when they come with a P3P (Platform for Privacy Preferences) policy. Microsoft offers a nice overview to what this is, but leaves you pretty much in the dark of how you actually get from A (Problem) to B (Solution). P3Ptoolbox.org, a website dedicated to P3P offers an all-embracing guide, but the sheer amount is more off-putting than encouraging.

What Is P3P?

P3P is a protocol designed to offer an "automated way for users to gain more control over the use of personal information on Web sites they visit", states the W3C. Policies are something that is used quite frequently, in the Flash and Java (J2EE) World, usually describing a set of permissions granted or revoked. P3P is an XML based policy that describes the scope or the way how the data in cookies is used. It consists of four logical parts:

• a written, and as they like to state "human readable" policy, as html-file is recommended as the easiest starting point for it all. But, hooray, if you rather track down cookie operations in your code, the policy editor will generate one for you, which you can then amend to your needs.
• The policy editor helps you create the full XML privacy policy
• The Policy-Reference File, again as XML, which is stored in a "well-known location", links to the privacy policy.
• The compact policy(a string of 3-letter-abbrevations), which is sent in the header of the page containing the cookie-related action.

How can I build it?

If you look into tools for generating P3P policies, you'll find yourself in a land of darkness and badly designed websites with dollar signs. But there's light at the end of the tunnel: The IBM P3P Editor is free, being an executable jar it's crossplatform, and if you know what you're doing, it's really easy. So what do you have to do?

1. Do your homework: the first step is, and the P3Ptools site isn't wrong with it, a thorough preparation. Does the company running the website already have a privacy policy? Does it cover all cookie-related actions as well? If not, "Where do you store and read out cookies?", and "What's stored in them?" are the first key questions to ask. Ideally you know it beforehand, if not, an extended search over the usual cookie-dealing functions should refresh your memory.
2. What to do with the data? Who will be dealing with it? Once you have figured out what it is you'll need to ask yourself or, even better, your client, if they are planning to use the requested data, e.g. for stats on returning users or to find out about preferred customizations and the like. This should be (again ideally) honest, or alternatively passed by a legal department that does the juggling of the words.
3. Fire it up. The IBM P3P policy editor luckily generates XML and P3P strings as well as a good skeleton for the written privacy policy. All you have to do is
   • To categorise your cookies into groups and usage.
   • Connect them to their purpose
   • Add information about dispute and contact possibilities
   • Generate policy
   • Deploy: A great word which took me a while to understand, back at university. In this case, all it means is to take the generated xml and html and drop it in a folder.

An example

Let's say we set and read a cookie on the homepage that stores a unique ID for tracking reasons and retrieves preferences from the db on how the site is displayed (font size and regular/high-contrast layout, for example).

Open up the P3P editor, choose "create a blank policy", and you'll find a well categorized list of elements on the left, and an empty tree on the right.

Locate and drag the data elements matching your purpose from the list into the "new group" on the right. In our case that's:

Broad Categories --> unique identifier and
Dynamic Data --> http cookie

You can edit the group name, and you'll probably want to do it in real life situations that are more complex - in order to find grouped entries easier later on.

When you do so, you are also asked to put down an explanation to why the data is requested and you have to decide if "there is no reasonable way to link this data to the visitor's real-world identity." (check the help button). As users don't register on my site, they will be unique by identifier, but I won't be able to find out who they really are. The display data is anonymous anyway, so, tick the box here as well. Describe the reasons then on to the next step.

Make your way through the tabs, I will check "Site customisation" and "Anonymous user tracking", I offer an opt-out possibility for the site customisation, and uncheck pseudonymous decision-making, as I’m not tracking that. Recipient is just me, and as Retention I choose indefinitely.

To the right of the tabs in the lower part of the window is a properties button, click that to add all necessary data for the website, starting with a full contact information of the person/organisation responsible for the site.

Click on the next tab to enter a generic name for the policy and add an opt-out url (essentially a page where you can choose to get all cookies from your site deleted).

Make sure your language selection is the right one and add the url for your privacy policy on your website.

The Access-tab wants you to indicate what personal data the user can view to doublecheck what's stored on your site. In my case: no identified data is collected.

Next, let's eliminate that dispute warning: go to "Assurances", and add a dispute. I call it "all disputes" chose customer service as dispute remedy for "all disputes", with a link to contact-us, to reach the customer service.

Lastly, in the global properties, set the expiry date. I chose the same as the cookies lifetime, or up to a date when the cookie situation, and therefore the privacy policy, changes.

The easiest way to get rid of the must-haves is to eliminate one error after the next. Click the error tab to see them. If you have any other errors, fix them accordingly... it's most probably in your data group, or it’s a conflict between your data elements, the group and global properties.

All done? I had to add a category to my HTTP cookie. Now it looks like this:

Save it, and go to the final step: deploy your data. For that, you'll need to generate a reference file first. Here's one that fits my example - it directs to the P3P file in all cases (include \*).

<META xmlns="http://www.w3.org/2000/12/p3pv1">
 <POLICY-REFERENCES>
    <POLICY-REF about="testsite_com.p3p">
       <INCLUDE>\*</INCLUDE>
       <COOKIE-INCLUDE name="*" value="*" domain="*" path="*"/>
    </POLICY-REF>
 </POLICY-REFERENCES>
</META>

All you have to do now, is:

• Save the P3P reference file in a folder called w3c in the webroot, as /w3c/p3p.xml. Feel free to look at my example reference.
• Save the P3P. You can see from how I set up the reference file that I chose to store it in the same folder, which is the easiest and most common thing. Here's my example p3p policy for download
• Every time you interact with the cookie, send the created header first. Below is an overview of how to do it for my example, taken directly from the privacy council.
• Finally: Take a look at it (in IE: view-->privacy report).

P3P compact policy implementations

Method	Code
HTML	<meta http-equiv="P3P" content="CP='NOI DSP NID TAIo PSAa OUR IND UNI OTC TST'">
PHP	Header("P3P: CP='NOI DSP NID TAIo PSAa OUR IND UNI OTC TST'")
ASP	Response.AddHeader "P3P","CP='NOI DSP NID TAIo PSAa OUR IND UNI OTC TST'"
JSP	Response.setHeader("P3P","CP='NOI DSP NID TAIo PSAa OUR IND UNI OTC TST'")
ColdFusion	<cfheader name="P3P" value="CP='NOI DSP NID TAIo PSAa OUR IND UNI OTC TST'" />

Conclusion

Congratulations, you made through this dry and rocky path of an article, or alternatively you found the scrollbar overly useful. I've had my doubts while writing this, about how complex it should be, and decided to go for an overview with a simple A-Z example, as my key problem was piecing it together initially.

P3P doesn't end here though - there are many more possibilities, from setting up different policies for different parts of a website, to getting deeper into the personal data aspect (there's quite a difference in cookie handling with P3P when personal data is involved), to taking a closer look into the client side and the possibilities that P3P offers, which mostly aren't quite built into browsers yet.

The idea of P3P is a good one, but it's flawed, as it's so far based on honesty. If I used information differently than I stated in my P3P policy, how would the user ever know? If developers use half-hearted workarounds by simply adding a non-offensive P3P header, why would the user trust P3P? These are the first things that you'll ask yourself while spending time on this, but there's more elaborated critizism: the Electronic Privacy Information Center has assessed P3P and is not happy at all with it. So why do it? Given you do use cookies, 3 reasons come to mind, and they seem oddly close to web standards (looking forward to the comments):

• Because you have to: I don't use cookies very much, maybe a couple of projects a year. But if I do and it doesn't work for a group of users or, even worse (*gasp*) the client, heck, I gotta make it work.
• Because you would rather solve problems than work around them: I never like grey areas in projects, identified ones or the ones that are brushed off. The fix-it-now-research-it-later approach usually ends in not researching it at all, and next time round you're none the smarter.
• Because it makes a better website: This is the moral high ground for today, but think about it: the web standards movement is something that had to happen sooner or later. Cookies aren't used as much as in the olden days, but as the basics are set and can be extended, any improvement in their handling should improve users trust in using personal data on the internet, with reasonable resonance in the future.
  
  

플래시 애니메이션에서 가속도는 여러 곳에서 많이 응용됩니다.

이 가속도효과는 탄성을 주는 효과, 원운동하는 효과, 나선운동이라든지 점차 퍼져나가는

효과등에 응용되어 시각적으로 재미난 효과를 얼마든지 만들어 낼 수가 있지요.

그래서 이번장에는 가속도의 기본개념을 설명하고 다음장에서는 몇가지 간단한 응용예를

들어 보기로 하겠습니다.

먼저 애니메이션에서 가속도효과란 임의의 위치에서 특정위치(타겟점이라 하지요.)로

가는동안 일정 속도를 계속 더해주는 경우와 일정순간까지 속도가 붙다가 점차 타겟점에

다다르면 속도가 속도가 점점 줄어 들어 타겟점에서는 속도가 0이 되는 경우로 나눌수가

있겠네요.

먼저 첫번째경우부터 설명하지요.

즉 속도를 계속적으로 더해가는 경우입니다. 공식으로 적어볼까요?

속도 = 속도 * 가속하려는 수치

위의 공식은 다음과 같이 적을수가 있습니다.

속도 *= 가속하려는 수치(여기서 *=의 의미는 오른쪽의 수치를 왼쪽에 계속 곱하라는 뜻입니다.)

위와같이 왼쪽의 속도는 오른쪽의 가속하려는 수치를 계속 곱해줌에 따라 증가를 계속하게 될것입니다.

그렇다면 이때 이 물체의 위치는 어떻게 될까요? 이 물체의 위치는 기존 물체가 있던 위치에다 위의

속도(가속도가 계산된 값)을 더한 값이 될겁니다. 이것도 공식으로 나타내면

물체의 위치 += 속도

여기까지 이해가 되시지요?

그럼 위의 공식을 애니메이션에 적용해 보겠습니다.

자 플래시를 띄우고 원을 하나 그린다음 원을 마우스로 블럭설정한뒤 F8을 눌러 심볼로 등록합니다.

그런다음 다시 원을 선택해서 심볼로 변한 이 원에 다음의 코드를 적습니다.

//맨먼저 무비클립이 로드되면 초기값을 설정해줍니다.
onClipEvent (load) {

//그다음 속도를 1로 설정하고 가속도계수는 1.1로 설정해보죠.
sokdo = 1;
gasokdo = 1.1;
}

//이제 매프레임들이 연속될때마다 적용될 코드를 적어줍니다.
onClipEvent (enterFrame) {

//속도에 가속도계수를 곱해주고
sokdo *= gasokdo;

//그 속도를 현재 이 무비클립의 위치에 계속 더해줍니다.
this._x += sokdo;

//그런다음 무비클립의 x 축 위치가 400이 넘으면 다시 위치 0으로 돌아가고 가속도계수는 0으로 설정하여 멈추게합니다.
if (this._x > 400) {
this._x = 0;
gasokdo = 0;
}
}

위의 결과는 다음과 같습니다.



위 의 결과물은 원래 한번만 실행되고 말지요. 그래서 저는 버튼을 달아보았습니다. 여러분께서도 버튼을 직접 달아본다면 아시겠지만 버튼에 재실행하라는 명령을 주기위해선 함수를 사용해야 한다는걸 눈치채셨을겁니다. 재실행하는 경우 함수가 딱입니다.

그렇다면 버튼을 달고 함수를 응용한 최종 결과물의 소스는 어떻게 될까요? 다음과 같습니다.

onClipEvent (load) {
sokdo = 1;
gasokdo = 1.1;

//다음 부분을 추가하시면 됩니다.
function moveto(a, b) {
sokdo = a;
gasokdo = b;
}
}
onClipEvent (enterFrame) {
sokdo *= gasokdo;
this._x += sokdo;
if (this._x>400) {
this._x = 0;
gasokdo = 0;
}
}


그 다음은 버튼을 달고 F8을 눌러 버튼으로 만든뒤 다시 버튼을 클릭하여 다음과 같은 코드를 적어놓으시면 됩니다.

on(press){
_root.circle.moveto(1,1.1);

}

여 기서 _root.cicle라는 코드보이시죠? 이 말은 루트(메인화면)에 있는 원(무비클립)의 공식적인 이름을 cicle로 정했다는 겁니다. 어떻게 정하냐고요? 우리가 만든 원을 한번 클릭한뒤 밑의 속성창의 맨 왼쪽면을 보시면 [인스턴스 이름]이라고 씌여있는 부분에 cicle를 적어주면 되지요.

잘 알아 두십시요. 플래시에서 모든 무비클립의 이름은 이 창에 적어논 이름으로만 인식한다는 것을요. 우리가 심볼(무비클립심볼이나 그래픽심볼, 버튼심볼)로 만들때 누르는 F8에서 적는 아무 이름은 전혀 플래시가 인식 못합니다. 그건 그냥 우리가 심볼을 만들때 개인적으로 구별하기 위한 이름일뿐입니다.

DL

• DL 태그는 리스트 항목을 선언하는 태그 입니다.
  
• DL 태그로 선언된 후에 DT 태그에 "항목명"을 DD 태그에 "설명"을 붙여줍니다.
  
  

형식 :

<DL> <DT>여기에 용어의 이름을 쓴데여~~~</DT> <DD>여기에는 용어에 대한 설명을 써야겠져?</DD> <DT>허웅</DT> <DD>귀엽다. 개구장이다.</DD> </DL>

결과 :

여기에 용어의 이름을 쓴데여~~~

여기에는 용어에 대한 설명을 써야겠져?

허웅

귀엽다. 개구장이다.

---

DT

• DL 태그 내부에서 정의되는 구절이나 단어를 정의합니다.
  
  

---

DD

• DT 태그로 지정된 문서의 내용을 지정하는데 이용합니다.
  
  

---

LI

• 리스트의 각 항목을 적을 때 이용되는 태그입니다.
  
  

형식 :

<LI>이 글자 앞에 보이는 "동그라미"가 LI 태그가 적용된 겁니다.</LI><br /> <LI>끝나는 태그가 없어도 상관없어요.<br />

결과 :

• 이 글자 앞에 보이는 "동그라미"가 LI 태그가 적용된 겁니다.
  
• 끝나는 태그가 없어도 상관없어요.
  

---

OL

• 숫자 혹은 알파벳 또는 로마자 등을 이용하여 리스트화하는 기능을 갖습니다.
  
  
• 각 항목은 LI 태그를 이용합니다.
  
• 이 때, LI 태그의 속성으로 "TYPE 속성"을 사용할 수 있습니다.
  
• TYPE 속성의 값으로는 A(알파벳 대문자), a(알파벳 소문자), I(로마숫자 대문자), i(로마숫자 소문자) 등을 사용합니다.
  
  

형식 :

<OL> <LI>장미 <LI>봉선화 <LI>진달래 </OL> <br /> <OL START="100"> <LI>장미 <LI>봉선화 <LI>진달래 </OL> <br /> <OL> <LI TYPE="a">장미 <LI TYPE="a">봉선화 <LI TYPE="a">진달래 </OL> <br /> <OL> <LI TYPE="A">장미 <LI TYPE="A">봉선화 <LI TYPE="A">진달래 </OL> <br /> <OL> <LI TYPE="i">장미 <LI TYPE="i">봉선화 <LI TYPE="i">진달래 </OL>

결과 :

1. 장미
2. 봉선화
3. 진달래


100. 장미
101. 봉선화
102. 진달래


1. 장미
2. 봉선화
3. 진달래


1. 장미
2. 봉선화
3. 진달래


1. 장미
2. 봉선화
3. 진달래

---

UL

• 일정한 항목이나 리스트같은 것을 표현할 경우에 사용됩니다.
  
• 각 항목은 LI 태그를 사용합니다.
  
  
• 그러나 사용만 잘하면 꼭 그렇게 하실 필요 없겠죠?
  
• 저 같은 경우 P 태그는 잘 사용을 하지 않습니다. ---> 습관상
  
• 그래서 문단의 들여쓰기 기능이 필요할 경우에는 UL 태그를 주로 사용합니다.
  
  
• UL 태그의 속성으로는 "TYPE 속성" 있습니다.
  
• TYPE 속성의 값으로는 "disk, square, circle"의 세 종류가 있습니다.
  
  

형식 :

<UL type="disk"> <LI>장미</LI> <LI>봉선화</LI> <LI>진달래</LI> </UL> <UL type="square"> <LI>장미</LI> <LI>봉선화</LI> <LI>진달래</LI> </UL> <UL type="circle"> <LI>장미</LI> <LI>봉선화</LI> <LI>진달래</LI> </UL>

결과 :

• 장미
• 봉선화
• 진달래

• 장미
• 봉선화
• 진달래

• 장미
• 봉선화
• 진달래

---

DIR

• DIR 태그는 항목의 리스트를 나열하는 목적으로 사용됩니다. UL 태그와 동일한 기능이므로 가능하면 UL 태그를 이용하는 것이 좋습니다.
  
  
• 20글자 이내의 짧은 항목 리스트를 만들 때 이용됩니다.
  
  

형식 :

<DIR> <LI>리스트 - 1</LI> <LI>리스트 - 2</LI> <LI>리스트 - 3</LI> </DIR>

결과 :

• 리스트 - 1
• 리스트 - 2
• 리스트 - 3

---

MENU

• MENU 태그는 메뉴의 리스트를 나열하는 목적으로 사용됩니다. 속성은 COMPACT가 있으나 대부분의 웹브라우저에서는 지원하질 않습니다. 유사한 기능의 UL 태그를 사용하시는 것이 더욱 좋습니다.
  
  

형식 :

<MENU> <LI>리스트 - 1</LI> <LI>리스트 - 2</LI> <LI>리스트 - 3</LI> </MENU>

결과 :

• 리스트 - 1
• 리스트 - 2
• 리스트 - 3

initMouseEvent

void initMouseEvent(String  typeArg,

                    boolean canBubbleArg,

                    boolean cancelableArg,

                    org.w3c.dom.views.AbstractView viewArg,

                    int detailArg,

                    int screenXArg,

                    int screenYArg,

                    int clientXArg,

                    int clientYArg,

                    boolean ctrlKeyArg,

                    boolean altKeyArg,

                    boolean shiftKeyArg,

                    boolean metaKeyArg,

                    short buttonArg, 

                   EventTarget  relatedTargetArg)

initMouseEvent 메소드는,DocumentEvent 인터페이스에 의해 작성된 MouseEvent 의
값을 초기화할 경우에 사용합니다. 이 메소드는,MouseEvent 가 dispatchEvent 메소드를
개입시켜 디스팟치 되기 전에 한해 불려 갑니다만, 필요한 경우는 초기화할 단계에서 여러
차례 불려 가는 일도 있습니다. 여러 차례 불려 갔을 경우는, 마지막 호출이 우선됩니다.

파라미터:

typeArg - 이벤트의 형태

canBubbleArg - 이벤트를 버블 할 수 있을지 어떨지

cancelableArg - 이벤트의 디폴트 액션을 억제할 수 있을지 어떨지

viewArg - Event 의 AbstractView

detailArg - Event 의 마우스의 클릭수

screenXArg - Event 의 화면상에서의 x 좌표

screenYArg - Event 의 화면상에서의 y 좌표

clientXArg - Event 의 클라이언트의 x 좌표

clientYArg - Event 의 클라이언트의 y 좌표

ctrlKeyArg - Event 의 사이에 Ctrl 키가 밀렸는지 어떠했는지

altKeyArg - Event 의 사이에 Alt 키가 밀렸는지 어떠했는지

shiftKeyArg - Event 의 사이에 Shift 키가 밀렸는지 어떠했는지

metaKeyArg - Event 의 사이에 Meta 키가 밀렸는지 어떠했는지

buttonArg - Event 의 mouse button

relatedTargetArg - Event 에 관련하는 EventTarget

이곳 참조 사이트는 == http://developer.mozilla.org/en/docs/DOM:document.createEvent
이다. 사실 위에 글보다 이링크가 훨씬 보기 좋다 ;; 아직 한글화 안됨

!!! I LVE TECKTONIK !!!

완전 사랑해

집에서 맨날 추고 있다규

먼저 난 HTML 잘 모른다 -_- 플밍은 잘 모르겠지만 ;;

HTML 잘  그래서 아래 사이트를 많이 이용한다..


http:/www.w3schools.com/tags/tag_dt.asp

위사이트 굳이다.

더 좋은곳있으면 .. 알려줘여 ㅠㅠ