JSP - 주석의 종류, 각종 태그들(2022-09-07)

2022. 9. 8. 03:15ㆍ3층 1구역 - 개발의 장/JSP

1. 서론

연동하는 거로 지쳤다....모든지 꽁으로 얻어갈 순 없으나 절차가 너무 길다...

어쨋든 이번에 주석의 종류와 jsp의 기본 태그들에 대해 알아보도록 하자.

 

2. 본론

 

2-1. 주석의 종류

 

jsp 주석에는 특이하게 주석이 2개가 존재하는 듯 하다.

하나는

<!-- --> 이것이고, 또 다른 하나는 <%-- --%> 이것이다.

 

둘의 차이점은 웹에서 F12를 눌렀을 때 해당 주석이 엘리멘탈에 노출이 되느냐? 되지 않느냐? 그 차이점이다.

 

<!-- --> 이 주석의 경우 F12를 눌렀을 때, 해당 주석의 내용이 엘리멘탈에 노출이 된다.

<%-- --%> 이 주석은 F12를 눌렀을 때, 해당 주석의 내용이 엘리멘탈에 노출이 되지 않는다.

즉 이 주석은 개발자들만 볼 수 있도록 조치를 취하는 주석임을 알 수 있다.(자꾸 이 주석 하니까 누가 떠오르는데..;;;)

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 저는 f12를 누르면 노출이 되요  -->
<%-- 저는 f12를 누르면 노출이 되지 않아요. --%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 
</body>
</html>
cs

 

위와 같이 2개의 주석을 남겨 보았다 Web에서 어떻게 표시 될까?

Web에선 당연히 내용이 아무것도 없다. 왜? 아무것도 안 썼으니까

 

f12를 눌러보자.

Web콘솔에서 주석이 노출되었다.

 

2-2. 태그의 종류

 

<br>

<br> 태그는 줄 바꿈을 의미한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 저는 f12를 누르면 노출이 되요  -->
<%-- 저는 f12를 누르면 노출이 되지 않아요. --%>
<html>
<head>
<meta charset="UTF-8">
<title>ex00</title>
</head>
<body>
나는
줄바꿈을
했다!!!
</body>
</html>
cs

위와 같이 어떤 문구를 입력했다. Web에서 어떻게 출력이 될까?

분명 나는 코드화면에서 줄을 바꿔서 입력했는데 Web에서 Enter를 space로 인식하여

그냥 한줄에 표현해주었다.

 

이때 <br> 태그를 쓴다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 저는 f12를 누르면 노출이 되요  -->
<%-- 저는 f12를 누르면 노출이 되지 않아요. --%>
<html>
<head>
<meta charset="UTF-8">
<title>ex00</title>
</head>
<body>
나는<br>
줄바꿈을<br>
했다!!!<br>
</body>
</html>
cs

 

<h1~6>

<h1></h1>은 폰트 크기가 가장 크다. 그래서 2, 3, 4, 5, 6 순서대로 폰트 크기가 작아지는데

<h6></h6>이 폰트 크기가 가장 작다.

h7부터는 아무 의미 없는 태그이다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- http://localhost:8085/html_Exam/ex02.jsp -->
<html>
<head>
<meta charset="UTF-8">
<title>ex02</title>
</head>
<body>
<h1>글씨 크기가 제일 크다.</h1>
<h2>글씨 크기</h2>
<h3>글씨 크기</h3>
<h4>글씨 크기</h4>
<h5>글씨 크기</h5>
<h6>글씨 크기 제일 작다.</h6>
<h7>글씨 크기 h7 이후부터는 없는 태그</h7>
<br>
<h8>글씨 크기</h8>
<br>
</body>
</html>
cs

 

<i></i>, <b></b>, <u></u>, <s></s>

 

i는 기울인 글꼴을 표시할 때 사용하는 태그이다.

b는 글꼴의 굵기를 굵게 만드는 태그이다.

