Web HTML

 

World Wide Web = WEB

W3C : 웹 표준단체

MarkUp언어 : 태그로 구성된 언어 (SGML)

SGML의 subset(XML 데이터 구조화, HTML 데이터 표현)

 

 

CS프로그램 

단점 : client와 server각각 관리

장점: 프로토콜을 알고 있는 client만 결과를 가져갈 수 있다. 보안 안전. 웹에 비해 처리속도 빠름.

ex) 금융

 

 

웹의 기본 표준 프로토콜 : HTTP (기본포트 80)

웹의 기본 표준언어 : HTML 

device형태에서 보일 수 있다 => N.screen (저성능/고성능 가능)

네트워크 연결되어 있지 않아도 웹브라우저만 있으면 실행 가능

유지 보수 차원에서 Webserver하나만 관리

 

 

Servlet / JSP 동적프로그램

정적 프로그래밍 : HTML/ CSS/ JS (바뀌는 내용 없음)

XML (eXtensible Markup Language)

: 데이터를 어떻게 구조화 할 것인가

시작 태그가 있으면 끝 태그가 있어야 함. 루트태그가 열리고 닫혀야함.

 

1) 구조화하기

2) 구조화된 데이터를 처리하기

 

HTML : 표현하기

 

버전 히스토리

문서 유형이 html임을 엔진에 알려야 함.

 

 

ctrl + / : 코멘트

 

데이터를 쉽게 구조화 하기 위한 태그 : <thead> , <tfoot>

 

웹브라우저 내부에 엔진이 있음.

Browser engine : HTML태그, CSS문법 분석 후 DOM(자료구조)를 만들어 냄.

JavaScript Interpreter : JS 문법 처리

 

 

 

 

 

 

VS code에서 작성중일때 위에 표시한 모양이 떠있는데, 저장이 안된 상태이며 저장하면 저 표시가 사라짐.!

 

 

 

 

<p> : 텍스트 단락

<em> 이탤릭체

<strong> 굵은 글씨로 강조

<b> 굵은 글

<br> 줄 바꿈 기능. 닫는 태그 없음.

<hr> 가로줄을 넣어줌. 닫는 태그 없음.

 

 

<ol> : ordered list로 순서가 있는 목록. 1,2,3,4~

 숫자가 아닌 a,b,c로 하고싶은 경우 <ol type="a">로 변경해 주면 됨.   

<li> : 각 항목을 표현해 줌

 

<ul>: unordered list 순서가 없는 목록

 

 

 

 

태그속성

 html요소는 block요소와 inline요소로 나뉜다 <br>

        block요소는 1줄을 모두 사용하는 구조(크기지정가능, 상하마진가능),

        inline요소는 1줄에 다음요소와 이어지는 구조(크기지정불가, 상하마진불가)이다

        inline-block요소는 1줄에 다음요소와 이어지는 구조(크기지정가능)

        <hr>

        block요소의 종류로는 h1~h6, p, ul, ol, li, table, tr, div, hr

        inline요소의 종류로는 th, td, img, span, br

        inline-block요소의 종류로는 img, th, td/th (마진영역이 없음)

 

 

 

 

 

전송용 버튼

 

form태그 안에서는 전송버튼, form태그 밖에서는 일반 버튼. 

                <button>전송2</button>

                <input type="submit" value="SUBMIT버튼">

둘다 같은 기능임.

 

 

 <button type="button"> 일반버튼1 </button>

전송이 안됨. 클릭해도 아무 효과가 없음.

 

                <button type="reset">RESET1</button>

                <input type="reset" value="RESET2"

리셋버튼. 데이터 입력했던 내용들이 버튼을 누르면 사라짐.

 

 

<label>

<label>

                    <span>아이디:</span>

                    <input

                       type="text"

                       name="t"

                       maxlength="5"                      

                       placeholder="아이디를 입력하세요"

                       style="width:100px;"

                       required

                       >

                <label>

알아서 input태그에 커서가 이동 됨.

 

 

라벨이 인풋밖에있어도 포를 이용하면 안에있는것처럼 설정 할수있음

 

<fieldset>

                 <legend>언어를 선택하세요</legend>

                <input type="checkbox" checked name="c" value="j">JAVA&nbsp;&nbsp;&nbsp;

                <input type="checkbox"         name="c" value="s">SQL&nbsp;&nbsp;&nbsp;

                <input type="checkbox" checked name="c" value="h">HTML<br>

                </fieldset>

 

autocomplete : 자동완성 기능

 <form action="http://localhost:8888/form"

                id="f1"

                autocomplete = "off"

            >

 

method 속성 : get/ post

get 데이터를 받을 목적 (검색할때) 

get/form/HTTP/1.1 
header

bodycontent = message body (X) 사용 안 함 => url뒷부분에 ?로 이어감. 사용자가 입력한 값이 노출 되는 구조

http://192.168.0.116:8888 

 

 

post 데이터를 보낼 목적 

http://localhost:8888/form로 데이터를 보내겠다

ex) 로그인 : 가입할 때 ID/PW 전달 

bodycontent(O)

 <form action="http://localhost:8888/form"

                method="post">

             <input name="t">

            <button>post방식으로 전송</button>

             </form>            

 

 

 

 

 

 

<img src="d:\263\myFrontWEB\images\ele.jfif"

절대경로

디렉토리 경로 권장X : 그 중 http프로토콜을 먼저 권장.

 

상대경로 : url

 <img src="..\images\ele.jfif" alt="상대경로" width="300px">

<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzA2MTVfMzEg%2FMDAxNjg2NzU4NTg1MzU3.BMjlU6EVZUqjxCqmBWl4rD296MQsSN3l5E2iRBkqkwQg.pipYPS4vbCxNkXwzqC2mo6QKs0UIvSgTOcLj2mUXnk8g.JPEG.cdb0216%2F%25BE%25C6%25C0%25CC%25C6%25F92.jpg&type=ofullfill340_600_png">

 

 

 <table >

            <thead class="tb-head">

                <tr>

                    <td>이름</td>

                    <td >지역</td>

                    <td >전화번호</td>

                </tr>

            </thead>

 

<table>

<tr> 하나의 행, <td>행 안에 들어가는 각각의 셀

 

<a>

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

네이버를 클릭하면 네이버 페이지로 이동!

 

<target>

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

target속성은 새창을 열어주고 네이버 페이지로 이동. 
 <a href="https://www.naver.com">네이버</a> 는 현재페이지에서 네이버페이지로 바뀜.