[정보 및 잡담] Html에 대해서

안녕하세요. 명월입니다.

HTML이란 Hyper Text Markup Language의 약어로서 간단하게 설명하면 브라우저에서 인식하는 문서형식입니다.
HTML은 XML형식으로 이루어져 있고 시작 태그는 HTML로 시작해서 크게 head, body로 나누어지고 body안에서는 header, main, footer등으로 나누어져 표현을 합니다.쉽게 이야기 하면 웹 문서간에 정해진 XML일이라고 생각하면 됩니다.

Html 태그에 대해 설명을 하면 내용이 꽤 많기에 기회가 되면 따로 카테고리를 만들어서 공부를 하고 이번 포스트에서는 동작원리에 대해서만 공부를 하겠습니다.

우선 이클립스를 이용해서 html 문서를 만들어 보도록 하겠습니다.

사실 HTML문서 정도는 일반 메모장으로 작성으 가능한데.. 그래도 작성편의를 위해서는 IDE를 이용하는 편이 편하겠습니다.그럼 일단 프로젝트를 생성하고 생성된 프로젝트에 web폴더를 만들었습니다.

HTML 생성까지 하지 기본적인 HTML형태가 생성이 되었습니다. 일단 우리는 기동이 목표이니 body부분에 hello world를 입력하고 확인하겠습니다.

웹문서의 경우는 기본적으로 로컬에서도 확인이 가능하기 때문에 웹 서버에 올리기 전에 로컬에서 확인을 하겠습니다. index.html의 프로퍼티를 열고 경로를 확인 할께요.

탐색기로 해당 폴더로 이동 해서 파일을 확인하겠습니다.

index.html을 브라우저로 열겠습니다. 그냥 더블클릭하면 열립니다.

웹 문서에는 body태그에 쓴 hello world 내용만 문서에 표시됩니다.
그럼 이걸 실제 웹 브라우저에서 웹 서버로부터 수신을 받는지 확인하겠습니다. 이전 포스트에서 작성한 프로그램을 이용하겠습니다.

import java.io.File;
import java.io.FileInputStream;
import java.io.InputStream;
import java.io.OutputStream;
import java.net.Socket;


public class Client extends Socket implements Runnable{

    private Server parent = null;
    private OutputStream sender = null;
    private InputStream receiver = null;
    public Client(Server server){
        parent = server;
    }
    @Override
    public void run() {
        try{
            byte[] data = new byte[1024];
            String strBuffer = "";
            while((receiver.read(data)) > 0){
                strBuffer += new String(data);
                byte[] buffer = strBuffer.replace("\0", "").getBytes();
                if(buffer[buffer.length -4] == 13 && buffer[buffer.length -3] == 10 && 
                    buffer[buffer.length -2] == 13 && buffer[buffer.length -1] == 10)
                    break;
            }
            System.out.println(strBuffer);
            String filename = headerFile(strBuffer);
            if("/".equals(filename)){
                filename = "/index.html";
            }
            String filepaht = "E:\\document\\workspace_blog\\html\\web" + filename;
            byte[] contents = filedata(filepaht);
            String message = "";
            if(contents != null){
                message = "HTTP/1.1 200 OK\r\n"
                        + "Server: MyServer\r\n"
                        + "Cache-Control: no-store, no-cache, must-revalidate\r\n"
                         + "Content-Length: "+contents.length+"\r\n"
                        + "Keep-Alive: timeout=15, max=100\r\n"
                        + "Connection: Keep-Alive\r\n"
                        + "Content-Type: text/html\r\n\r\n";
                sender.write(message.getBytes());
                sender.write(contents);
            }else{
                message = "HTTP/1.1 204 no content\r\n"
                        + "Server: MyServer\r\n"
                        + "Cache-Control: no-store, no-cache, must-revalidate\r\n"
                        + "Keep-Alive: timeout=15, max=100\r\n"
                        + "Connection: Keep-Alive\r\n"
                        + "Content-Type: text/html\r\n\r\n";
                sender.write(message.getBytes());
            }
        }catch(Exception e){
            e.printStackTrace();
        }finally{
            try{
                this.close();
            }catch(Exception e){
                e.printStackTrace();
            }
            parent.deleteClient(this);
        }
    }
    private String headerFile(String data){
        String[] buffer = data.split("\r\n");
        buffer = buffer[0].split(" ");
        return buffer[1];
    }
    private byte[] filedata(String filepath){
        File file = new File(filepath);
        if(file.exists()){
            try{
                FileInputStream in = null;
                try{
                    in = new FileInputStream(file);
                    int length = (int)file.length();
                    byte[] data = new byte[length];
                    in.read(data, 0, data.length);
                    return data;
                }catch(Exception e){
                    throw e;
                }finally{
                    in.close();
                }
            }catch(Exception e){
                e.printStackTrace();
                return null;
            }
        }else{
            return null;
        }
    }
    public void start(){
        try{
            initialize();
            (new Thread(this)).start();
        }catch(Exception e){
            e.printStackTrace();
        }
    }
    private void initialize() throws Exception{
        sender = getOutputStream();
        receiver = getInputStream();
    }
}

이전 포스트보다는 서버를 조금 성의있게(?) 만들었습니다. 그래도 모든 프로토콜을 대응하는 것이 아니고 200, 204 정도인데 200은 정상 204는 페이지 없음입니다.

위 내용은 브라우저에서 웹서버로 실제로 보내는 HTTP 프로토콜입니다.

브라우저에서 실제 localhost를 치니 hello world 글자가 표시가 됩니다. 여기까지오면 웹서버와 웹브라우저의 통신이 된 것을 확인했습니다.
이번에는 조금 복잡도를 넣어서 태그에 hello world뿐만 아니고 이미지등의 여러 태그도 섞어보겠습니다.

<!doctype html>
<html>
 <head>
  <title>Insert title here</title>
 </head>
 <body>
 <table border=1>
    <tr>
        <td>test</td>
        <td>test2</td>
    </tr>
 </table>
 <img src="Naver2.gif">
 <h1>haha</h1>
 <h2>hah2</h2>
 <span style="font-size: 10em;">hahahaha</span>
 </body>
</html>

이번에는 이미지도 넣어보고 다양한 태그와 스타일을 적용시켜 봤습니다.

여기까지가 웹서버의 기본원리와 HTML의 기본구조에 대해서 공부했습니다.

관련소스 - github 바로가기