이와 같이 작성하면 href의 주소값과(반드시 #을 주소 가장 앞에 써야한다.)해당 문서의 id값과 일치하는 부분으로 이동 할 수 있다. 마치 웹의 맨위로 같은 버튼과 같은 것이다.
2.<p> : 문단을 지원하는 태그
위 코드를 작성하면 아래와 같은 결과를 볼 수 있는데
‘이것’에는 p태그가 없으나 앞뒤로 개행이 되어있는것을 볼 수 있다.
이처럼 p태그는 문자열을 문단으로 만들어주고 해당 태그 앞뒤로 개행문자가 포함되어있다.
title : 툴 팁이 표시되게 하는 태그로 <p title=”I’m a tooltip”>This is a paragraph.</p> 와 같이 적으면 title내부 값이 툴팁으로 표시된다.
<!DOCTYPE html>
<html>
<body>
<p title="I'm a tooltip">This is a paragraph.</p>
<p title=about w3schools>this is a ex</p>
이것
<p title="jhon 'sg'">p tag
pp tag
ppp tag</p>
</body>
</html>
3.<h1> : 제목을 작성할 때 규격화된 크기로 지정하는 태그로 숫자가 커질수록 크기는 작아진다. 제목인 header를 지정하는 태그이므로 p태그 처럼 앞뒤로 개행 문자가 존재한다.
style : CSS 속성중 하나로 꼭 h1태그가 아닌 다른 태그에서 해당 태그에 스타일 즉, 색상(color:blue), 글꼴(font-family:굴림), 크기(font-size:40px) 등과 같은 요소에 스타일을 추가할 때 사용하는 속성이다. h태그는 글자의 크기를 조절 할 수 있다. 여기에 style 속성으로 글씨 크기를 조절 한다면 어떻게 될까?
<h1 style=”font-size:40px;”>heading</h1> 이와 같이 작성하면 글씨의 기본 크기가 증가하여 더 큰 h1태그를 볼 수 있다. *여기서 px는 픽셀을 의미한다.
4.서식 : 문자의 상태를 나타내는 태그
<!DOCTYPE html>
<html>
<body>
<b>굵은체 텍스트</b><br>
<strong>강조 텍스트</strong><br>
<i>이탤릭체 텍스트</i><br>
<em>중요한 텍스트</em><br>
<small> 작은 텍스트</small><br>
<mark> 강조 텍스트</mark><br>
이것은 <del>삭제될</del>텍스트<br>
이것은 <ins>추가될</ins>텍스트<br>
이것은 <sub>아래첨자</sub>텍스트<br>
이것은 <sup>위첨자</sup>텍스트<br>
</body>
</html>
17. <article> : 이 태그는 독립적이고 독자적인 컨텐츠를 지정한다. 이 태그를 사용할 수 있는 분야는 포럼 게시물, 블로그 포스트, 신문기사 등이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
여기는 일반 영역
<article>
여기서 부터는 article 영역
<h2>오늘의 주제</h2>
<p>
article 태그는 왜 필요한가?
이 전까지는 주로 보여주는 부분에 의미를
둔 태그가 많지만 이처럼 해당 부분이 가지는
의미를 나타내는 태그도 있다.
</p>
</article>
</body>
</html>
18. <header> : 해당 문서의 헤더를 지정한다.
19.<footer> : 해당 문서, 영역의 바닥 글을 지정한다. 일반적으로 작정자, 저작권, 연락처 등이 해당 태그 내에 기재된다.
JSP는 클라이언트가 동적페이지를 요청 했을 경우 웹서버에서 WAS에게 제어권을 넘기고 WAS가 서블릿 소스코드로 변환되고 서블리스 클래스로 컴파일 되어 응답하는 구조로 이루어져 있다.
앞서 서블릿을 공부하면서 불편한 부분이 많았을 것이다.
서블릿은 기본적으로 자바를 기본으로 html코드를 out.println()의 형태로 작성하는 구조이지만 JSP는 html코드를 기본으로 html문서 도중 java코드가 삽입 되어있는 형태이다.
따라서 해당 파트가 java문법임을 알려주는 태그(?)가 있다.
<%! — — — %> : 변수 선언문으로 !와% 사이에 선언하고자 하는 변수를 작성하면 된다.
<% — — — %> : 스크립트릿으로 %와%사이에 java코드 그대로 작성하면 된다. 주로 연산처리나 반복문 처리에 사용되게 된다.
<% =— — — %> : 표현식으로 html문서 즉 웹에 바로 출력될 내용을 입력한다.
아래 코드 예제를 통해서 자세히 알아보자.
%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
String s = "String";
%>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h2>Hello JSP</h2>
현재 날짜와 시간은 : <%=new java.util.Date() %><br>
<%= s %> 이러한 형태 또는 <%out.println(s); %>이와 같은 형태로 작성해면 된다.<br>
</body>
</html>
위와 같은 결과를 볼 수 있다. 여기서 소스를 직접 보면 우리가 코딩한것과 다른것을 볼 수 있다. 컴파일 시에 변수는 문자열 처리가 되어 작성 되었고 java코드 또한 바뀌어 컴파일 된것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h2>Hello JSP</h2>
현재 날짜와 시간은 : Tue Jun 09 18:15:38 KST 2020<br>
String 이러한 형태 또는 String
이와 같은 형태로 작성해면 된다.<br>
</body>
</html>
그렇다면 하는김에 좀 더 변수를 가지고 놀아보자
기본적으로 변수를 사용하려면 변수를 선언한 후에 사용하게 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h2>Hello JSP</h2>
현재 날짜와 시간은 : <%=new java.util.Date() %><br>
<%= s %> 이러한 형태 또는 <%out.println(s); %>이와 같은 형태로 작성해면 된다.<br>
<%
String s = "String";
%>
</body>
</html>
따라서 위와 같이 코딩하면 빨간 줄과 함께 코드에 문제가 있음을 확인할 수 있다.
하지만 우리는 변수를 선언하는 다른 선언문을 알고있다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hello</title>
</head>
<body>
<h2>Hello JSP</h2>
현재 날짜와 시간은 : <%=new java.util.Date() %><br>
<%= s %> 이러한 형태 또는 <%out.println(s); %>이와 같은 형태로 작성해면 된다.<br>
<%!
String s = "String";
%>
</body>
</html>
이렇게 선언하면 아래와 같이 정상적으로 실행 됨을 알 수있다. 대체 어떻게 가능한 일인가 보자
