day01[web,tomcat설치,html요소]

■서버 : 서비스+er, 서비스를 제공해주는 것

■서버와 클라이언트
클라이언트 : 서버에게 요청하는 대상
서버 : 요청받은 서비스를 응답해주는 대상

■웹(Web)
요청과 응답이 일어나는 장소.

■웹개발자
: 웹을 개발하는 사람X
: 웹(안, 상)에서 개발하는 사람

■웹 브라우저(Web Broswer(창구))
사용자의 요청에 맞는 주소로 찾아가서 인터넷 컨텐츠(문서와 그림, 멀티미디어 파일 등)를
검색 및 열람 후 사용자에게 응답하기 위한 응용 프로그램의 총칭이다.
주요 웹 브라우저로는 모질라 파이어폭스, 구글 크럼, 인터넷 익스플로러, 마이크로소프트 엣지,  오페라, 사파리 등이 있다.

■프로토콜(protocol) : 통신규약
사람끼리 소통할 때 서로 이해할 수 있는 공용어를 사용해야 하듯이 
컴퓨터끼리도 공용어를 사용해야 한다.
이러한 공용어를 원활하게 통신하기 위해서 필요한 규약을 프로토콜이라고 한다.
사용자의 요청에 반드시 응답하도록 약속한다.

■요청에 대해 응답하는 방식이 다름
-http://(HyperText Transfer Protocol)(무료/암호화)
클라이언트와 서버 간의 웹 페이지 등의 자원을 통신하는 규약
텍스트로 통신하기 때문에 가로채어 본다면 누구든 내용을 볼 수 있다.

-https://(HyperText Transfer Protocol Secure Socket)
SSL(Secure Socket Layer) 프로토콜을 이용하여 자원을 공개키 암호화 방식으로
암호화해서 통신하는 규약
미국 금융쪽에서 이걸 안 쓰면 불법

■IP(Internet Protocol)
사람이 태어나면 출생신고를 하고 고유번호인 주민번호를 발급받는다.
이를 통해 서로를 구분하듯이 네트워크 상에서 인터넷에 접속할 때 다른 컴퓨터와
구별될 수 있도록 하는 고유번호를 IP주소라고 한다.
클라이언트가 찾아갈 서버의 고유한 값, 컴퓨터가 컴퓨터를 찾을 때 쓰는 고유한 값.

■도메인(Domain)
IP 주소는 기억하고 이해하기 힘들기 때문에 이를 위해서 이름을 부여할 수 있도록 한 것.
도메인을 통해 IP 주소를 검색할 수 있다.

아이피 주소로 직접 접근하면 연산이 필요한 부부이 제외되거나 프로토콜이 적용되지 않을 수 있기 때문에 
반드시 도메인을 통해 사이트에 접근하기로 한다.

■DNS : DomainNameService

■WWW(World Wide Web)
인터넷에 연결된 전 세계 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 정보 공간

■W3C(더블유삼씨)
WWW를 위한 표준을 제정하고 관리하는 중립적인 기관이다.
--------------------------------------------------------------------
■웹 접근성
모든 사용자가 신체적, 환경적 조건에 관계 없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 의미한다.
마우스가 없는 환경이나 키보드만을 조작해야 할 경우, 신체적 장애로 인해 특수한 환경 하에
접속을 해야 되는 경우, 브라우저별, 모바일 환경에서 접속해야 되는 경우와 같이 
다양한 플랫폼에서도 정보 제공에 다름이 없어야 한다는 것이다.
차별없이(장애가 있어도) 모든 사람이 웹에 접근할 수 있어야 함.

■웹 표준(Web Standard)
웹에서 표준으로 사용되는 기술이나 규칙을 의미하며, 이는 특정 브라우저에서만 사용되는
비표준화된 기술을 배제하고 W3C의 토론을 통해서 나온 권고안을 사용하는 것을 말한다.
웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.

1. HTML(Hypertext Markup Language) //내용
웹 페이지에서 다른 페이지로 이동할 수 있도록 해주는 마크업 언어이다.
마크업 언어란 태그 방법 체계를 의미하며, 태그 등을 이용하여 
문서나 데이터의 구조를 기술하는 언어이다.
프로그래밍 언어X, 스크립트 언어, 마크업 언어

2. CSS(Cascading Style Sheets) //디자인
구체적으로 어떤 스타일로 요소가 표시되는 지를 정하는 규격이다.
HTML은 문서를 구조화(레이아웃)하는 것 뿐만 아니라 꾸미기도 할 수 있지만,
동일한 디자인을 사용한 문서가 여러 개 있다면, 변경 시 모두 하나씩 수정해야 한다.
따라서 CSS는 이런 문제를 해결함과 동시에 웹 페이지에서 내용과 스타일을 분리하고
역할도 분리해준다.

