ex02.html.JSP

바보·2023년 5월 11일

JSP

목록 보기

3/18

<h1> Taag </h1>
<!--
h1은 오픈
/h1은 클로즈
br은 단독
hr도 단독
-->

<hr>
<--! -->
  는 이미 주석처리로 열심히 쓰고 있기에
  생략할법하지만 그래도 적어두겠음
  저 사이에 글을 적으면 됨
: 추가적인 내용이 있다면
  HTML의 주석은 서버에서 불러오면 보이진 않지만
  웹브라우저의 소스 보기를 통하여 확인하면
  주석이 노출되어 확인이 가능하다
즉, 가급적 주석은 적지 않는 것을 권장함
  
----------------------------------------------------
  
Tag는 HTML 코드를 작성하기 위한 문법
- open 태그와 close 태그를 가진다
- close 태그는 /(슬러시)가 붙어있다
- 간혹 closw 없이 단독으로 사용하는 태그도 있다
- 태그로 둘러 쌓인 데이터를 Elements(= 요소)라고 한다
- 요소는 태그의 영향을 받아서 웹 브라우저에 다양하게 출력된다
  
----------------------------------------------------
  
그리고 완전 꿀팁임
  자동완성을 쓰려면 자바에서는
  글자를 작성하다가 ctrl + space를 눌리지만
  JSP-이클립스에서는 ctrl + space를 눌리고 작성을 하다가 원하는 것을 찾아서 Enter을 누르면 완성된다..

html 구성하는 것들


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 탭제목 </title>
</head>
<body>
</body>
</html>
  
일단 기본적인 구성은 이렇다
각 각을 살펴보면

<!DOCTYPE html> : HTML5임을 명시하는 부분(독)

<html> : html 문서영역을 나타낸다. 뭘 쓰려면 <html> </html> 사이에 쓰면 된다

<head> : 페이지의 정보를 나타낸다. 화면에 출력되지 않음
  ㄴ meta와 title이 이 안에 있음
  
<meta charset=""> : 어떤 언어로 컴파일해서 결과물을 받을지를 선택..?하는 위치

<title> : 탭의 제목을 지정함
  창을 여러개 열면 주소창 위에 적혀있는 이름이 타이틀이고
  그 옆의 마크는 CSS의 영역이라 따로 공부가 필요함
  
<body> : 페이지에 출력될 내용을 작성하는 공간
  

※ 그리고  
한단계 이상 차이나는 것은 자식/부모 (태크)관계
더 위에는 조상/자손 (태그)관계

Heading : h

표를 완성하긴 했는데 벨로그 글 작성 안에서는
우선순위가 맨 마지막으로 보내지는지
아래의 코드 뒤에 작성하는 것이 안되서 따로 뺌

<table>
  <tr>
    <th colspan="2"> h시리즈 </th>
  </tr>
  	
    <tr>
      <td>h1</td>
      <td>사이즈 잴큼</td>
  </tr>
  
  
  
  <tr>
    <td> h2 </td>
    <td rowspan="2"><center> ↑ </center></td>
  </tr>
  
  
  
  <tr>
    <td> h3 </td>
    
  </tr>
  
  
  
  <tr>
    <td> h4 </td>
    <td rowspan="2"><center> ↓ </center></td> 
  </tr>
  
  
  
  <tr>
    <td> h5 </td>
  </tr>
    
  <tr>
    <td> h6 </td>
    <td> 사이즈 잴작음 </td>
  </tr>
    

  </tabel>

결과물 ↓

마침 오늘 수업에서 배워서 써봄 ㅎ,ㅎ

ㄴ 부가 설명 // ㅎㅎ..

- Heading <h~>
<h2> h태그는 페이지의 제목에 해당하는 태그
  <h3> h1~h6까지 있다
    <h4> 숫자가 커질수록 글자가 작아지고 얉아진다
      <h5> h7은 없기 때문에 아무런 효과가 없다
        <h6> h1은 페이지당 하나만 사용을 권장한다 / 강조느낌으로

Heading <h~>
h태그는 페이지의 제목에 해당하는 태그

h1~h6까지 있다

숫자가 커질수록 글자가 작아지고 얉아진다

h7은 없기 때문에 아무런 효과가 없다

h1은 페이지당 하나만 사용을 권장한다 / 강조느낌으로

Paragraph : p

p태그는 단락을 나누는 태그

<p> 위 아래 약간의 여백과 줄바꿈이 발생한다 </p>

<p> 줄 바꿔서 문장을 작성할때 자주 사용한다 </p>

<p>
  태그는 한 줄로 작성하기도 하고<br>
  내용이 많을땐 펼쳐서 사용하기도 한다<br>
  p태그 내에서는 엔터는 줄바꿈이 아니다<br>
</p>

Attribute : 속성

