HTML(HyperText Markup Language) 기본문법 수업 20211025
참조:https://developer.mozilla.org/ko/docs/Web/HTML
HTML: Hypertext Markup Language | MDN
HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기
developer.mozilla.org
2021 10 25 필기
1.java 웹 프로젝트 : JAVA EE
2.프로젝트 생성 : Dynamic Web Project
File - new - Dynamic Web Project
OR File - new - Other - web - Dynamic Web Project
3.Java 웹 프로젝트 : back-end : Servlet (~~.java)
front-end : ~~.jsp / ~~.html / ~~.css / javascript (~~~.js)
4.Java Resources - src:back-end: Serviet (~~~.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 파일로 내보내기
=================================================================
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 HTML 미디어 관련 태그 내장
<audio> / <video> : 유튜브
HTML4 : <object>
9. 그 외
오프라인 웹 구현: WebSQL / File API (menifest / storage)
그래픽 : <canvas> + js
10.HTML5를 이용하여 개발된 앱 → 안드로이드 또는 애플 앱으로 변환 가능
=========================================================
HTML5 사용
1.선언문 <!doctype html>
2.웹 페이지 영역 : root 태그 (노드, 앨리먼트)
<html> ~~ </html>
3.<html>
내부에는 두 가지 영역이 존재.
1. <head> : 사용자에게 화면에 보여지지 않는 부분
웹 페이지에 대한 기본 환경 설정
<meta charset = 'UTF-8' > = 인코딩
<title> 사용자 위치
<script src = "~~~js"> </script> 별도의 자바스크립트 파일을 로드
<link ~~~> css 파일을 로드
2. <body></body> : 사용자 화면을 구성
사용자 입력처리 <form> 사용자 입력창 및 전송관련 태그 </form>
</html>
===========================================================
사용자 화면을 구성하는 주요 태그 <body>
<h1></h1> ~~~~ <h5></h5> 글자 크기를 설정
자동 줄바꿈 <p> 기능 포함
화면 레이아웃을 구성 : <div></div>
특별한 기능 없이 화면을 분할 하는 역할
영역을 설정하는 태그
자바스크립트 함수: jQuery.js 를 이용할 때 가장 많이 사용
3. <span> 주로 단어와 단어 사이 / 컨텐츠를 배치
한 칸 띄어쓰기
4. 목록 태그 : 자동 줄바꿈 기능 포함
<ol><li></li><li></li></ol> 연번(숫자/로마자)
<ul><li></li><li></li></ul> 기호 (원/ 사각형)
반응형 웹 컨텐츠 작업시 많이 용함
5. 페이지 이동 태그
<a href="이동 웹주소:> 사용자에게 보여줄 내용 </a>
<a href="이동 페이지(파일)"> 사용자에게 보여줄 내용 </a>
동일 웹페이지에서 이동
<a href="이동할 태그에 대한 id값"> 사용자에게 보여줄 내용 </a>
ex) <div id="TOP"></div>
페이지가 넘어갈 정도의 컨텐츠
<a href="#TOP"> 위로 이동</a>
ex) <h1 id="TOP"></h1>
페이지가 넘어갈 정도의 컨텐츠
<a href="#TOP"> 위로 이동</a>
6.표 형태로 컨텐츠 표현
<table> </table>
행 <tr>
열 <th> / <td>
테두리 <table border="1">
행과 행을 하나로 합할 경우 : rowspan = "2"
열과 열을 하나로 합할 경우 : colsapn = "2"
7. 이미지 표현
<img src="~~~.png" />
8.일반 글씨
1. 원하는 곳에 직접 입력 (띄어쓰기 . 줄바꿈 )
줄바꿈 <br />, 단락 <p> </p>
2. css 적용을 위한 글씨 : <label>
=========================================================
9. 서버로 전송하기 위한 태그 : 사용자 입력
<form action = "전송받을 대상" method="전송방식"> get or post
</form>
action = "전송 받을 대상: 어떤 파일/ 서블릿 이름
method = "전송방식" get : 테스트 코드 : 웹주소에 데이터가 노출
post : 배포직전 : 웹 주소에 데이터 노출 x
10. 폼 내부에 영역을 구분
<fieldset> </fieldset>
영역에 제목: <legend></legend>
ex)
<form action="전송받을 대상" method="전송방식">
<fieldset>
<legend></legend>
사용자 입력관련 태그
</fieldset>
<fieldset>
<legend></legend>
사용자 입력관련 태그
</fieldset>
</form>
=====================================================
11. 사용자 입력관련 태그들
input 계열 : <input type="입력 종류" />
<textarea rows="행의 수" cols"열의 수"><textarea>
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 : <form> 사이의 모든 값을 서버로 전송
reset : <form> 사이의 모든 값에 대한 입력을 취소
text / password 입력되는 글자 수를 제한 가능 (maxlength : 입력 글자 제한)
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<form action="index.html" method = "get">
<fieldset>
<legend> title</legend>
<ul>
<li>아이디 : <input type = "text" name="name" placeholder ="영숫자8자리" > <br /> </li>
<li>비밀번호 :<input type = "password" name="pw" required ="required"> <br /> </li>
<li>이메일 :<input type = "email" name="mail" required ="required" value="12@12" readonly="readonly" > <br /> </li>
<li>url :<input type = "url" name="url" required ="required"> <br /> </li>
<li>숫자 :<input type = "number" name="num" min="1" max="10" step="1" > <br /> </li>
<li>길이 :<input type = "range" name="ran" min=1" max="10" step="1" > <br /> </li>
<li>색 :<input type = "color" name="cor" > <br /> </li>
</ul>
</fieldset>
<br />
<fieldset>
<legend> select </legend>
<input type = "radio" name="group" > Java<br />
<input type = "radio" name="group" > Html<br />
<input type = "radio" name="group" > Spring<br />
</fieldset>
<br />
<fieldset>
<legend> checkbox </legend>
<input type = "checkbox" name="c1" > 영상처리<br />
<input type = "checkbox" name="c2" > 이미지처리<br />
<input type = "checkbox" name="c3" > 텍스트 학습<br />
</fieldset>
<br />
<fieldset>
<textarea rows="5" cols="100" >기본값 설정</textarea><br /> <br />
<input type = "date" name="date" > <br />
<input type = "time" name="time" > <br />
<input type = "datetime" name="datetime" > <br />
</fieldset>
<br />
<input type = "submit" name="sub" > <br />
<input type = "reset" name="res" > <br />
</form>
</body>
</html>