2021. 4. 22. 00:20ㆍJSP 공부/html 공부
이번에는 JSP 환경에서, html을 이용해 리스트, 표(테이블), 이미지 삽입, 링크 연결 까지 알아 봅시다.
리스트 만들기
리스트는 항목이라고도 하죠.
html 파일을 1개 만들고, <body></body> 태그 안에, 아래와 같이 작성을 해봅시다.
<ul> -> un ordered list 라고 해서, 순서가 없는 항목 입니다.
<ol> -> ordered list 라고 해서, 순서가 있는 항목 입니다.
위의 <ul> <ol> 태그 안에서 <li> 태그를 사용하면 아래와 같이 나옵니다.
표 만들기
테이블 만들기를 해봅시다. = 표 만들기
<body></body> 태그 안에, 아래와 같이 작성해 줍시다.
<table> -> table의 시작을 의미합니다. 안에 여러가지 속성을 줄 수 있습니다.
border="1" -> 표의 굵기를 1로 하겠다.
width="500px" -> 표의 넓이를 500px로 하겠다.
<tr> -> 행을 시작을 나타냅니다
<th></th> -> 제목을 표현할 때 사용합니다.
<th rowspan> -> 행4개를 병합하겠다.
</tr> -> 행의 끝을 나타냅니다.
<td></td> -> 표의 기본 내용들을 표현할 때 사용합니다.
<tr align="right"> -> 행의 정렬을 우측으로 하겠다.
<td colspan="4"> -> 열4개를 병합하겠다.
</table> -> table의 끝을 의미합니다.
이미지 삽입
이미지 삽입을 위해서, 원하는 이미지 아무거나 2개를 다운로드 해주세요.
JSP 환경에서 이미지를 삽입하기 위해서는, 이클립스 프로젝트 내에 해당 이미지를 넣어주어야 합니다.
※ JSP 환경이 아닌 그냥 html 이라면, 폴더에만 넣어놔도 됩니다.
WebContent 폴더 안에, images 폴더를 만들고 다운로드 받은 이미지 2개를 넣어주세요.
이미지는 <img> 태그 사용합니다. <img src="경로"> 를 이용해서 이미지를 넣어주시면 됩니다.
이 때 경로를 표현하는 방법에는, 절대경로와 상대경로가 있습니다.
절대경로 : "url"
상대경로 : "/images/1.png"
저희는 상대경로를 이용해서 넣을 건데요.
html 파일이 있는 곳이 기준이 됩니다.
상위 폴더 : "../"
현재 폴더 : "./" ( 생략가능 )
하위 폴더 : "하위폴더이름/"
width 는 넓이를 , height 는 높이를 설정합니다. ( 넓이와 높이를 안넣어주면 원본크기로 들어갑니다. )
, alt는 엑박이 떳을 때, 이미지의 정보를 표시합니다.
링크 연결
링크를 연결할 때는, <a> 태그를 사용합니다.
연결할 링크의 주소는 href="주소" 속성을 사용합니다.
예를 들어서, 네이버 홈페이지로 이동하고 싶을 때는 <a href="https://www.naver.com"> 을 사용합니다.
예를 들어서, 내가 만든 다른 페이지로 이동하고 싶을 때는 <a href="파일경로"> 를 사용합니다.
클릭하게 되면, 해당 사이트 및 페이지로 이동하게 됩니다.
이 링크 연결은 이미지에 덧씌울 수도 있는데요
<a> 태그 안에 <img> 태그를 사용하면 됩니다.
이런 경우에는, 해당 이미지를 클릭하면 지정되어 있는 사이트 및 페이지로 이동하게 됩니다.
이번에는, JSP 환경에서 html을 이용해 리스트, 표(테이블), 이미지 삽입, 링크 연결 까지 알아 보았습니다.
오늘은 이렇게 학원에서의 수업이 끝이 났습니다.
고생하셨습니다.
'JSP 공부 > html 공부' 카테고리의 다른 글
| Day48 - [JSP]html_form , 태그의 성질 (0) | 2021.04.22 |
|---|---|
| Day47 - [JSP]html 프로젝트 만들기 및 html 기본 (0) | 2021.04.21 |