프론트/HTML|CSS

[HTML] 브라우저 html 이클립스 작성법 / 웹 환경 이해하기

원코딩 2022. 7. 4. 15:50

 

 

 


나는 자바기반 웹 프로그래밍을 배우고 있다 보니

자바 편집로 사용했던 이클립스로 HTML를 다루게 되었다.

 

 

자바 번역기 톰켓을 통해서

웹서버와 통신이 가능하게 해준다. (WAS - 와스)

 

 

지금부터

HTML에 대해 알아보도록하자.

 

 


 

 

 

 < HTML >  HyperText MarkUP Language 

HTML은 브라우저에서 실행되는 언어이다. HTML 은 마크업 언어의 일종이다. 문법을 알기 위해서는 태그와 속성을 알아야 한다. HTML은 고정적이기 때문에 태그가 지정되어 있다. 이미 정해져있는 요소가 많기 때문에 배우기 어려운 언어는 아니라고 할 수 있다. 반면 XML은 사용자 정의로 구성되는 가변형 언어이다. 

 

HTML 은 정적 파일이기 떄문에 움직임이 없다 떄문에 HTML에서 끝나지 않고 CSS와 JavaScript를 이용하는 것이다. CSS는 화면 디자인에 이용되고 JavaScript는 동적 움직임을 제공한다.  

 

 

 

 < HTML 5 > 

우리나라 사용하는 HTML 버전은 다른 나라에 비해 많이 늦다. 이는 늦게 적용됐기 때문이라고 한다. 내가 배우는 HTML5의 주요 기능에 대해 알아보도록 하겠다. 

HTML 5 : 웹 페이지를 구성

CSS3 : 스타일 적용 (화면 디자인)

자바스크립트 ES5 > ES6 > 사용자 반응 처리 

 

HTML 4에서 추가된 기능

* 멀티미디어 (<video>,<audio>)

* 그래픽(<canvas>)

* CSS3

* JavaScript (쓰레드, DB연동) 

 

 

 <  HTML 생성하기 > 

먼저 이클립스에서 html을 사용하기 위해서는 File > New > Dynamic Web Project 를 생성해주어야 한다! 

프로젝트를 생성하면 많은 하위 폴더가 생성됨을 확인 할 수 있다. 

project > src > webapp 에서 폴더 하나를 생성해주자. new > Folder>html 선택한 뒤 이름을 적고 생성하면 끝이다. 

 

주석처리 <!--  --!>  단축키 : ctrl + shift + /

<!-- 
얘는 주석처리이이이이 
 -->

 

 

 

 < 외부 라이브러리 연결 > 

편리하게 코드를 작성하기 위해서는 라이브러리를 활용하는 것이 좋다. 사실 라이브러리를 얼마나 잘 활용할 줄 아냐가 실력일 수도 있겠다. 나는 라이브러리로 2가지를 활용했다. 

ojdbc8.jar >> JTattoo

servlet-api.jar >> Apache Tomcat® - Apache Tomcat 9 Software Downloads

 

 

 

 < 서버와 클라이언트 ( 웹 동작 이해하기 ) > 

웹 환경은 서버와 클라이언트로 나눌 수 있다. C/S

클라이언트는 쉽게 사용자라고 생각하면 좋다. 사용자가 정보를 요청하면 서버에서 자료를 제공하는 것이다. 사용자, 즉 클라이언트는 주소창을 통해  url 주소를 검색하면 서버에서 파일을 찾아서 전송해준다. 

 

서버에서 실행하는 프로그램을 서버 프로그램이라고 하고 , 클라이언트에서 실행되는 프로그램은 클라이언트 프로그램이라고 한다. 

 

서버 프로그램종류 (  Back ) 

JSP 

Spring

Spring-Boot

Oracle (DBA)

Java

 

클라이언트 프로그램 ( Front )

HTML

CSS

JavaScript

 

 

 


 

 

이상으로 HTML을 알아보았다.