본문 바로가기

Wanna be a Programmer/Servlet & JSP

HTML Second

HTTP : web

요청방식 URL, HTTP 버전

요청라인

client system에 대한 정보(Key=Value 쌍 형식)

Header

요청파라미터(POST방식에서만 가능)

body

 

 

요청방식(Request Method)

- Client가 서버에 요청하는 목적에 따라 7가지 방식이 있다.

① GET : 목적 – 서버가 가진 자원 요청

→ 요청의 기본방식

→ 요청 파라미터 : URL 뒤에 붙여 전송

`     ⇨ URL?name=value&name=value...(QueryString) ex) id=30&pwd=40&수량=70

→ 보안적인 측면 X(web browser 주소창에 보임), 문자열 값만 전송가능(binary 파일 전송X)


② POST : 목적 – client가 가진 자원을 서버로 보내는 것

→ <form> 태그를 통한 요청만 가능 ex) <form method=“post”>

→ 요청 파라미터 : 응답 body부분에 넣어 전송

           ⇨ url 뒤에 안보여 보안이 좋다. 문자열, binary file 모두 전송 가능

HTTP 버전, 응답코드, 응답메세지(응답 서머리 상태)

응답코드 ex)  200번대 ok, 400번대 HTTP오류, 500번대 CGI p/g오류

응답라인

응답내용과 관련된 정보(Key=Value쌍 형식) 

content-type : text/html

Header

응답 data 

body

 

web site : 정적 서비스 - Web Server

+

동적인 서비스(Client의 요청에 맞게 응답)

CGI(Common Gateway Interface) : 동적 서비스를 만들기 위한 표준    

HTTP protocol의 서버단에서 실행되는 program

servelet / JSP web container

web site + CGI = web Application

Web serverWeb Container가 합쳐진 것이 Tomcat

 

CSS - HTML에 style을 적용하기 위한 언어

ex ) 선택자 { style명 : 값;}

① id: 하나의 요소를 선택
    <span id="text">
    CSS -> #text {}로 접근


② class: 여러개의 요소로 선택
    <span class="cls">
    CSS -> .class로 접근


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>메뉴</title>
    <style type ="text/css">

/* 선택자 - 태그 */
body {
background-color: #fffad5; -- 배경색 지정
border: 2px solid blue; -- 경계선 두께 2pixel, 선의 종류 : solid, 선의 색 : blue
margin: 50px; -- 틀 외부에 상, 하, 좌, 우 50pixel씩 여백 지정
padding: 30px; -- 틀 내부에 상, 하, 좌, 우 30pixel씩 여백 지정
}
div {
color : #6495ed;
font-size : 17px;
}
span {
color : #7959f1;
font-size : 15px;
}
.na {
text-decoration: line-through;
}
#price {
color: red;
font-weight: bold;
}

    </style>
    </head>
    <body>
<!-- <h1~6> 헤드라인 : 볼드, 엔터 1(큰)~6(작은) 글자 크기
<hr> : 라인 --> 
        <h1>메뉴</h1>
        <hr>

        <h2 class = "na">아이스 카페 아메리카노</h2>
        <div class = "na">5000원</div>
        <span class = "na">강렬한 에스프레소 샷에 시원한 물과 조화</span>

        <h2>아이스 카페 모카</h2>
        <div>6000원</div>
        <span>모카시럽과 시원한 우유에 휘핑크림이 토핑된 에스프레소 음료</span>

        <h2>카페 아메리카노</h2>
        <span class="na">4000원</span><span id="price"=>2000</span><br>
        <span>강렬한 에스프레소 샷에 뜨거운 물의 조화</span>

        <h2>아이스 캬라멜 마키아또</h2>
        <div>6000원</div>
        <span>바닐라 시럽, 시원한 우유에 얼음과 에스프레소 샷, 카라멜 드리즐이 어우러진 음료</span>

        <h2>아이스 카푸치노</h2>
        <div>5500원</div>
        <span>에스프레소 샷과 시원한 우유에 부드러운 우유 거품이 얹어진 시원한 카푸치노</span>

        <h2>바닐라 라떼</h2>
        <div>5000원</div>
        <span>에스프레소 샷과 달콤한 바닐라 시럽에 따듯한 우유가 더해진 음료</span>
    </body>
</html>