u는 밑줄친 글꼴에 사용하는 태그이다.

s는 취소선에 사용하는 태그이다.

 

단, u와 s는 이클립스 상 경고(노란선)가 뜨는데 프론트엔드 특성상 유행을 따라가기 때문에

그 유행에 따라 u와 s 태그는 jsp에서는 사용하지 않고 css에서 사용하길 권고한다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- http://localhost:8085/html_Exam/ex03.jsp -->
<html>
<head>
<meta charset="UTF-8">
<title>ex03</title>
</head>
<body>
<i>기울임 글꼴</i>
<br> <%-- <<<<< 엔터의 의미 --%>
<b>굵은 글꼴</b>
<br>
<u>밑줄친 글꼴</u>
<br>
<s>취소선</s>
<%-- 노란색은 css에서 쓰기를 권고하는 것들 --%>
<br>
</body>
</html>
cs

 

<p></p>

 

p태그는 한줄 개행을 의미한다. 즉 enter를 두번 친 효과?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex04</title>
</head>
<body>
Gulper에는 풍선장어 말고도 한꺼번에 많은 것을 꿀꺽 삼켜버리는 이란 뜻도 있다.
<p> <%-- <<<< 한줄 개행을 의미 --%>
타릭은 초월적인 힘으로 룬테라의 생명과 사랑, 아름다움을 수호하는 수호자의 성위이다. 
고국 데마시아에서 직무태만죄를 범하고 수치스럽게 추방당한 타릭은 속죄를 위해 타곤 산을 올랐고, 이 산 정상에서 하늘의 별들에게 더 큰 소명을 부여받았다. 
고대 타곤의 신비한 힘을 가득 받아 끔찍한 공허의 침식으로부터 밤낮없이 세계를 지키는 발로란의 방패가 된 것이다.
</p>
일러스트에서도 이 점을 살려 잠수함 하나를 삼켜버리려 헤엄치고 있다.
</body>
</html>
cs

 

<pre></pre>

 

pre태그는 글꼴의 형태는 잃어버리지만 코드창에서 친 내용을 그대로 보여준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex05</title>
</head>
<body>
Gulper에는 풍선장어 말고도 한꺼번에 많은 것을 꿀꺽 삼켜버리는 이란 뜻도 있다.
<p> <%-- <<<< 한줄 개행을 의미 --%>
타릭은 초월적인 힘으로 룬테라의 생명과 사랑, 아름다움을 수호하는 수호자의 성위이다. 
고국 데마시아에서 직무태만죄를 범하고 수치스럽게 추방당한 타릭은 속죄를 위해 타곤 산을 올랐고, 이 산 정상에서 하늘의 별들에게 더 큰 소명을 부여받았다. 
고대 타곤의 신비한 힘을 가득 받아 끔찍한 공허의 침식으로부터 밤낮없이 세계를 지키는 발로란의 방패가 된 것이다.
</p>
<pre> <%-- pre는 글꼴의 형태는 잃어버리지만 코드창에서 친 내용을 그대로 보여준다. --%>>
'의식의 흐름'은 미국의 심리학자 윌리엄 제임스가 
                     1890년에 사람의 정신 속에서 생각과 의식이 끊어지지 않고 연속된다는 것을 말하면서 처음 쓴 말이다. 
현대소설, 특히 심리주의 소설의 창작 기법인 
                   '의식의 흐름'은 소설 속 인물의 파편적이고 무질서하며 잡다한 의식세계를 자유로운 연상작용을 통해 
                                    가감없이 그려내는 방법을 말한다.
</pre>
일러스트에서도 이 점을 살려 잠수함 하나를 삼켜버리려 헤엄치고 있다.
</body>
</html>
cs

 

<li></li>, <ul></ul>, <ol></ol>

 

li태그는 html 리스트에 포함된 아이템을 묶어줄때 사용한다.

이는 ul태그와 ol태그에서 사용하게 되는데

 