3. JS(JavaScript) //연산
화면 쪽에서 연산이 가능한 스크립트 언어이다.
사용자의 다양한 이벤트 처리, 비동기 통신 등을 자유롭게 사용할 수 있다.
HTML안에서 태그형태로 JS를 사용할 수도 있으며, 외부 파일로 제작 후
포함시켜 사용할 수도 있다. 유효성 검사, 통신 등을 담당한다.

4. XHTML(Extensible HTML)
기존에 사용되던 HTML 규격이 가진 문제점을 극복하고 보다 다양한 분야에 응용될 수 있도록
해주는 여러가지 확장된 기능을 포함한다. 하지만 XML기반으로 만들어졌기 때문에
지원되지 않는 브라우저도 있다. 따라서 HTML과 XHTML은 사실상 큰 차이 없이 사용된다.

5. XML(Extensible Markup Language) // 본 목적 : 데이터 전달
어떠한 데이터를 설명하기 위해서 임의로 지은 태그로 데이터를 감싼다.
태그로 데이터를 설명하며, 이것이 데이터의 표시(Markup)가 되고 추가적인 데이터가 생기면
태그 추가와 태그 내부 내용 추가를 할 수 있다. 따라서 데이터 전달에 목적이 있다.
사용자 정의 태그(사용자가 직접 만듦, 사용자가 선언한 변수기 때문에)
(JSON)

---------------------------------------------------------------------------
■크롤링 > 자바보다 파이썬이 속도가 훨씬 빠름 > JS의 이해를 돕기 위해 배운다.
HTML:Eclipse로 실습
CSS:VScode로 실습
SPRING BOOT 배울 것임. 최신버전으로 서버 설정할 필요없음.

1) C:\apache-tomcat-9.0.56\bin\startup.bat 실행
   1) startup.bat가 실행되지 않는 경우
      환경변수 > JAVA_HOME 변수에 jdk경로 선언 > Path에 JAVA_HOME\bin 등록
   2) 그래도 실행되지 않는 경우
      환경변수 > CATALINA_HOME 변수에 tomcat경로 선언 > PAth에 CATALINA_HOME\bin 등록
   3) localhost:포트번호 입력 시 고양이가 안나오는 경우
      C:\apache-tomcat-9.0.56\config\server.xml에서 주석이 해제되어 있는 Connection태그에
      port번호를 다른 번호로 변경 8081~

■ eclipse와 톰캣 연동
   perspective는 JAVAEE(default)로 설정
   > window > preferences > server 검색 > Server and Runtime > Tomcat v9.0 Server 선택 > Apply
   > Runtime Environments > Add 클릭 > Apache Tomcat 9.0 선택 > Next > Tomcat installation directory
   > C:\apache-tomcat-9.0.65 > Apply and Close
   > Server 탭에서 "No .... " 링크 클릭 > Tomcat 9.0으로 선택 후 Finish
   > 등록한 Tomcat 서버 클릭 후 우측 재생 버튼 클릭

-------------------------------------------------------------------------
■project 만들기
Dynamic Web Project(동적)

클라이언트 -> 요청(Request)
응답(Response) <- 웹서버(정적,동적 판단)
                                  (동적데이터의 경우)
                                   연산필요하면 웹 컨테이너(java)
                                                  ⇔ DB조회

 

웹 서버(APACHE), 웹 컨테이너 통채로 관리 => WAS(TOMCAT) 중간관리자

연산없으면; 정적데이터 >> 바로 응답
연산 필요, DB조회 필요하면; 동적데이터
동적데이터, 정적데이터 구분해주는 애 > 웹 서버


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

■HTML의 요소

<p>	You are Better	</p>
(1)	(2)	(3)

(1) 여는 태그(Opening tag) : 요소의 이름(p)과 열고 닫는 꺽쇠 괄호로 구성된다.
(2) 닫는 태그(Closing tag) : 요소의 이름 앞에 슬래시(/)가 있다.
(3) 내용(Content) : 요소의 내용이며, 단순한 텍스트를 의미한다.

(1), (2), (3)를 통틀처 요소(Element)라고 한다.
요소(태그)의 이름은 대소문자를 구분하지 않지만 가독성에 있어서 소문자로만 작성하는 것을 권장한다(XHTML).

■HTML 주석
<!-- 주석 --> : Ctrl + Shift + /

■속성(Attributes)
요소(태그)는 속성을 가질 수 있다.

<p class="conversation"> You are much better </p>

