진리 블로그

http://celeves.blog.me/130101328110

하지만, 메뉴 등과 같이 그냥 나열되는 것에도 많이 쓰입니다.
css로 원래 ul, li의 속성을 제어해서 사용하는 것이지요.
css로 제어하기에 따라서 이미지 변환 및 좌>우, 상>하의 나열이 가능합니다.

dl, dt, dd는 Definition List의 약자로 설명형 목록을 만들 때 사용합니다.
화면의 모습은 거의 '표'형태와 흡사합니다. 목록태그의 한 종류로 생각하시면 되겠습니다.
일반적으로 '표'형태로 제목, 설명을 쓰고자 할 때나..

ⓒ 지식인

정의 목록(<DL><DT><DD>) 올바르게 쓰고 계신가요?

DTD 명세(http://www.w3.org/TR/1999/REC-html401-19991224/struct /lists.html#edef-DD) 에 따르면,

DL(Definition lists)은 DT(definition term), DD(definition description)와 함께 쓰인다.
DT, DD의 순서에 상관이 없다.
DT에는 인라인요소만 갖을 수 있다,
DD에는 블록요소와 인라인요소 모두 갖을 수 있다.
DT와 DD중 하나만 있어도 된다.
DT와 DD는 여는 태그는 필요하지만 닫는 태그는 생략해도 상관없다

<DL>
<DT>Dweeb
<DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
<DT>Cracker
<DD>인터넷 해거(hacker)
<DT>Nerd
<DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
</DL>

<DL>
<DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
<DT>Dweeb
<DD>인터넷 해거(hacker)
<DT>Cracker
<DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
<DT>Nerd
</DL>

<DL>
<DD><EM>Nerd</EM> 또는 <EM>Geek</EM>로 성숙 할 수 있는 흥분 잘하는 젊은 사람
<DD> 인터넷 해거(hacker)
<DD>자기 처의 생일을 잊어버리고 Net에 빠진 남자
</DL>

웹표준 dl, dt, dd 정의목록 태그 css로 정의하기

/**
* <DL, DT, DD /------------------------------------------------------------------
*/
//
dl { margin:0; }
dt { margin:0; }
dd { margin:0; padding-right:3px; }

// dd 기본 사용시
<dl>
<dt>apmsoft 의 apm의 뜻은?</dt>
<dd>a : 아파치(apache)</dd>
<dd>p : PHP</dd>
<dd>m : MYSQL</dd>
</dl>

# 결과 -->
apmsoft의 apm의 뜻은?
a : 아파치(apache)
p : PHP
m : MYSQL

<help>
위와 같이 출력 된다.
기본적으로 dl, dt, dd 태그는 블록적 성격을 가진다.
그래서 한줄씩 출력하게 된다.



/**
* <DL, DT, DD /------------------------------------------------------------------
*/
//
dl { margin:0; }
dt { margin:0; }
dd { margin:0; display:inline; padding-right:3px; }

// dd 를 inline 으로 설정 했을 경우
<dl>
< dt>apmsoft 의 apm의 뜻은?</dt>
<dd>a : 아파치(apache)</dd>
<dd>p : PHP</dd>
<dd>m : MYSQL</dd>
</dl>

apmsoft의 apm의 뜻은?
a : 아파치(apache) p : PHP m : MYSQL

inline 을 설정해 주면 세로가 아닌 가로로 출력을 하게 된다.


dl dt dd 를 사용하게 되면
리스트 적인 의미를 담은 글이 되기 때문에 성공적인 코딩이라 말할 수 있겠다

홈페이지 제작(코딩)

답변

table을 이용해서 화면을 구성하게 되면 제작도 힘들고 HTML코드의 크기가 불필요하게 커져서 사이트 성능을 저하시킵니다. 그래서 HTML에는 내용만 넣고 화면 배치나 디자인적인 요소, 배경이미지나 색, 블록의 크기 등을 CSS로 제작하는 방법을 사용하는 것이 좋습니다.

HTML 태그들은 모두 의미를 가지고 있습니다. <table> 태그는 표를 나타낼때 사용하는 것이고, <div>는 태그들을 그루핑할 때 사용하고, <ul>은 목록, <dl>, <dt>, < dd>등은 정의목록 등을 나타냅니다. 아래아 한글이나 MS 워드에서도 리스트를 나타낼때 리스트를 표시하는 기능을 사용하잖아요? 그런것과 같은 것이라고 생각하시면 됩니다. 다시 말해서 HTML 태그를 목적에 맞게 사용하고 디자인을 CSS로 입하는 방법이 여러가지 장점이 있기 때문에 큰 사이트들이 이러한 방식으로 웹페이지를 만들고 있는 것입니다.

관련된 내용은 웹표준이나 웹접근성을 검색을 해보시면 찾아보실 수 있습니다.

요즘 대부분의 웹사이트는 1024 사이즈를 표준크기로 정하여 디자인이 되고 있습니다. 1024 사이즈에서 스크롤바와 약간의 여백을 제외하고 웹사이트의 영역을 960정도(약간 더 크거나 작은 경우도 있습니다.)로 디자인 하는 것이 일반적입니다.

이제 추가만 하면되는데 상단 메뉴중 Window - Preferences를 선택해주면 아래와 같은 사진이 나오게 된다.
그안에서 Server - Runtime 어쩌구..를 선택후 Add버튼을 클릭해 준다.
그럼 아래(우측)와 같은 창이 뜨는데 자신이 설치한 톰캣 버전을 선택해 주면된다. Next~

그럼 다음과 같은 화면이 나오는데 Browser버튼을 눌러 자신이 톰켓을 설치한 폴더를 선택해 주면된다.
그리고 Finish~

아래와 같이 톰캣이 추가 되어 있는 현장을 목격할 수 있게 될 것이다!

톰캣 아파치를 설치해 보자!!
일단 톰캣을 설치하기 위해서는 싸이트에서 원하는 버전의 톰캣을 설치해야 한다.
http://tomcat.apache.org   로 접속한다.

접속후 좌측 메뉴 중 Download를 보면 버전별로 링크 되어 있다.
가장 최신버전인 Tomcat 7.0를 설치해보자

클릭후 스크롤을 중간정도로 내리면 Binary Distributions가 있는데 그중에서
첫번째 카테고리 Core에서 맨 아래에 윈도우 버전을 설치 해 주면된다.
32-bit/64-bit Windows Service Installer(pgp, md5)를 클릭해 주면된다
32, 64비트 모두 가능하기 때문에 이걸로 설치해 주면된다.

다운로드후 설치를 시작하면 첫화면이다. Next를 클릭!

계속 Next를 누르다 보면 처음으로 나오는 설정화면인데 이부분은 Normal인가로 해도 되지만
난 Full버전으로 설치할꺼다...

이부분도 Username과 Password를 적어 주어도 되지만 한번 적게되면 매번 사용할때마다 입력을 해 주어야
되기 때문에 불편하다. 그래서 그냥 Next로 넘겨주자.

그리고 나오는 부분은 현재 jre6이 어느곳에 설치 되어 있는지를 물어 보는 화면인데 보통 프로그램 파일안에 설치한다.
하지만 다른곳에 설치한 분들은 확인후 바꿔주면 된다.

그다음 화면은 톰켓을 어느곳에 설치할지 물어 보는 화면인데 어디든 상관없다.
C:\Tomcat 7.0에 설치해서 사용하는것도 괜찮다.

그렇게 모든 설정이 끝나면 설치 화면이 뜨면서 설치가 된다.