ul태그는 unorder list라는 뜻으로 순서가 정해져 있지 않아 ● << 으로 표시된다.

ol태그는 order list라는 뜻으로 순서가 정해져 있어 1. << 으로 표시된다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex06</title>
</head>
<body>
    <ul> <%-- unordered list 점 표시 --%>
        <li>메일</li>
        <li>카페</li>
        <li>블로그</li>
        <li>쇼핑</li>
    </ul>
    <br>
    <ol> <%-- ordered list 번호의 표시 --%>
        <li>메일</li>
        <li>카페</li>
        <li>블로그</li>
        <li>쇼핑</li>
    </ol>
</body>
</html>
cs

<a href=#></a>

 

a태그는 anchor 의 첫글자로서 '정박지', '닻' 이란 의미이다.
다른 문서 로의 이동, 또는 같은 문서 내의 이동을 위해 사용한다.

 

필자는 href에 url를 넣을건데 아래 코드에서 이상한게 하나 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex07</title>
</head>
<body>
    <ul><!-- unordered list -->
        <li>
            <a href="http://www.naver.com"> 네이버 </a>
        </li>
        <li>
            <a href="http://www.naver.com" target="_blank" title="네이버로 이동합니다."> 네이버 </a>
        </li>
        <li><a href="http://www.daum.net"> 구 글 </a></li>
        <li><a href="http://www.google.com"> 다 음 </a></li>
    </ul>
</body>
</html>
cs

바로 target이란 것에 _blank이다.

얘 같은 경우는 url이 저장된 글씨에 마우스 커서를 갖다 대면 title에 입력된 문구가 출력된다.

 

<div></div>

 

div태그는 division에 약어로 말 그대로 구역을 나타내는 태그이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex08</title>
</head>
<body>
    <div style="background: red; height: 100px" align="center">
        <br>header<br> 사전 / 뉴스 / 증권 / 영화 / 뮤직
    </div>
    <div style="background: orange; height: 200px" align="center">
        <br>center<br> 컨텐츠가 들어갈 영역 <br>환영합니다.
    </div>
    <div style="background: skyblue; height: 100px" align="center">
        <br>footer<br>바닥글 들어갈 영역<br> 회사소개 | 인재채용 | 제휴제안 | 이용약관
    </div>
</body>
</html>
 
 
cs

 

<img src="경로" width, heigth/>

 

img태그는 말 그대로 img를 가져올 수 있는 태그 이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex09</title>
</head>
<body>
<h2>이미지 </h2>
    <img src="images/images/icon1.png" width="300px"/>
    
    <!-- http://localhost:8085/html_exam/images/icon2.png -->
    <h2>이미지 </h2>
    <img src="/html_exam/images/images/icon2.png" width="50%" />
</body>
</html>
cs

위 코드에서 width 50% 라는 명령어가 있는데 이건 브라우저의 창이 커지고 작아짐에 따라 오브젝트가 창의 크기에 비례하여 커지거나 작아진다. 쉽게 말하면 반응형 이라는 것.

 

3. 결론

 

왜 나는 백엔드 양성과정에서 프론트를 하고 있는가....

(머엉...................)

저작자표시 (새창열림)

'3층 1구역 - 개발의 장 > JSP' 카테고리의 다른 글

JSP - 블로그 형식 같은 느낌을 주는 퀴즈 (2022-09-08)  (1) 2022.09.08
JSP - 구역(div)마다 다른 느낌 주는 퀴즈 (2022-09-08)  (0) 2022.09.08
JSP - 퀴즈 같지만 퀴즈 아닌 예시(2022-09-07)  (0) 2022.09.08
JSP - JSP파일을 웹에 연동시켜보자. (2022-09-07)  (0) 2022.09.08
JSP - Tomcat 설치와 이클립스 연동방법 (2022-09-07)  (0) 2022.09.08

관련글

티스토리툴바