속성은 요소에 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다.
특히 id와 class 속성은 스타일에 관련된 내용이나 기타 연산 등의 내용을 위해
해당 태그를 찾을 수 있는 구분점 역할을 수행한다.

- 속성 사용 시 주의사항
1. 태그 이름 다음에 오는 속성은 태그 이름과 속성 사이에 공백이 있어야 하고,
    여러 속성이 있을 경우에는 속성 사이에도 공백이 있어야 한다.
   <p id="p1" class="pGroup"> You are much better </p>

2. 속성 이름 다음에는 등호(=)를 작성한다.
3. 속성 값은 따옴표 안에 작성한다(따옴표는 생략하여도 된다).

■내포된 요소(Nesting elements)
요소 안에 다른 요소를 넣는 기법
해당 부분에 다른 스타일 또는 다른 연산, 레이아웃 등을 적용하고자 할 때 사용한다.

<p>You are <strong>much</strong> better</p>

■HTML 주의사항
1.HTML은 대소문자를 구분하지 않지만 되도록 소문자로 작성한다.
2.속성의 값은 따옴표를 사용하지 않아도 되는 경우가 있지만,
   띄어쓰기가 있을 경우 반드시 따옴표를 작성한다.
3.HTML에서 작은 따옴표와 큰 따옴표는 둘 다 같은 의미이다.
-------------------------------------------------------------------------
■<h>태그
제목을 표현할 수 있는 다양한 글자 크기의 태그이다.
가장 큰 <h1> 태그부터 <h6> 태그까지 다양한 크기로 제목을 표현할 수 있다.

■<p> 태그
글 단락 태그
단락이란, 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하고, 문단이라고 부른다.
<p> 태그를 이용하면 이러한 단락을 표현한다.

■서식 태그
▶ <strong>, <b> 태그; strong 사용하기
두 태그의 표현은 동일하지만 사용 용도가 다르다.
<b> 태그는 단순히 텍스트를 진하게 표시하는 역할을 하지만,
<strong> 태그는 강조 뿐만 아니라 실제 페이지 내에서 중요한 부분을 부라우저에게 알려주는 역할을 한다. 
브라우저에서 웹 접근성으로 인식되며, 스크린 리터로 페이지를 읽을 때 거센 억양으로 음을 낼 수 있도록 강조한다.

▶ <i>, <em> 태그 : 글씨 기울이기; em 사용하기
<i> 태그는 단순히 화면의 텍스트를 이태릭채로 표현해주지만,
<em> 태그는 그 내용이 중요하다는 의미도 함께 포함해준다.

▶ <mark> 태그
텍스트 하이라이팅 효과

▶ <del> 태그
텍스트 중앙에 가로 줄을 그어서 텍스트를 지운 것과 같은 효과

▶ <ins> 태그
텍스트 밑에 선을 추가하여 텍스트 강조 효과

▶ <sup>, <sub> 태그
위 첨자(2²), 아래 첨자(H₂O)

▶ <q> 태그
"" 표현


■내용을 명령어로 인식하지 못하도록 하는 문법

< : &lt; (less than)
> : &gt; (greater than)
& : &amp; (ampersand)
" : &quot; (quotation)
공백 : &nbsp;

■리스트 태그

1. 순서 없는 리스트
<ul>태그 안에 <li>태그 사용

ul : unordered list
li : li

<ul>
      <li>텍스트1</li>
      <li>텍스트2</li>
      <li>텍스트3</li>
</ul>

2. 순서 있는 리스트
<ol>태그 안에 <li>태그 사용

ol : ordered list
li : list

<ol type="" start="">
      <li>텍스트1</li>
      <li>텍스트2</li>
      <li>텍스트3</li>
</ol>

■type 값의 종류
1 : 숫자(1, 2, 3, ...)
A : 알파벳 대문자
a : 알파벳 소문자
i(소문자 i) : 로마 숫자(ⅰ, ⅱ, ⅲ, ...)
I(대문자 I) : 로마 숫자(Ⅰ, Ⅱ, Ⅲ, ...)

■ul과 li의 공통 속성
style="list-style: (ex.square, disc,....)";
default: 까만 동그라미

 value 속성에 원하는 값을 입력하면 해당 서수에 맞추어 출력된다. 

■링크 태그(Link)
현재 페이지에서 다른 페이지로 이동하고자 할 때 하이퍼링크를 사용한다.
보통 링크라고 부르며, <a>태그를 사용한다.

<a href="" target="">링크를 걸어줄 내용</a>

- href : 페이지의 경로, 사이트 주소
- target : _blank(새 창이나 새 탭), _self(현재 창), _parent(부모 창)

