**웹 프로그래밍
HTML: 레이아웃, 양식(폼)
CSS: 디자인, 색, 폰트
Javascript: 이벤트, 팝업, 유효성 검사
jQuery: Javascript 라이브러리(함수) 제공
bootstrap: css framework
- 프레임워크(framework): 프로그래밍에서 복잡한 문제를 해결하거나 서술하는 데에 사용되는 기본 개념 구조, 골조.
---> 제공받은 일정한 요소, 틀, 부품으로 다양한 형태의 결과물을 만드는 것.
- 라이브러리(Library): 결과물을 만들 때 사용하는 여러가지 도구 모음
- 공통점: 프로그램을 쉽게 만들 수 있음
- 차이점: 자유도 --- 프레임워크는 꼭 사용해야 하거나 지켜야 하는 룰이 있는데, 라이브러리는 원하는 것만 사용
***HTML5
* HTML 파일 생성
web- WebContent에 html file 생성 (여기가 홈 디렉토리임)
next-> HTML5 사용
* 주요 기능
- 멀티미디어 기능: 플러그인 없이 스스로 재생 가능
- 그래픽 기능: html태그(2차원 벡터 그래픽) , 자바스크립트 캔버스(2차원 래스터 그래픽)
css3 (3차원 그래픽) , 자바스크립트 WebGL(3차원 그래픽)
- 통신 기능: 서버와 실시간 쌍방향 통신
- 장치 접근: 장치에 접근해 정보와 기능 사용
- 오프라인 및 저장소: 인터넷 연결되지 않은 상태에서도 응용 프로그램 동작 가능
- 시맨틱: 검색 엔진 프로그램이 정보 분석, 자료 검색 및 처리해 제공하는 지능형 웹
- CSS3 스타일시트: 3차원 변환, 애니메이션 효과
- 웹의 성능 극대화 및 통합: 추가 기능 -> 성능 극대화 가능
웹 워커 -> 사용자 화면 멈추지 않고 연산 처리 가능
html5 표준 적용 웹 브라우저 -> 간단한 워드 작업, 게임 가능
* 용어
- 요소: html페이지를 구성하는 각 부분
01. 내용을 가질 수 없는 태그: <태그> ex. <img> <br> <hr>
02. 내용을 가질 수 있는 태그: <태그> 내용 </태그> ex. <h1> hello HTML5 </h1>
+) 여러 태그 사용
<div>
<h1> hello HTML5 </h1>
<p> 웹 프로그래밍 </p>
</div>
- 속성: 태그에 추가 정보를 부여할 때 사용
ex. <h1 title="header"> hello HTML5 </h1> <img src="image.png">
- 주석: 코드 설명 기록 (프로그램 실행에 영향을 미치지 않음) ex. <!-- 주석 -->
행 잡아서 ctrl+shift+/ 주석 해제: ctrl+shift+\
+) ctrl+alt+아래방향키 ---> 행 복사
* 구조
<!DOCTYPE html> -- 웹 브라우저에 html5 문서라는 것을 알림. 반드시 첫 행에 표시
<html> -- html페이지의 기본 요소, 모든 태그는 html 내부에 작성해야 함
<head> -- body에 필요한 스타일시트, 자바스크립트를 제공
<title> </title> -- 웹 브라우저에 표시되는 title
</head>
<body> -- 사용자에게 실제로 보이는 부분 작성
</body>
</html>
* 글자 태그
※ 한글 깨질 경우 <head>에 <meta charset="utf-8"> 추가!
- <br> : 줄바꿈, 하나 당 엔터 한 번
- <p> : 문단 나눔, 여러 개 써도 한 번만
<p align= "(left, center, right)"></p> : 문단 정렬 (왼, 가운데, 오)
- <hr> : 수평선
<hr width="50%"> : 수평선 비율 (상대 길이)
<hr width="500"> : 수평선 픽셀 (절대 길이)
<hr size="10"> : 수평선 두께
<hr color="red"> : 수평선 색
<hr width="100" align="left"> : 수평선 정렬
- <h> : 제목 출력
01. h1(최대 크기) ~ h6(최소 크기)
02. 문단 나눔
03. 폰트 굵게(bold)
- <font> : 글자 속성
<font size="4"> : 글자 크기 (1~7)
<font color="#000000"> : 글자 색상 ---> red, green, blue or RGB(#ff0000, #ccd7787)
<font face="돋움체"> : 글꼴 ---> 운영체제 상에서 지원하는 글꼴에 한함
* 목록 태그 : 태그 내부에 <li>이용해 목록 요소 작성
ex. <ol>
<li>a</li>
<li>b</li>
</ol>
- <ol> : 순서 있는 목록 (Ordering List),
<ol type="I"> : 순서 형식 지정 (I, II, III, IV... , i, ii, iii, iv... , a, b, c, d... ) (디폴트: 1,2,3,4...)
- <ul> : 순서 없는 목록 (Unordering List),
<ul type="square"> : 형식 지정 (square□, disc●, circle○)
* 경로
1. 절대 경로
- http://naver.com
- /animal.jpg : 최상위 위치의 이미지
2. 상대 경로
- 같은 디렉토리의 이미지 : <a href="first.html">
- 하위 디렉토리의 이미지 : <img src="image/animal.jpg">
- 상위 디렉토리의 이미지 : <img src="../animal.jpg">
* 미디어 태그
- <img> : 이미지
<img src=""> : 이미지 경로
<img width=""> : 이미지 가로 픽셀
<img heigth=""> : 이미지 세로 픽셀
<img title=""> : 이미지에 마우스 올렸을 때 뜨는 title
<img alt=""> : 이미지 없을 때 나오는 글자
<img align="(top, middle, bottom)">내용 : 이미지+내용 출력 (align: 텍스트 위치)
<img align="(left,right)"> : 이미지 왼, 오 정렬
※이미지 가운데 정렬
01. <p>태그에 center 걸고 내부에 이미지 배치
<p align="center">
<img src="img/Penguins.jpg" width="200" heigth="200" >
</p>
02. <center>태그 내부에 이미지 배치
<center>
<img src="img/Penguins.jpg" width="200" heigth="200" >
</center>
* 앵커 태그 (Anchor)
- <a href="http://naver.com"> 내용 : 내용에 하이퍼링크 걸기 (주의! 프로토콜(http://)도 표시)
- <a style="text-decoration:none"> : 텍스트 밑줄 제거(밑줄이 텍스트 데코.. 데코 none..)
- <a href="#alpha">Alpha </a>
<h1 id="alpha">Alpha</h1>
---> #id_name : id 이름이 위치한 곳으로 페이지를 이동함
+) 페이지에서 처리할 수 없는 파일(.hwp, .doc...)을 링크로 건 경우, 다운로드
※이미지에 하이퍼링크 걸기: <a> 태그 내부에 이미지 태그 걸어야.
<a href="http://seoul.go.kr">
<img src="img/Tulips.jpg" width="100" heigth="100"><p>
</a>
ex. 방송국 로고 이미지 클릭하면 방송국 사이트 이동
* 테이블 태그
<table>
<caption>캡션</caption> -- 걍 캡션
<tr> --1행
<th>표 타이틀</th> --1열
<th>표 타이틀</th> --2열
</tr>
<tr> --2행
<td>표 일반셀</td> --1열
<td>표 일반셀</td> --2열
</tr>
</table>
- <table> : 표 삽입
<table border=1> : 표 테두리 굵기
<table cellspacing=1> : 셀과 셀 사이 간격 (경계선 두께)
<table cellpadding=1> : 셀의 테두리와 내용 사이 간격
<table width="" height=""> : 표 크기
<table align=""> : 테이블 정렬 (데이터 정렬 아님)
<table bgcolor="red"> : 테이블 색상
- <tr> : 행row 추가
- <th> : 열 타이틀heading 추가 --- bold 강조
- <td> : 일반 셀data 추가
!주의! <tr> 내부에 <th>,<td>를 추가 -> 행 단위로 데이터 채워야 함
<(tr,th,td) bgcolor="red"> : 행(셀) 색상
<(th,td) colspan=3> : 열 합치기 (3=열 3개 합침)
<(th,td) rowspan=3> : 행 합치기 (3=행 3개 합침)
--> tr 안 되고 th, td만 가능! 헷갈리지 말 것!
//////conf-server 파일에서 아래 8080->80으로 바꿈... 8080은 오라클에서 쓰고있댜
<Connector port="80" protocol="HTTP/1.1"
connectionTimeout="20000"
redirectPort="8443" />
<!-- A "Connector" using the shared thread pool-->
'수업 > 정리' 카테고리의 다른 글
| 220211 html_입력, 구조화 css_구조,선택자,속성 (0) | 2022.02.11 |
|---|---|
| 220210 HTML5 입력양식 태그 (0) | 2022.02.10 |
| 220208 데이터 모델링 +a (0) | 2022.02.08 |
| 220207 저장 프로시저, 저장 함수, 커서, 패키지, 트리거 (0) | 2022.02.07 |
| 220204 동의어, PL/SQL-변수,조건,반복, 저장 프로시저 (0) | 2022.02.04 |