【web기본】2021 10 25 -HTML

2021 010 25 : 필기 내용

1. Java 웹 프로젝트 : Java EE

2. 프로젝트 생성 : Dynamic Web Project

=> File => New => Dynamic Web Project

=> File => New => Others => web => Dynamic Web Project

3. Java 웹 프로젝트 : back-end : Servlet ( ~~~.java)

front-end : ~~.jsp / ~~.html / ~~.css / javascript (~~~.js)

4. Java Resources => src : back-end : Servlet ( ~~~.java)

5. WebContent : front-end : ~~.jsp / ~~.html / ~~.css / javascript (~~~.js) css 폴더 : ~~~.css js 폴더 : ~~~.js

6. WEB-INF : 웹프로젝트에 대한 환경설정 (web.xml) <=== 폴더 또는 파일명 수정 불가!!!!!!

7. web.xml : 웹 프로젝트가 구동하면 가장 먼저 Tomcat 웹서버가 찾아가는 문서 따라서 하나의 프로젝트에 단 하나만 존재해야 한다!!!!!!

8. WEB-INF => lib : 외부라이브러리(~~.jar)

9. Java 웹 프로젝트 내보내기 : Export => war 파일로 내보내기

Java => zip : 단순 압축 파일

Java Web => war : 설치 기능 포함

10. 스프링 프레임워크 (MVC)

=> 현존하는 웹 프레임워크 중 가장 뛰어남!! (속도 / 개발 / 유지보수 용이)

=> 스프링 프레임워크 :기본 틀을 갖추고 있기 때문에.... 처음 학습할 때에는 시간적인 투자가 필요..

11. 스프링 부트

HTML에 대하여~~~

1. 웹 브라우저에서 사용자 화면을 꾸미기 위한 용도로 만들어진 마크업 언어..

2. HTML4 / HTML5

HTML4 : 단순 웹 페이지 작업을 위한 마크업

HTML5 : 단순 웹 페이지 작업 + API 내장 \

웹 브라우저에 DB 생성 / 그래픽(canvas 태그) / 3D 기능 지원(Open GL) / 오프라인 작업 지원

3. HTML5 는 문법이 엄격!!!! <= 웹 표준(어떤 환경에서도 동일한 화면을 제공)

4. W3C 에서 스펙을 정함!!! 권고 사항 : 화면 레이아웃 : html5 태그로 작성 화면 꾸미기 : ~~~.css 작성 이벤트 처리 : ~~.js 작성 => 이벤트 : 사용자가 마우스 / 키보드 조작을 통한 행위....

5. html / css / js => 기본 엔진 : Webkit 엔진

6. html5 추가된 태그 : 시맨틱 태그

=> 검색 엔진의 최적화(SEO)

=><header> : 해당 페이지의 제목

=> <footer> : 해당 페이지의 하단 (개인정보처리 정책/~~~)

=> <nav> : 메뉴모음

=> <section> : 해당 페이지와 연관 컨텐트

=> <article> : 해당 페이지와 연관 컨텐트 그룹화

=> <aside> : 해당 페이지와 관련이 먼 컨텐트

7. 마크업 (HTML / XML)

HTML XML (개발사들이 태그를 선언)

꾸미기 O X

링크 O X

태그 O X

웹페이지 데이터

8. HTML5 미디어 관련 태그 내장

<audio> / <video> : 유투브

=> HTML4 : <object>

9. 그 외

오프라인 웹 구현 : WebSQL / File API (manifest / storage)

그래픽 <canvas> : + javascript

10. HTML5를 이용하여 개발된 앱 => 안드로이드 또는 애플 앱으로 변환 가능.

HTML5 사용

1. 선언문 : <!doctype html>

2. 웹 페이지 영역 : root 태그(노드,엘리먼트)

3. <html>

내부에는 두 가지 영역이 존재

1. <head></head> : 사용자에게 화면에 보여지지 않는 부분

: 웹 페이지에 대한 기본 환경 설정

<title></title> 사용자 위치

2.<body></body> : 사용자 화면을 구성

: 사용자 입력처리 <form> 사용자 입력창 및 전송관련 태그들... </form>

</html>

사용자 화면을 구성 주요 태그 : <body>~~<body>

1. <h1></h1> ~~~<h5></h5> 글자 크기를 설정

자동 줄바꿈 <p> 기능 포함

2. 화면 레이아웃을 구성 : <div></div>

특별한 기능 없이 화면의 분할 하는 역할

