Dynamic Web Project 만들기
(동적인 웹 프로젝트 만들기)
1. 이클립스를 실행시킨 뒤 File -> New -> Dynamic Web Project를 실행한다.
2. 프로젝트이름을 설정한 뒤 Next 클릭한다
3. 빈칸으로 되어있는 Generate web 칸을 클릭 하여 설정한 후 Finish 버튼을 누른다.
4. 프로젝트가 만들어 졌다면 이제 HTML 파일을 만들어야 한다.
프로젝트를 더블클릭 하여 WebContent 로 설정한 content directory 파일에 오른쪽버튼을 클릭
New -> HTML File 을 클릭한다.
5. HTML 파일의 이름을 정한 뒤 Finish 버튼을 클릭하여 종료한다.
6. HTML 파일 생성 완료
1. HTML 꾸미기
1. 이제 html 을 꾸미는 방법을 알아보자.
<title> </title>사이에 입력하는 문자는 제목을 의미하며 웹 브라우저 이름처럼 맨 위에 나타나게 된다.
h 태그는 h1 ~ h6까지 글자의 크기를 나타내며, h태그의 숫자가 커질수록 글자 크기는 작아진다.
<body> </body> 안에 문장의 내용을 입력하면 된다.
2. Run As 버튼은 파일을 실행할 수 있으며
단축키로는 Ctrl + F11 을 누르면 실행된다.
3. 기본적으로 Tomcat이 설정되어 있지 않으면 실행될 수 없으며
위에 사진은 Tomcat이 정상적으로 설정되어 있는 것을 보여주는 것이다.
4. 아래의 [그림 11] 처럼 갈수록 h태그가 1일때 제일 크고 갈수록 작아져서 6일때 가장 작은 결과값을 확인할 수 있다.
2. 줄바꿈과 공백
줄바꿈이나 공백을 적용하고 싶다면 pre 태그나 br 태그를 사용하면 된다.
pre 태그는 안에 있는 내용을 작성한대로 그대로 출력할때 사용하며,
br 태그는 줄바꿈이 필요할때 사용한다. 닫는 태그가 존재하지 않으며 깔끔한 결과값을 나타낼 수 있다.
HTML은 여러개의 공백은 한개로 인식하고 엔터는 무시하기 때문에 pre태그나 br태그가 유용하게 사용된다.
3. 태그명 및 속성
charset="UTF-8" 로 설정하는 이유는 한글이 깨지는 것을 방지하기 위함이다.
div : 태그명
style : 속성
u태그는 글자 아래에 밑줄이 생성된다(HTML 버전5.0에서는 사용하지 않음)
style = "color:red"로 글씨 색깔(red)을 설정할 수 있다.
style = "font-size:36px;" 로 글자 크기(36)를 설정할 수 있다.
<b> 와 </b> 사이에 내용을 입력하면 글씨가 진해진다. 그러므로 '와' 만 진하게나온다.
<b>와 </b>를 출력하고 싶다면 < : < , > : > 를 나타내기 때문에 이를 이용하여 나타낼 수 있다.
4. 표 작성하기
표를 작성할 때에는 table안에 tr(줄) td(칸)으로 구성된다.
table 옆에 테두리를 나타내는 border ="1"을 작성하면 표가 생성된다.
style를 통해 width와 margin을 조정할 수 있다
width 는 폭을 나타내며 margin 는 전체 표를 가운데 정렬한다
align="Left","right","center" 를 통해 왼쪽정렬 오른쪽정렬 가운데정렬
valign="top","middle","bottom" 을 통해 한칸에 맨위로 가운데로 아래로 정렬
아래의 [그림 17]의 결과 값을 통해 첫번째 행은 왼쪽 오른쪽 가운데 정렬값
두번째 행은 위, 가운데, 아래 의 높이 정렬 값
세번째 행은 일반 값. * 는 띄어쓰기를 나타내기 때문에 빈 값이 출력.
5. 응용하기
head>안에 <style type="text/css">을 통해 전체에 css문구를 적용할 수 있다.
td { text-align: center ; padding 5px; margin:15px; color:blue;" }를 이용해 가운데정렬,
padding : 글자와 테두리사이의 간격 5px, 색깔은 블루로 설정한다.
style="border:1px solid red;" 표 테두리 색깔을 빨간색 solid는 일반적인 직성
colspan="5" 는 한줄에 5칸을 합친다. 좌우로 칸을 합치는 것을 의미한다.
rowspan="2" 는 두줄에 2칸을 합친다. 상하로 칸을 합치는 것을 의미한다.
'JSP' 카테고리의 다른 글
| 6.JSP 에러처리 (0) | 2017.10.04 |
|---|---|
| 5. JSP <Json> (0) | 2017.10.04 |
| 4. JSP (Jsoup) (0) | 2017.10.04 |
| 3. JSP ( Javascrpit 표현 방법) (0) | 2017.09.23 |
| JSP 2. HTML - 폼태그 (0) | 2017.09.22 |