속성
: 태그는 속성을 줘서 다양한 효과를 낼 수 있다
: 태그명 속성명 = "값"
ㄴ 값을 줄 땐 무조건 쌍따옴표! 무적건!!!
에\~~~러/~~~가\~~~뜸뉘다~!ㅋㅋㅋㅋ
--------------------------------------
※ font 태그는 HTML5에 지원이 중지된 태그이다
(중지 != 사용x)

HTML5에서도 속성등을 나타내는 방법은 가능하지만
CSS로 전담시켜서 처리하기 때문에
간단한 것이 아니라면 <style> </style> 을
<title> </title> 아래에 작성한다
--------------------------------------

# font - color=""

<font>Hyper Text Markup Language</font>
<p><font color="red">Hyer Text Markup Language</font></p>
<font color="green">Cascading Style sheet</font>
<font color="blue">JavaScript</font>

구글에 빛의 3원색이라고 검색해보면 색 영어로 잘 나옴
크롬에서 '웹 스토어'검색하고
검색창에 color picker 눌려서 설치하면
색 뽑아내는? 그런거 뜸/ 네이버색이나 유튭색이나 등등 뽑아쓰면댐

돌아가서 3원색 R G B 라고 하는데
Red | Green | Blue 의 약자임
그리고 이 색들을 코드로 만들면 # 을 붙여 사용하는데
# Red   |   Green    |   Blue
# 00         00           00
으로 코드를 생성할 수 있음

0~9, A(10) ~ F(15) // 16진수를 사용함
0,A는 색을 안준거고 9,F는 다 준거라 생각하면 됨

그래서 예시의 코드는 (밑에 따로 색나오게해서 적어두겠음)

<font color="#ff0000">HTML</font>
<font color="#00ff00">CSS</font>
<font color="#0000ff">JS</font>

<font color="#ffff00">JSP</font>
<font color="#ff00ff">ASP</font>
<font color="#00ffff">Python</font>
<font color="#ffffff">PHP</font>

HTML
CSS
JS

JSP
ASP
Python
PHP

이렇게 색상이 나옴 알록딸록~~!

-------------------------------------
# font - size=""
클자의 사이즈도 변경이 가능하다

<font size="6">Hyper Text Markup Language</font>
<font size="3">Cascading Style Sheet</font>
<font size="7">JavaScript</font>

Hyper Text Markup Language
Cascading Style Sheet
JavaScript

이렇게 글씨 크기가 알..?뒤죽박죽..?

-------------------------------------
# font - face=""
필기체같은 적는 스타일..?도 조절 가능하다
<font face="궁서체">Hyaper Text Markup Language</font>
<font face="Comic Sans MS">Cascading Style Sheet</font>
<font face="굴림체">JavaScript</font>

ㄴ Cominc Sans MS 는 만화책 번역을 하는데
이 폰트로 써서 그림을 막 가려서 외국인들이
싫어한다고 들었던것같다. 여튼 싫어하는 글씨체라함

Hyaper Text Markup Language
Cascading Style Sheet
JavaScript

이렇게 글씨체가 울퉁불퉁!

--------------------------------------
물론 이렇게 사용했으니
여러 '속성' 들을 조합하여 사용이 가능하다
그리고 이 속성들을 구분하기 위해 띄어쓰기로 구분한다
단, 작성 순서는 관계가 없다

<font color="red" size="5" face="맑은고딕">HTML</font>
		<font face="바탕체" color="magenta" size="2">CSS</font>

HTML
CSS

Anchor : a

갈고리라는 의미

a태그는 다른 페이지에 링크를 거는 태그(중요)

일단 '응응' 이라는 웹콘텐츠하위 소스가 있다고치면
<p>응응</p> 라고 적은 글을
글에서 링크로 변환하고 싶을 때
<p><a href="응응.html">응응</a></p>
라고 적어주면 응응으로 이동하는 링크가 걸린다

지금의 방법은 하나의 프로젝트 안에서 실행되어
간단하게 주소가 짧지만

외부의 페이지도 링크가 가능하다

*네이버
<a href="https://www.naver.com/">네이버</a>

*유튜브
<a href="https://www.youtube.com/">
  <button>유튜브</button>
</a>

  
그리고 현재페이지에서 열리는 방법 말고
새 페이지에서 열리게 하려면
뒤에 속성을 또 써준다  

<a href="https://naver.com/" target="_blank">네이버</a>

*네이버
네이버

*유튜브

유튜브

-- 새로운 페이지 열기 ↓
네이버

List : ul, ol, li

목록을 작성하는 태그
: ul, ol

ul : Unordered List, 순서없는 리스트
ol : Ordered List, 순서있는 리스트
li : List, 실제 목록을 구성

Front-End
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>
ㄴ JS는 스크립트

