[210614월] HTML 첫 설정(톰캣 다운로드, 프로젝트 생성), 태그, WAS
1.Eclipse
2.WAS(Web Application Server) - 톰캣 (사이트로 접속하기 위한 일종의 문지기 역할)
1) server.xml -> port 번호 수정 8089로 수정(63번 줄)
수정한 상태로 window의 preference에 가서 encoding 검색해 수정해주기
2) utf-8로 수정
3) 프로젝트 생성 -> Dynamic Web Project
▶ 태그
1) <html> 로 시작 </html>로 끝.
2) <head> → 화면에 보이는 정보가 아니라, 브라우저에게 보내는 정보가 포함
<tittle>
<head> → 화면에 출력하는 정보를 만드는 태그들로 구성
3) 태그의 종류
inline : content크기만큼만 영역으로 사용하는 태그, ineline 태그는 block 태그 안에서 사용한다.
(img, input, span)
block : 화면의 100%를 영역으로 태그
(p, div, h1~h6(헤드라인 테그), table, ol, ul, li ...)
메타 테크
<meta charset="UTF-8">
→ 없으면, 한글이 깨진다.
▶ 웹 표준을 한다?
→ 모든 웹 페이지에서 동일하게 보이도록 한다. (html5), 유지보수하는데 좋다.
자바를 웹쪽으로 하려면
IP주소로 변경, WAS(웹에서 운영되는 서버 프로그램)
내 컴퓨터 안에 위치가 어디인지 확인을 해야함
[C드라이브 -> SETFILES]
웹 구현은 비주얼 스튜디오 코드가 더 좋기는 하지만 결국 자바.. (이유를 사실 정확히 모르겠다^^)
이클립스가서 설정 변경해주기
아래쪽에 Servers를 눌러주기 만약 보이지 않는다면 WINDOW에 가서 [SHOW VIEW-OTHERS]에 가서 선택!
WAS 구성을 먼저 해주기 위의 내용은 서버가 없다는 뜻
해당 파란 하이퍼링트를 눌러주면 아래의 창이 뜨고, 아파치에 들어가 우리가 다운받은 톰캣 v9.0을 선택!
위치까지 브라우저 설정을 해준다!
설정을 해주면 해당 창이 이클립스에 뜬다.
server.xml을 열어서
8080 이후의 값으로 설정해주기(오류가 나기 때문이다.)
꼭 저장해주기!
2) utf-8
window
3) 프로젝트 수정
Java와 달리 Dynamic Web Project가 프로젝트 생성이다.
화면 구성 또한 전부 다르다.
Java Resources는 우리가 만든 프로그램(개발자)- DB 등등
WebContent는유저들이 볼 화면(html)
화면과 서버에서 처리해야 할 내용이 완벽히 구별되어 있다.
화면을 WAS에 요청
유저에게 보여지는 화면은 HTML
WebContent에서 HTML 생성
WAS를 통해 걸린 시간, 빨갛다고 오류가 아니다.
오류일 경우, 오류라고 확실하게 알 수 있게 뜬다.
클라이언트와 서버쪽이 확실히 나누어져 있다.
네이버 페이지 소스
HTML5 버전
두번째 HTML 생성
항상 WebContent에 만들어준다.
같은 코드인데 사용 브라우저에 따라 달라지면 나쁜 코드이다.
<!DOCTYPE html>를 적어주면 html5버전으로 유지한다.
<태그> 공부
<p>로 문단 나누기
<p>태그 안에서 다른 태그를 사용할 수 있다.
현재 화면에서 아무것도 하지 않지만 CSS에 가면 역할이 있다.
세번째 HTML 생성
4번째
특수기호 나타내기
HTML Entities
HTML Entities Reserved characters in HTML must be replaced with character entities. HTML Entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character ent
www.w3schools.com
<pre>: 입력한 내용을 그대로 사용할 때(게시판 글)
땡겨주면 그대로 땡겨진다.
<span>: 줄바꿈 없이 영역 묶기
소스페이지 보기(정적): 실제 화면과 다를 수 있다.
F12 : DOM Tree 구조(동적)
