긴 연휴가 끝났다! 🤥
정적(static) Web : Web Server 쪽에 이미 존재하는 resource(HTML)를 요청하는 작업
동적(dynamic) Web : Web Server 쪽에 존재하는 program을 호출, 결과 resource를 생성해서 response
HTML(HyperText Markup Language), CSS(Cascading Style Sheet), JavaScript
HTML이 버전 업(5) 되면서 HTML Element, CSS 3, JavaScript로 구성되어 있음
Web Server에게 프로젝트의 존재를 알려줌(configure) →
서버가 프로젝트를 인식한 상태에서 기동 →
Web Client(Browser)를 실행 →
URL(protocol://IP:Port/파일명)을 이용해서 클라가 서버에 request 보냄 →
서버가 request에 대한 처리를 한 후 클라에게 response 보냄 →
클라가 response를 해석해서 Browser에 Rendering
WebStorm : JavaScript 및 관련 기술을 위한 통합 개발 환경(IDE)
HTML
Ctrl + / : 주석 처리
HTML Element는 Tag + 내용
Element > Tag > Attribute(Tag의 특정 설정)
<!DOCTYPE html> ← 문서의 형태를 알려주는 역할
<html> <head> ~ </head>, <body> ~ </body> </html> : 여는 태그 ~ 닫는 태그, Element들은 포함관계를 가짐
<html> ~ </html> HTML 문서는 반드시 이 Element로 감싸야함
<head> ~ </head>는 문서의 설정을 잡음
<title> ~ </title>은 Tab의 이름
<body> ~ </body>는 문서의 내용을 표현함
<a> ~ </a>는 앵커, 하이퍼링크를 만들어줌
<img>는 그림을 표현함, 닫는 태그가 존재하지 않음, url은 src attribute를 이용함
<br>은 줄바꿈, <br> ~ <br>은 한 줄이 떨어짐
<table>은 2차원 테이블 형태로 데이터를 표현하기 위해서 사용함
<ul>, <li>은 목록을 만드는 요소
사용자 정의 Attribute를 이용하면 Tag에 추가적인 정보를 포함시킬 수 있음, 'data-'로 시작함
사용자 입력 양식 : input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>여기가 타이틀이에요</title>
</head>
<body>
<a href="http://www.naver.com">네이버로 가기</a>
<br>
<img src="img/bear.jpg" data-author="IU">
<br><br>
<table>
<thead>
<!--컬럼에 대한 정의-->
<th>이름</th>
<th>학과</th>
<th>주소</th>
</thead>
<tbody>
<!--각 컬럼에 대한 데이터-->
<tr>
<td>홍길동</td>
<td>건축학과</td>
<td>서울</td>
</tr>
<tr>
<td>아이유</td>
<td>영문과</td>
<td>인천</td>
</tr>
</tbody>
</table>
<br><br>
<ul>
<li>서울</li>
<li>인천</li>
<li>대구</li>
</ul>
<br><br>
<input type="button" value="여기를 클릭하세요!">
</body>
</html>
CSS
block level element : 영역을 화면 끝까지 잡음. ex) h1, div, li
inline level element : 내용 부분만 영역을 잡음. ex) img, span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>여기는 H1입니다.</h1> <!--block level element-->
<div>이것은 소리없는 아우성!</div> <!--block level element-->
<img src="img/bear.jpg"> <!--inline level element-->
<img src="img/bear.jpg">
<span>여기는 span입니다.</span> <!--inline level element-->
<span style="color: blue">여기는 span입니다.</span>
</body>
</html>
JavaScript
<script> 태그 혹은 console을 사용해서 JS code를 HTML 페이지에 넣음
//, Ctrl + / : 주석 처리, 변수 선언할 때는 let
JS Datatype : number, string, boolean(소문자), array(python의 list), object(객체, python의 dictionary)
선언적 함수 : function 키워드 사용
익명(람다) 함수 : 함수를 지칭하는 이름이 빠지고 변수에 저장함
객체 : 객체 안에 속성(property), 함수(function) 넣음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/aaa.js"></script>
</head>
<body>
<input type="button" value="버튼을 클릭하세요!"
onclick="my_func()">
</body>
</html>
console.log('이 내용이 출력됩니다.')
// JS 변수 선언. let이라는 키워드를 사용함
let tmp1 = 100; // number
let tmp2 = '소리없는 아우성'; // string
let tmp3 = true; // boolean(소문자)
let tmp4 = [1, 2, 3, 4]; // array
// JS 객체(object)
let tmp5 = {
name: '홍길동',
dept: '철학과'
}
console.log(tmp1);
console.log(tmp2);
console.log(tmp3);
console.log(tmp4);
console.log(tmp5);
// 선언적 함수
function my_func(a,b) {
return a + b;
}
console.log(my_func(10,20))
// 익명(람다) 함수. 함수를 지칭하는 이름이 빠지고 변수에 저장함
let tmp6 = function(a,b) {
return a + b;
}
console.log(tmp6(10,30))
// JS 객체
// this의 의미는 python의 self를 의미함
let obj = {
name: '김연아',
age: 20,
print_info: function() {
return this.name + ' : ' + this.age;}
}
console.log(obj.name)
console.log(obj.age)
console.log(obj.print_info())
console.log(obj['name']) // 인덱싱
console.log(obj['age'])
function my_func() {
alert('경고창이 떠요!');
}
jQuery : 모든 Browser에서 동작하는 Client JS Library
CDN(Content Delivery Network) : HTML Tag를 이용해서 Library를 동적으로 다운로드해서 사용하는 방식
여기서 사용하는 버전은 jQuery Core 2.2.4 minified
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery01.js"></script>
</head>
<body>
<ul>
<li>서울</li>
<li>인천</li>
<li>부산</li>
</ul>
<div>소리없는 아우성!!</div>
<input type="button" value="클릭클릭!"
onclick="my_func()">
</body>
</html>
function my_func() {
alert('경고창이 떠요!');
}
| 1. 1/17 월 | 2. 1/18 화 | 3. 1/19 수 | 4. 1/20 목 | 5. 1/21 금 |
| 취업 특강 | 파이썬 환경 설정 (파이참, 아나콘다, 주피터 노트북) |
파이썬 데이터 타입 (list, tuple) |
파이썬 데이터 타입 (range, string, dictionary, set, bool) |
파이썬 사용자 정의 함수, 객체지향, 사용자 정의 클래스 |
| 6. 1/24 월 | 7. 1/25 화 | 8. 1/26 수 | 9. 1/27 목 | 10. 1/28 금 |
| 파이썬 사용자 정의 클래스, 사용자 정의 모듈 |
DB(MySQL) DBMS, MySQL 환경 설정, DB/테이블 생성, DB 입력·활용, Index |
DB(MySQL) View, 백업과 복원, DB 모델링, 관계(PK, FK), DML(CRUD), 데이터 타입 |
DB(MySQL) DML(CRUD), WHERE 조건, 패턴 매칭, SubQuery, 정렬, 그룹핑, 집계 함수, 트랜잭션(ACID 특성) |
DB(MySQL) JOIN, UNION, NOT IN, WEB |
| 11. 2/3 목 | 12. 2/4 금 | 13. 2/7 월 | 14. 2/8 화 | 15. 2/9 수 |
| WEB WebStorm 환경 설정, HTML, CSS, JavaScript, jQuery CDN |
WEB jQuery 문법, |
* 개념과 용어를 잘 익히자!
