[HTML]html 파일 생성
HTML(Hyper Text Markup Language)는 웹 페이지를 만드는 기본 언어이다.
Hyper Text는 문서를 서로 연결해주는 링크를 말하고, Markup은 텍스트나 이미지, 영상 등을 표시한다는 뜻이다.
HTML이 웹 페이지 화면의 구조를 만들면 화면 모양은 CSS로 꾸미고, 제어는 JavaScript로 한다. 최신 형태로 제어하려면 jQuery도 필요하다.
HTML의 기본적인 기능은 웹 브라우저에 보여줄 내용을 마크업, 그리고 문서끼리 링크하는 것이다.
여기서 웹 브라우저란 HTML을 실행하는 도구이며, 크롬(chrome), 마이크로소프트 엣지(microsoft edge), 파이어폭스(firefox) 등이 있다.
이 HTML 파일을 만드는 웹 편집기로는 메모장도 사용 가능하지만, 노트패드(notepad++)나 비주얼스튜디오 코드(visual studio code), 그리고 이클립스(eclipse)도 있다.
나는 이클립스를 설치했기 때문에 이클립스와 아파치 톰캣(apache tomcat) 서버를 연결하여 작업을 할 것이다.
이클립스 - 톰캣 연동
앞서 이클립스 2021-12 R 버전과 Neon 버전 두개를 설치했었다. 2021 버전은 java 수업용이고 Neon 버전은 jsp 수업용이었다. 이제 Web 수업용 이클립스도 만들어야 한다.
또 다른 이클립스가 필요한 것은 아니고, 2021 버전 압축파일을 한번 더 풀어서 하면 된다. 같은 버전이어도 압축을 푼 후 파일 이름만 eclipse_java / eclipse_jsp / eclipse_web 이런 식으로 다르게 해 주면 사용할 수 있다.
이 이클립스도 workspace를 java, jsp와 따로 지정해주고 실행시킨 후 Window - Preferences 에서 Workspace와 Web - CSS/HTML/JSP Files 의 인코딩 방식을 UTF-8로 바꿔준다.
이클립스 설치 & 설정 : https://cochap.tistory.com/4
그다음은 아파치 톰캣 서버를 이클립스로 가져와야 한다. 이클립스 화면에서 File - New - Other - Server - server - Apache tomcat 8.5 - Software Foundation 위치를 찾아서 완료해준다.
그리고 File - New - Other - Web - Dynamic Web Project 로 프로젝트 생성 후 화면 아래쪽의 Servers에서 Tomcat v8.5 Server at localhost 우클릭, Add and Remove 를 사용하여 오른쪽으로 옮겨준다.
HTML 파일 생성
세팅이 끝났으면 좌측 Project Explorer에서 생성된 프로젝트 - src - main - webapp 우클릭 - New - Folder로 html 파일을 넣어둘 폴더를 생성한 후, 다시 그 폴더 우클릭 - New - HTML File 을 눌러 html 파일을 만든다. java 파일이 아니면 모두 webapp 폴더에 생성하면 된다.
파일을 생성하고 아래와 같이 화면이 뜬다면 제대로 생성된 것이다.
HTML 파일 동작
이제 위의 html 파일을 원하는대로 코딩하여 페이지 형태로 동작시켜 본다.
< > 표시는 태그라고 부르는데, 어느 부분을 어떤 형태로 만들 건지 타입을 정해준다고 할 수 있다. < >는 여는 태그, </>는 닫는 태그다.
모든 코드는 <html> </html> 사이에 들어가야 하며 <head> </head>는 페이지의 머리(헤드) 부분, <body> </body>는 페이지의 몸통(바디) 부분이다.
<title> </title>은 페이지의 이름을 설정하는 부분이고, 대부분의 코드는 바디 안에 들어간다.
Insert title here 부분에 "페이지 이름", <body> </body> 사이에 "Hello!" 라고 쓴 후 저장(Ctrl S)을 하고 런(화면 상단의 벌레 모양 옆에 있는 초록 재생버튼 또는 Ctrl F11)을 해보면 아래와 같은 창이 뜬다.
톰캣 8.5 서버를 선택해주고 Finish를 누르면 잠시 후 웹 페이지가 뜰 것이다.
주소는 "localhost(본인의 IP 주소):포트번호/프로젝트명/폴더명/파일명" 형식이고, 내가 적은 페이지 이름과 바디에 적었던 Hello! 가 뜨는 것을 볼 수 있다. 항상 페이지를 열기 전에는 저장을 해야 하며 코딩한 내용이 잘 뜨지 않는다면 F5 또는 Shift F5를 눌러 새로고침 해 준다.
HTML은 페이지에 어떤 것들이 들어갈 것인지 구조를 결정하고 만들어낸다. 페이지를 보기 좋게 꾸미는 것은 CSS의 일이기 때문에 html 만으로는 익히 아는 웹페이지의 화면을 만들 수 없다.