영역을 설정하는 태그

자바스크립트 함수 : jQuery.js => 를 이용할 때 가장 많이 사용..

3. <span></span> : 주로 단어와 단어사이 / 컨텐트 배치

한 칸 띄어쓰기

4. 목록 태그 : 자동 줄바꿈 기능 포함

<ol><li></li><li></li></ol> : 연번(숫자/로마자)

<ul><li></li><li></li></ul> : 기호(원/ 사각형)

=> 반응형 웹 컨텐트 작업 시, 많이 사용...

5. 페이지 이동(링크) 태그

<a href="이동 웹주소"> 사용자에게 보여줄 내용 </a>

<a href="이동 페이지(파일)" > 사용자에게 보여줄 내용

동일 웹페이지에서 이동

<a href="이동할 태그에 대한 id 값" > 사용자에게 보여줄 내용</a>

예)<div id="TOP"></div>

페이지가 넘어갈 정도의 컨텐트

예) <h1 id="TOP"></h1>

페이지가 넘어갈 정도의 컨텐트

<a href="#TOP"">위로 이동

6. 표 형태로 컨텐트 표현

행 : <tr></tr>

열 : <th></th> | <td></td>

테두리 : <table border="1">

행과 행을 하나로 합할 경우 : rowspan="2"

열과 열을 하나로 합할 경우 : colspan="2"

7. 이미지(그림) 표현

8. 일반 글씨

1. 원하는 곳에 직접 입력 (띄어쓰기(1칸) / 줄바꿈 지원 안함)

줄바꿈 : <br />, 단락 : <p></p>

2. css 적용을 위한 글씨 : <label> </label>

9. 서버로 전송하기 위한 태그 : 사용자 입력

</form>

action="전송받을 대상" : 어떤 파일 / 서블릿 이름

method="전송방식"

(get / post)

get : 테스트 코드 : 웹주소줄에 데이터가 노출 O

post : 배포직전 : 웹주소줄에 데이터가 노출 X

10. 폼 내부에 영역을 구분

영역에 제목 : <legend></legend>

11. 사용자 입력관련 태그들....

input 계열 : <input type="입력 종류" />

input 계열의 기본 속성

1. type 속성 : 입력 종류

2. name 속성 : 파라미터명을 설정

3. value 속성 : 입력된 값을 추출/설정

4. placeholder 속성 : 사용자에게 어떤 값(형태)을 입력하라고 힌트를 주는 속성

5. required 속성 : 반드시 입력해야 하는 필드를 설정

6. readonly 속성 : 수정불가능 / 추출만 가능

type 속성 : text : 한줄짜리 입력창

password : 입력 데이터 노출 방지

radio : 여러 개 중 하나만 선택 가능 / 단,

name 속성 값이 동일..

checkbox : 다중 선택 가능

HTML5 가 새롭게 지원하는 속성 값

email : @ 문자가 있느느지를 유효성 검사

url : http:// 로 시작하는지에 대한 유효성 검사

number : 입력창 옆에 위아래 화살표 버튼을 제공하여 사용가가 증가 또는 감소 값을 선택 가능,..

range : 범위를 지정 값을 입력

color : 운영체제가 제공하는 칼라 팔레트를 제공

date / time /datetime /week : 날짜 /시간 / 날짜시간 / 몇 번째주에 해당하는지 선택

submit : 사이의 모든 값을 서버로 전송

reset : 사이의 모든 값에 대한 입력을 취소

text / password : 입력되는 글자 수를 제한도 가능 (maxlength : 입력 글자를 제한)

: 입력창에 대한 기본 크기를 설정 (size : 크기 지정)

저작자표시 비영리 변경금지

'IT > Web' 카테고리의 다른 글

【web기본】2021 10 28 : eclipse Encoding 변경 (0)	2022.03.31
【web기본】2021 10 27 : Servlet & JSP (0)	2022.03.31
【web기본】2021 10 27 javascript (0)	2022.03.31
【web기본】2021 10 26 : Javascript에 대하여 (0)	2022.03.31
【web기본】2021 10 26 : CSS 에 대하여 (0)	2022.03.31

라온나날

【web기본】2021 10 25 -HTML

HTML에 대하여~~~

'IT > Web' 카테고리의 다른 글

티스토리툴바

【web기본】2021 10 25 -HTML

HTML에 대하여~~~

'IT > Web' 카테고리의 다른 글

'IT/Web' Related Articles

티스토리툴바