jQuery: Cross Browing(어디에서도 다 할 수 있는 것)
BootStrap : 반응법 웹
Bue, reac, angular: mvc 구현 만드는 회사가 뷰 , facebook , google
Node.js : 서버
예전에는 media player하는데 요즘에는 필요 없다. html5로 한다.
공인 자격증 일본과 한국만 있다. 국가에서 하는 것
미국은 주립대학
vicadic ->it 취업비자가 나온다.
이것 없으면 정보처리기사 등 따야 한다.
프레임워크는 유행이 있고 해서 하면 안된다.
iphone swift
web server was -> 배포 서버 서버용 언어 ->html
**Web Programming준비
1.코딩을 할 수 있는 IDE 또는 Editor -> Eclipse
2. 출력되는 결과를 확인하기 위한 Web Borwser
=> THML5를 확인하기 위해서는 IE보다는 Chrome
Chrome보다는 Firefox나 Opera(html5)브라우저가 조금 더 잘 지원
3. 2번까지만 있으면 html을 만들어서 결과 확인은 가능
4.만들어진 결과를 배포한고자 하면 Web Server가 있어야 합니다.
5.Back End언어로 만들어진 내용을 브라우저를 이용해서 확인하고자 하는 경우에는 WAS(Web Application Server - Web Container)가 있어야 합니다.
WAS는 웹 서버의 요청을 받아서 Back End 언어로 처리한 결과를 HTML로 변환해주는 역할을 수행해주는 프로그램
Java용 WAS 중에서 가장 유명한 프로그램이 apache tomcat 이고 국내 공공기관 SI에서는 티맥스에서 만든 제우스를 많이 사용합니다.
기업들은 사용하는 was가 다양합니다.
하나의 선택이지 필수는 아니다.
**WAS - Tomcat설치
=>windows의 경우는 installer 버전을 다운로드 받아서 설치 가능
=>나머지 운영체제는 압축된 버전을 다운로드 받아서 압축을 해제한 후 실행할 때 연결해서 사용(startup.sh 또는 startup.bat)
https://tomcat.apache.org/download-80.cgi
2.설치
=>windows에서 oracle이 설치된 상태에서 tomcat을 설치할 때는 되도록 포트번호를 변경해주는 것이 좋습니다.
=>oracle이 8080번 포트를 사용하는데 tomcat의 기본포트가 8080번 입니다.
포트충돌이 발생해서 tomcat이 제대로 구동되지 않을 수 있습니다.
windwos 실행파일 bat, com , exe(메모리 사용량이 많다.)
.sh=-> unix , mac, linux에서 사용
su - : 관리자 번호로 하는 명령어 비밀번호가 설정되어 있어야 한다.
=>압축된 파일의 경우는 압축을 해제하는 것으로 설치가 끝난 것입니다.
**Eclipse 환경 설정
=>대다수의 ide는 워크스페이스 단위로 환경설정을 합니다.
워크스페이스를 변경하면 이전 환경설정은 사라지게 됩니다.
=>web programming 할 때는 encoding방식을 utf-8 로 설정하고 출력하는 브라우저를 설정을 합니다.
1,출력 브라우저 변경
[windows] - [Preferences] -[Applicatioin] - [web browser] 에서 설정
2. [Apperance] - [workspace]에서 text file encoding을 utf-8 로 변경
3.[web]에서 html, css, jsp의 encoding을 utf-8 로 변환
브라우저에서 한글이 깨지면 이 설정을 확인
4.Mac에서는 encoding설정을 할 필요 없음
XHTML.pdf
ux는 애플이다. 사용하기 편리하게 배우지 않고 할 수 있게끔 메뉴얼은 책으로 디여있다.
삼성은 책으로 준다.
접근성 장애인
반응형 웹디자인 : 화면 크기에 따라 디자인이 바뀐다.
웹표준
html은 markup이다.
웹표준 : xml 순수한 데이터 형식이다.
microsoft는 edge 있는지 없는지 하는 것은 다르다.
예전에 오류 뜨는 것은 script지원하지 않아서 지금은 지원한다.
웹 시각화 svg
시작<tag>~종료</tag>까지의모든명령어집합을‘요소(element)’라고합니다.
시작태그는태그의의미와필요에따라개별적인옵션을가질수있는데이러한 옵션을‘속성(attribute)’이라고합니다. 속성은태그마다다를수있으며, 여러개의 속성을하나의태그에지정할때는공백으로구분하여시작태그에지정할수있 습니다.
각속성이가지는값을의미하며, 속성에값을할당할때는대입연산자인=과함 께지정합니다.
**XHTML
1.태그에 사용할 수 있는 공통 속성
1)ID:태그를 구분하기 위한 식별자 - 중복될 수 없습니다.
2)CLASS: 여러 개의 태그를 그룹화하기 위한 속성 - 중복 가능
3)NAME: 서버에게 전송할 때 서버에서 구분하기 위한 이름 - 중복 가능
2.태그 작성 시 권장 사항
1)태그 이름은 소문자로 작성
2)태그 다음에 요소를 사용하는 경우 종료 태그를 생략 불가능
<태그 > 요소</태그>
3)속성이름은 소문자로 작성
4)닫는 택,가 없는 태그를 만들 때는 <태그/>로 작성
5)속성을 사용하는 경우 값을 생략하지 않도록 작성
6)잘못된 중첩을 하지 않도록 작성
7) 속성에 값을 설정할 때 ' 나 " 로 감싸서 작성
=>HTML은 비구조적이라서 위의 규칙을 적용하지 않아도 출력은 됩니다.
<a href ="http://www.daum.net" > 다음 </a>
<a href ="http://www.daum.net" > 다음도 가능
<a href ="http://www.daum.net" > 다음 </b></a>
<a href ="http://www.daum.net" > 다음 </a></b> 가능
3.주석\
<!-- 주석 내용 -->
4.문서 구조
<!DOCTYPE 내용>:DTD - 문서에 대한 설명
<html>:html문서 시작
<head></head>:문서에 대한 정보 설정
<body></body>:문서에서 출력되는 부분
</html>
5.태그 분류
1)블록 요서 :태그가 배치되면 좌우에 다른 태그를 배치할 수 없는 요소
h1~ h6, p , div, ul , al,dl등
2)인라인 요소 :태그 주위에 다른 인라인 요소가 배치 될수 있는 요소
img, span, a등
**xhtml요소
1.meta
=>문서에 대한 정보를 작성하는 태그로 head부분에 작성
<meta charset ="인코딩 바익" >:문서의 인코딩 설정 ,잘못되면 한글이 깨져서 표현됩니다.
<meta name ="keywords" content ="키워드 , 키워드 ... ">:검색 엔진 키워드로 검색했을 때 검색되도록 설정
<meta http-equiv ="refresh" content ="시간 url = 이동할 경로">: 시간이 지나면 경로로 리다이렉트 ->서버 구현할 때 많이 사용한다.
트래픽이 많이 사용하면 싸이트가 죽는다. 하지만 네이버는 죽지 않는다.
naver 가 2개 있다.
<meta http-equiv ="pragma" content ="no-cache" > 이 페이지는 캐싱하지 않음
=>캐시는 이전에 다운로드 받았던 내용을 브라우저에 저장하고 있다가 다음에 요청하면 서버에서 가져오지 않고 브라우저 내부에 있는 것을 출력
=>viewport는 반응형 웹 디자인에서 설명
2.title
=>문서의 제목을 만들어주는 태그로 head에 작성
=>브라우저의 탭에 보여주고 bookmark에 추가할 때 기본 텍스트가 됩니다.
3.eclipse에서 웹 프로젝트를 만들고 실행
1)dynamic web project 실행
=>프로젝트 이름을 작성할 때 소문자와 숫자를 조합: 웹 주소로 설정할 수 있기 때문에
2)프로젝트의 webContent 디렉토리에 html,css, javascritp은 만들어야 합니다.
다른 곳에 만들면 실행되지 않습니다.
3) WebContent 디렉톨에 html파일 추가
디렉토리를 선택하고 마우스 오른쪽을 클릭해서 html추가
4)html파일을 선택하고 마우스 오른쪽 클릭 후 [Run as] -[Run on server] 를 클릭
=>첫번째 실행이면 was를선택 : apach - tomcat 9.0
=>실행했는데 포트에러가 발생하면 project explorer에서 servers탭의 server.xml 파일을 열어서 아래 부분을 수정 - 기본 값이 -ㅂ이면 다른 양수 포트번호로 수정
-port의 값이 8080이면 다른 번호로 수정
<Connector connectionTimeout="20000" port="9000" protocol="HTTP/1.1" redirectPort="8443"/>
http://localhost:9000/web/web/first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>나의 웹 사이트</title>
</head>
<body>
안녕하세요 반갑습니다.
</body>
</html>
4.link, stype
=>스타일시트 적용을 위한 태그
<link rel =""stylesheet" href="외부 스타일시트 파일 경로">:외부에 스타일시트 파일을 작성한 경우 적용
<style>스타일시트 내용</style>:내부에 스타일시트 내용을 작성하는 경우
5.script
<script src="외부 스크립트 파일 경로"></script>
<script>스크립트 내용</script>
6.제목 태그
<h1>내용</h1>
<h1 - 6 >: 숫자가 작을 수록 글자 크기가 큼
=>h1은 큰 제목으로 페이지 내에서 한 번만 사용하는 것을 권장
=>블록 태그
7.문단(단락) 태그
<p>내용</p>
=>블록 태그
8. 줄 바꿈 태그
<br/>
9.강조태그
<b> 텍스트 </b> : 굵게
<i>텍스트 </i>: 이택릭 - 기울림
10. 특수문자
->공백
<->작다 <
>-> 크다 >
=>xml이나 html에서 부등호는 크기를 나타내는 기호라서 잘못사용하면 태그로 해석을 합니다.
부등호를 화면에 출력하고 하면 특수문자 형식으로 사용해야 합니다.
& ->&
" ->"
11. 입력한 그대로 출력
<pre>내용</pre>
12.문단 중앙 정렬
<h1 align ='center'> 내용</h1>
=>블록 태그(h1, p태그)에서는 align속성을 이용해서 가운데 , 왼쪽 ,오른쪽 배치가 가능
<center>내용</center>
13.하이퍼링크 태그
=>a태그
<a href ="링크">내용 또는 <img src ="이미지 파일 경로" /></a>
=>인라인 태그: 다른 태그가 옆에 배치될 수 있음
=>href 속성: 클릭했을 때 이동할 경로
웹에서 검색이나 클릭을 이용해서 내부 데이터 수집을 하고자 하는 경우에 이 태그의 href 속성의 값을 찾아와야 합니다.
=>target 속성 :이동할 때 브라우저 실행 방법
_blank :새로운 탭으로 열기
_self: 현재 탭에 열기
다른 영역의 name이나 id:다른 영역에 열기
14. 목록 태그
1)순서없는 목록 태그 :ul
<ul type="disc, circle, square">
<li>목록</li>
<li>목록</li>
</ul>
2)순서있는 목록 태그 : ol
<ol type ="1,A, a, 로마자대문자 ,로마자 소문자">
<li>목록</li>
<li>목록</li>
</ol>
=>stylesheet를 이용하면 글머리 기호로 일번어 나 그림이 가능
3)정의형 목록
<dl>
<dt>정의할 단어 </dt>
<dd>설명</dd>
</dl>
15.이미지 출력 태그
<img/>:인라인 태그
=>src속성 : 이미지 파일의 경로
=>width, height: 너비와 높이로 숫자로 픽셀의 크기를 입력해도 되고 백분율로 화면 크기에 대한 비율로 설정해도 됩니다.
=>border: 경계선으로 두께를 설정
=>hspace,vspaceL 좌우와 상하 여백 설정
=>align: 다른 태그의 배치 설정으로 left나 right를 이용하면 좌우에 여러 중의 콘텐츠 배치 가능
top, bottom, middle은 콘텐츠의 상하 배치
=>이미지 파일은 별도의 디렉토리에 모아놓고 상대경로의 개변으로 출력
이미지가 많다면 별도의 파일서버를 만들고 절대경로를 이용하기도 합니다.
=>이미지나 사운드 파일의 경우는 html을 다운로드 받아서 출력하고 그 다음 다시 이미지나 사운드를 다운로드 받아서 출력을 합니다.
변하지 않은 이미지나 사운드의 경우는 캐시 기능을 적절히 이용하면 출력을 빠르게 할 수 있습니다.
인터넷 속도 늦을 경우 네이브 싸이트 들어갈 경우 글자만 보일 수 있다. 이미지가 캐싱이 되였으면 전의 것으로 보여서 빨리 보일수 있는데 이미지가 계속 변하기 때문에 캐시이 없다.,
double buffer을 이용한다.
naver.png .img두번 출력한다.
cpu가 main momery -> disk ->naver.png 그다음 다시 돌아간다
다시 가져올 경우 자원의 낭비 기 때문에
밑으로 내려갈 수록 늦어진다
a.png 와 b.jpg 2개 있어야 한다.
bpy -> buffer문제 때문에
a.png , b.png- > buffer하나에
sprite image ->하나에 이미지 4개 ->한번만 가져와서 쪼개서 사용한다.
이미지 4개로 -> 4번 가져온다.
중간에 끊어질때 게임은 가능하다. 인터넷 연결하는 것은 점수
알고리즘은 main memory에서 문제
소수는 나누기 할때는 안좋지만 알고리즘할때는 많이 사용한다.
이미지를 한장으로 묶어서 주는 원인은 속도문제이기 때문이다.
1)WebContent디렉토리 안에 resources/images 디렉토리를 생성
2)이미지 파일을 디렉토리에 복수
**Java Web Project배포
1.프로젝트를 war파일로 export를 합니다.
2.export된 war파일을 tomcat디렉토리의 webapps디렉토리에 복사
3. 톰캣 실행
=>ip.: ip주소
tomcat port: 9000
프로젝트 이름 : web
http://ip주소:9000/web/image.html
'Study > html,css, javascript' 카테고리의 다른 글
| frontEnd-6 (0) | 2020.10.15 |
|---|---|
| frontEnd-5 (0) | 2020.10.15 |
| frontEnd-4 (0) | 2020.10.12 |
| frontEnd-3 (0) | 2020.10.12 |
| frontEnd-2 (0) | 2020.10.12 |