23.2.23 학습 일지

Hyper Text Markup Lang.
Hyper Text = link
Markup Lang = tag
tag를 통해서 구조(디자인)을 표현

쓰는 이유-> 인터넷상에서 문서 공개하기 위함

html 공개되는 과정

1.html작성
2.클라이언트가 웹 페이지 요청
3.웹 서버(html을 공개해주는)가 .html파일 검색
4.html스트림이 브라우저에 반환
5. 브라우저가 html을 처리

브라우저
1. 웹서버에게 공개 요청하는 것
2. html렌더링 하는 것

클라이언트           url                                  서버
(브라우저)            http://www.~~/*.html         웹서버

렌더링 *.html                                                   .html

url구분

http:// ->protocol(전송규약 : hyper-text transfer protocol)
www.daum.net ->도메인-구매해야돼서 대신 (ip) 사용
/*.html -> 경로명 + 문서명
--> "경로에 있는 문서를 전송규약에 따라 가져와줘"
웹서버를 구축하여야 브라우저 공개(=보안을 푼다,해제한다)(html 데이터 가져올 수 있다)가 된다.
서버류는 백신이 없고 방화벽있다

웹서버 구축방법

1. jdk - 자바 개발 도구 (깔아야 2번 사용 가능, 2개가 한 세트)
   -oracle (설치 -> 환경변수 설정(JAVA_HOME -> C:\Program Files\Java\jdk-11.0.17 : 새로 생성)
   PATH -> 자바 실행 파일 경로(C:\Program Files\Java\jdk-11.0.17\bin) : 편집-새로 만들기
   cmd에서 java -version치면 jdk 버전 알려줌
   • echo %~~% -> 자기가 환경 변수에서 설정한 경로 나옴
2. apache-tomcat 웹서버 사용

   실행 방법
시작 - bin(실행파일 모이는 곳) -> catalina.bat(실행파일) ->
cmd에서 cd C:\html\apache-tomcat-9.0.71\bin -> catalina.bat(예시이지 다른 실행파일도 가능) -> catalina.bat run(실행) 차례대로 쓰기 -> 웹사이트를 브라우저를 통해 호출
아이피(or localhost):8080/ex01.html -> (남의 아이피를 알면 볼 수 있다) :8080 = 포트
ex> 아이피는 아파트 동/ 포트는 아파트 호수
http / https 다름

종료 - ctrl + c
cd(change directory)

-> cmd에서 run을 눌러 실행을 하고 고유 아이피를 브라우저 url에 치고 들어가면 브라우저가 공개된다. cmd에서 종료를 누르고 브라우저에서 새로고침을 하면 다시 비공개상태(연결끊김)이 된다.

(톰캣기준_) - webapps-ROOT에 넣어두고 url에 치면 보여진다.

아이피(Internet Protocol : 인터넷 전송규약)

ipconfig 명령 프롬포트에 입력하기
IPv4 주소(v4=버전4) - 자기 아이피(외부공개용아이피) (ex> 강의실 아이피 192.168.0.23)
(0~255.0~255.0~255.0~255) - 이 사이에서 정해서 만들기 약속
-> ipv4로도 너무 부족해져서 ipv6등장
(ex> IPv6 주소 . . . . : fe80::985:da15:d374:7bb3%5)

127.0.0.1(localhost) -> loop back(점검용 아이피)

html 기능

cellpadding="숫자" = 글씨와 칸 사이가 숫자만큼 여백추가
cellspacing="숫자" = 셀과 셀 사이 간격이 숫자만큼 증가

table = 표 or Layout 표현 -> 요즘은 div + css가지고 레이아웃 표현
table도 중첩이 가능하다. ex> td안에 table-tr-td형식을 다시 중첩해서 넣어주면 된다.

색
배경색(background)
전경색(foreground) = 글자색


사용 방법
알려진 이름으로 표현(red, green, ...) or 16진수 사용(R(0~255)G(0~255)B(0~255))
bgcolor="16진수or알려진 색 이름" = 그 색깔 배경이 나온다. -> 어디다 쓰냐에 다름(행, 열, 전체를 조정할 수 있다.)


이미지
background="이미지경로"

파일 경로 필요함
-절대 경로 : 드라이브명부터 출발 ~~ 작업 파일 경로까지 쓰는 것
ex> C:\html\apache-tomcat-9.0.71\webapps\ROOT\images\tomcat.png

-상대 경로 : 작업 위치~ 작업 파일의 경로까지 쓰는 것(더 많이 쓰임)
. = 현재
.. = 부모
ex>./images/tomcat.png
색과 마찬가지로 어디에 쓰냐에 다르게 조정할 수 있다.

-웹 경로 : 웹에서 복사하고 링크를 붙여넣는 것

이미지 형식
jpg : 사진
gif : 아이콘
=>요즘은 png 많이 씀

hyper text = link

<a href="연결문서명">링크문구</a> -> 연결 문서명에 링크 넣으면 해당 링크로 이동

• 링크문구에 이미지를 넣어도 가능하다(클릭하면 해당 링크로 가진다)
  연결문서명에 이미지를 넣기도 가능함(클릭하면 해당 이미지로 가진다)
  다양한 주소들을 활용하여 넣기 가능하다
  경로는 : 절대경로(잘 안씀) or 상대경로 or 웹경로 사용 가능
  이미지, 텍스트 파일은 브라우저에서 뷰어된다.(보여준다)
  하지만 7z,zip같은 브라우저가 모르는? 파일들은 다운로드가 된다.

  tip - https://search.daum.net/search?~~~~~~~q=covid : search뒤에 오는 것들을 쿼리라고 하는데 를 제외하고 q=검색할것 을 하면 검색창이 뜬다.(다음은 q 네이버는 query 등 차이는 있음) 어디든 search~? 부터 q까지의 내용을 지워도 무방하다.

<a href="연결문서명" target="_blank">링크문구</a> ->해당 링크를 새창을 열어서 보여줌

<a href="연결문서명" target="특정변수">링크문구</a>

<iframe name="특정변수"~~	>  -->특정변수를 지정하여 (집에서검색해보기)

아이프레임 - 페이지에서 부분적으로 다른 페이지를 보여주는 것(아이프레임에 방어되는 곳은 보이지 않음)

ex> <iframe src="링크or파일" iframeborder="0"></iframe>

iframeborder은 표 테두리처럼 테두리 표시하는 것(0은 없애는 것)

html입력 기능

<form>
        <!-- 한 줄 입력-->
        <input type="text" /><br>
        <!-- size = 칸 크기, maxlength= 글자수 value = 변수넣기 
            readonly(없어지지 않는 벨류), placeolder = 누르면 지워지는 글자들 -->
        <input type="text" size="50" /><br>
        <input type="text" size="50" maxlength="20" /><br>
        <input type="text" value="초기값"/><br>
        <input type="text" value="초기값" readonly/><br>
        <input type="text" value="초기값" placeholder="값입력"/><br>

        <!-- 비밀번호 입력(암호화x 숨김표시) -->
        <input type="password"/><br>  

        <!-- 여러줄 입력 textarea는 rows/cols만큼의 창구역 생성
        rows/cols는 어제 배운 rowspan/colspan이랑 비슷 -->
        <textarea rows="5" cols="50"></textarea><br><br>
        <textarea rows="5" cols="50">초기값</textarea><br><br>
        <textarea rows="5" cols="50" placeholder="값입력"></textarea><br><br>
    </form>

    <form>
        <!-- 체크할 수 있는 박스 생성 checked 쓸 경우 체크되어있음-->
        <!-- checkbox는 다중선택 -->
        <input type="checkbox" />사과<br>
        <input type="checkbox" checked/>딸기<br>

        <!-- radio 단일선택이지만 그냥으론 안되고 name으로 해서 써야한다. -->
        <input type="radio" name="rad1o" />사과<br>
        <input type="radio" name="rad1o" checked/>딸기<br>

        <!-- 옵션 선택하기 selected를 쓰면 해당 변수가 선택 됨 -->
        <select>
            <option selected>사과</option>
            <option>수박</option>
        </select>
    </form>

      <form>
       <!-- 파일 업로드 -->
       <input type="file" /><br><br>

       <!-- 색상 선택 -->
       <input type="color" value="#ff00ff" /><br><br>

       <!-- 날짜 선택 -->
       <input type="date" value="2023-02-23"><br><br>

       <!-- 숫자 선택 mix/max = 최소/최대 한계값 지정, value=초기값 
           step=증가량, range는 게이지바로 나온다. -->
       <input type="number"><br><br>
       <input type="number" min="0" max="10" value="5"><br><br>
       <input type="number" min="0" max="10" step="2" value="5"><br><br>

       <input type="range" min="0" max="10"> <br><br>
   </form>

<form>
        <!-- 체크박스에 제시어 리스트 나열, label을 쓰면 보충 설명 가능 -->
        <input type="text" list="browsers">
        <datalist id="browsers">
            <option value="Internet Explorer" label="인터넷 익스플로어"></option>
            <option value="FireFox" label="파이어폭스"></option>
            <option value="Chrome" label="크롬"></option>
            <option value="Safari" label="사파리"></option>
            <option value="Opera" label="오페라"></option>
        </datalist>
    </form>

<form>
        <!-- fieldset = 필드 지정해줌, legend 필드 안을 명시할 수 있는 표시할 때
        label은 목차 정리할 때도 쓰임, id와 for에 같은 변수를 주고 사용 가능 -->
        <fieldset>
            <legend>정보 설정</legend>
        <ul>
            <li>
                <label for="name">이름</label>
                <input type="text" id="name"><br>
            </li>
            <li>
                <label for="email">이메일</label>
                <input type="text" id="email">
            </li>
        </ul>
        </fieldset>
    </form>

html 전송 기능

전송 : 데이터를 처리될 페이지 이동
get - url상에 데이터가 보여지는 방식(https://search.daum.net/search?w=tot&DA=YZR&t__nil_searchbox=btn&sug=&sugo=&sq=&o=&q=covid-19) ?이하의 것들이 get방식
post - 전송 header 포함해서 보내는 방식(전송 데이터가 눈에 안 보임)
update(x)
delete(x)

ex> 
https://search.daum.net/**search** (=url : 처리 될 페이지)(키,값들이 search 안에 들어가 가공을 하는 것)
? (= url/query 나누는 방식 query 이하것들이 보이면 get방식 안 보이면(숨겨져있으면) post방식)
w=tot( = 키(값을 저장하는 상자)=값) (EX> w라는 상자에 tot가 들어가있다고 생각)
& (키와 값을 쌍으로 나누는 단위)
DA=YZR (DY가 키고 YZR이 값이겠지? 마찬가지로 DY안에 YZR이 들어가있다)
&
t__nil_searchbox=btn
&
sug=
&
sugo=
&
sq=
&
o=
&
q=covid-19

<!-- action=처리되어야할것, method는 전송방식선택 
        아디 비번 입력 후 전송하기 -->
    <form action="proc.html" method="post">
        아이디 <input type="text" name="id"><br>
        비밀번호 <input type="password" name="password"><br>
        <input type="submit" value="전송하기">
    </form>

ex> 아이디 비밀번호 입력하는 홈페이지일때 query의 키 값들이 proc.html에 값들을 전송한다고 생각하자

http://192.168.0.23:8080/proc.html
?
id=11
&
password=22

 <form action="https://search.naver.com/search.naver" method="get">
        검색어<input type="text" name="query">
        <input type="submit" value="네이버 검색">
    </form>
    <hr>
    <form action="https://search.daum.net/search" method="get">
        검색어<input type="text" name="q">
        <input type="submit" value="다음 검색">
    </form>

    <form action="https://www.google.com/search?" method="get">
        검색어<input type="text" name="q">
        <input type="submit" value="구글 검색">
    </form>

-->검색 누르면 해당 사이트 검색 페이지로 이동한다.

video 기능

controls를 넣지 않으면 동영상 재생 컨트롤러가 나오지 않아 이미지 형식으로만 보일 수 있음에 주의,<br>
autoplay를 넣으면 자동재생이 되나 현재는 지원이 잘 안 됨
<video width="320" height="240" controls>
        <source src="./videos/mov_bbb.mp4" type="video/mp4">
        <source src="./videos/mov_bbb.ogg" type="video/ogg">
        Your Browsers does not support the video tag.
    </video>

html 그림 그리는 기능

1.svg(태그로 만들기) - Scalable Vector Graphics
2.canvas + javascript(프로그램으로 만들기)

 <!-- svg 영역 지정 -> 폭 넓이 지정 -> 원하는 도형과 그에 맞는
    공식 써서 만들기, fill - 색깔 채우기, stroke - 외각선, stroke-width=외각선 굵기 -->
    <svg width="500" height="200">
        <rect x="10" y="10" width="400" height="100" fill="yellow" stroke="green"
         stroke-width="4">
    </svg>
    <svg width="500" height="200">
        <circle cx="50" cy="50" r="40" width="400" height="100" fill="white"
         stroke="green" stroke-width="4">
    </svg>