■테이블(table)
여러 종류의 데이터가 행과 열로 정리된 표

<table> : 테이블 생성 시 사용하는 태그
<tr> : 행
<th>, <td> : 열
th: 컬럼명, 굵게 

■병합
colspan = "합칠 열 개수"
좌에서 우로 합쳐지고 현재 행에만 적용

rowspan = "합칠 행 개수"
현재 행과 아래 행이 합쳐지고 다음 행이 업다면 적용 안됨.

■a태그 책갈피
<p><a id="menu">메뉴</p> //책갈피 표시한 곳
<p><a href="#menu">메뉴로 이동</p> //id로 바로 이동
올라가는 애니메이션을 주려면 JS사용

-------------------------------------------------------------------------
■HTML 요소의 종류(★)

▶ 블록 요소
- p, h, ul, ol, div, form, ...등
- 웹 페이지 상에 블록(영역)을 만드는 요소
- 코드 상에 한 줄로 이어 써도 화면 상에서는 앞 뒤 요소 사이에 새로운 줄을 만들어서 나타난다.
- <p>apple</p><p>banana</p> => 2줄이 생김.
- 영역이 정확히 구분되어 있기 때문에, width(넓이)와 height(높이) 속성을 수정할 수 있다. 
- margin-top, margin-bottom 속성도 잘 적용된다(바깥 여백 상하)
- padding-top, padding-bottom 속성도 잘 적용된다(안쪽 여백 상하)

자동으로 줄바꿈이 됨. 영역이 한 줄을 차지함.
margin 바깥쪽여백
padding 안쪽여백

- div 태그(묶기 위해 사용)
1. 다른 html요소들을 하나로 묶는 데 사용되는 대표적인 블록 요소이다.
2. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 div 태그를 사용한다.

▶ 인라인 요소
- span, a, img, strong, em, ...등
- 새로운 줄을 만들지 않고 작성한 단락 내에 나타난다.
- 안에 있는 내용 만큼만 영역을 차지한다.
- <em>apple</em><span>banana</span> => 1줄
- 영역이 불분명하기 때문에 width와 height를 임의로 부여할 수 없다. 
- margin-top, margin-bottom 속성도 부여할 수 없다(바깥 여백 상하)
- padding-top, padding-bottom 속성도 부여할 수 없다(안쪽 여백 상하)

이어서 나옴. 안에 있는 내용만큼만 영역잡음.

- span 태그(묶기 위해 사용)
1. 텍스트의 특정 부분을 묶는 데 자주 사용되는 요소이다.
2. 주로 텍스트의 특정 부분에 따로 다른 스타일을 적용하기 위해 사용한다.

▶ 인라인 블록 요소
- button, input, select, ...
- inline 요소와 동일한 영역(내용만큼)을 가지지만 width와 height를 설정할 수 있다.
- margin-top, margin-bottom 속성도 잘 적용된다(바깥 여백 상하)
- padding-top, padding-bottom 속성도 잘 적용된다(안쪽 여백 상하)
인라인의 특징(이어서 나옴)을 가지고 있으면서 블록처럼 영역을 구분할 수 있음. 


■두 개의 div를 50%로 이어서 붙이고 싶을 때, 전체 100% div로 묶어서 다른 여백의 영향을 받지 않게 한다.
inline-block요소는 이어서 표현할 때 사이에 공백이 들어가므로 딱 붙지 못한다.
float 속성을 사용하여 빈 공간을 모두 채우도록 했다.
태그에 float 속성을 준 뒤 원하는 배치 방향을 전달해주면, 해당 방향으로 위치가 고정된다.(left or right)

■바꿔주고 싶은 영역에 style="" 사용해서 필요한 내용 넣어주면 됨. 값은 :으로 나타내고 ;으로 구분한다.
style="display: inline-block; //인라인 블록 요소로 변경
background: red(or #bb1919); //배경색 
color: yellow; //글자 색
width: 50%; //넓이(px 대신 %로 하면 화면 비율로 사이즈 결정)
height: 50%; //높이
text-align: center; //가운데 정렬
float: left; //왼쪽으로 고정
line-height: 13; //수직 높이 
border: 1px solid rgba(0,0,0,0.15)" //테두리

■이미지 파일; 홈페이지 개발자 모드에서 주소로 받을 수 있음.
<img src="이미지 주소">

■float 대신 style="display: flex" 사용하면 화면 비율에 맞게 조정됨.
float의 영향을 받지 않으려면 style="clear: both;" 사용.
float는 좌우(left, right) 둘 중 하나만 사용해도 됨.

border-style도 여러가지이므로 골라서 할 수 있음.