Back-End
<ol>
  <li>JSP</li>
  <li>ASP</li>
  <li>Python</li>
  <li>PHP</li>
</ol>
ㄴ PHP 빽엔드에서 쓰는 스크립트 언어임

+ ol 의 속성

"" 에서 컨트롤 스페이스를 눌리면 쓸 수 있는 목록이 나온다

<ol>
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>

----------------------------------------------------------------------------

<ol type="1"> <!-- type은 항목의 형태를 지정, 1이 기본값임-->
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>


<ol type="a"> <!-- 영소문자 항목-->
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>


<ol type="A"> <!-- 영대문자 항목-->
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>


<ol type="i"> <!-- 로마숫자(소)-->
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>


<ol type="I"> <!-- 로마숫자(대)-->
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>


<ol type="1" reversed>
  <!-- 값 없이 이름만으로 동작하는 reversed 속성 / 항목을 역순으로 출력-->
  <li>C Lang</li>
  <li>C++</li>
  <li>C#</li>
  <li>Java</li>
  <li>Python</li>
</ol>

C Lang
C++
C#
Java
Python

C Lang
C++
C#
Java
Python

C Lang
C++
C#
Java
Python

C Lang
C++
C#
Java
Python

C Lang
C++
C#
Java
Python

C Lang
C++
C#
Java
Python

위의 코드들과 순서대로 확인해보면 된다.
그냥 이런거구나~ 하고 넘어가기~

+ 중첩 리스트

리스트안에 리스트 작성

<ul>
  <li>Programming</li>
  	<ul>
    	<li>C Lang</li>
    	<li>Python</li>
    	<li>Java</li>
    	<li>C++</li>
 	 </ul>

  <li>System</li>
  	<ol>
    	<li>Windows</li>
    	<li>Unix</li>
    	<li>Linux</li>
    	<li>Mac</li>
  	</ol>
  
  <li>Network</li>
  	<ol reversed>
    	<li>Application</li>
    	<li>Presentation</li>
    	<li>Session</li>
    	<li>Transport</li>
    	<li>Network</li>
    	<li>Data-Link</li>
    	<li>Physical</li>
  	</ol>
</ul>

ㄴ 이렇게 세가지 파트를 다 알면 다 아는거라 할 수 있음

ㄴ 그리고 리스트 안에 리스트를 쓰면
○ 와 ● 가 순서대로 섞여서 출력됨
밑에 코드 참조

Programming

C Lang
Python
Java
C++

System

Windows
Unix
Linux
Mac

Network

Application
Presentation
Session
Transport
Network
Data-Link
Physical

image : img

이미지를 출력하는 태그

이미지는 따로 폴더를 생성해준다
위치는 WebContent 안에 생성해주고
원하는 이미지를 임폴트 하는 방법은
그냥 폴더 프로젝트에다가 끌어다가 옮기면
오나전임
			    ↓ 끌어서 import한 파일
<img src="img/4달.jpg">
  만든 폴더 ↑ 

------------------------------------------------------
------------------------------------------------------

<img src="img/4달.jpg" width="250">
width : 너비를 조절 / 높이도 비율맞게 자동조절됨 wow
------------------------------------------------------
<img src="img/4달.jpg" height="150">
height : 높이를 조절 / 너비도 비율 맞게 자동 조절됨 wow x2
------------------------------------------------------
<img src="img/4달.jpg" width="200" height="200">
둘 다 같이 줄 수 있지만
비율이 깨질 우려가 있어 권장하진 않는다
------------------------------------------------------
+ 이미지가 없을 때 표시할 수 있는 구문
<img src="img/4달.jpg" alt="없는 이미지">
------------------------------------------------------
+ 이미지 위에 마우스 올리면 글자 나옴/ 툴팁
<img src="img/4달.jpg" title="4달 입니다">
ㄴ 44달 입니다 가 툴팁으로 보임
------------------------------------------------------
+ 툴팁과 링크를 이미지에 함께 걸어서 사용
<a href="https://www.naver.com/">
  <img src="img/4달.jpg" title="클리시 네이버로">
</a>

이번건 이미지를 ..좀 써야해서 귀찮아서 패스임
어떤 느낌일까 상상해보시길!

로고 제작

뺵엔드의 영역은 아니지만 알아두면 좋을법해서 작성해둠

<title> o0o.html</title>
타이틀 뒤에 적어줌

<style>
.img {animation: rotate_image 6s linear infinite;transform-origin: 50% 50%;}

@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}
<!-- https://hongpage.kr/44   // CSS기능을 지원하지 않아서 자동완성 없으니 힘들다구함 -->


<!-- 그리고 style 안에 6s를 0.1s로 바꾸면 엄청 빨리 돌아감 -->


	p {
	display: flex;
	hustify-content:center;
	
	}
	<!-- 가운데 정렬하는 방법 옵션인데 CSS -->

</style>