1. <웹페이지>
웹페이지는 www(World Wide Web) 상에 존재하는 각각의 문서를 가리킨다. 인터넷을 통해 볼 수 있는 모든 형태의(모든 형태인지는 모르겠네) 문서를 총칭한다고 보면 될 듯. HTML에 의해 구현되고 CSS, Javascript등을 통해 디자인을 더하거나 동적인 요소를 추가할 수 있다.
2. <HTML>
HTML은 HyperText Markup Language의 약자로 웹페이지 구현에 필요한 언어이다. <></>라는 형태의 '태그'를 사용한다.
HTML 기본 포맷
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html><head></head>에는 css, javascript 등이 들어가고, <body></body>에는 웹페이지에 보여질 정보가 기술된다. (쉽게 생각하면 body가 눈에 보이는 웹페이지의 모든 것이고, head는 눈에 보이지 않지만 body에 영향을 주는 모든 것이라고 보면 될 듯?)
3. <CSS>
Cascading Style Sheets의 약자로 HTML에 의해 구현된 웹페이지의 디자인을 부여하는 역할을 담당한다. HTML의 <head>에 적용되며 <body>에 있는 요소들의 '정보'는 바꾸지 않고 디자인적 요소를 변경할 수 있다. HTML이 건물의 골격이라고 한다면 CSS는 그 건물의 인테리어 요소라고나 할까. <style></style>이라는 태그를 사용하여 CSS를 구현한다.
*CSS를 적용하기 위해서는 CSS가 적용될 요소를 가리킬 필요가 있다. 인테리어를 할 때도 무엇을 인테리어할지 알 필요가 있지 않은가. "벽에 달린 모네의 그림을 오른쪽으로 15도 회전해줘"라거나 "벽지를 파란색으로 변경해줘"처럼 CSS도 무엇을 디자인할지 가리킬 필요가 있다. 이를 위해 Class와 ID가 존재한다.
*class와 ID는 각각 body에 붙어 있는 태그에 class="class 이름", ID="ID 이름"을 표기하여 나타낸다.
*CSS에서 자신이 가리킨 class와 ID를 표기할 때는 각각 '.', '#'을 붙여 사용한다.
//example
<head>
<style>
.class_name {}
#id_name {}
</style>
</head>
<body>
<div class="class_name"></div>
<div ID="id_name"></div>
</body>*ID가 class보다 상위 단위다. / 같은 종류의 class 및 ID를 중복 표기할 때는 밑에 있는 것이 적용된다!!
*부트스트랩이라는 미리 만들어진 CSS 포맷도 있다! (예쁜 디자인 모음???? 다른 사람이 만들어놓은 css를 사용하는 것!)
4. Javascript
자바스크립트는 HTML에 의해 구현된 웹페이지에 동적인 요소를 적용할 수 있도록 구현된 언어이다. 자바스크립트를 사용하면 사용자가 웹페이지와 교신(???)할 수 있다. 교감??? 적절한 단어가 생각나지 않는다 ㅋㅋㅋ;; 상호작용!!
CSS와 마찬가지로 HTML의 <head>안에 적용되며 구현 시 <script></script>라는 태그를 사용해 주어야 한다.
함수, 배열, 객체, 반복문, 조건문 등을 사용할 수 있는데, 자바스크립트를 사용하면 웹페이지에서 이와 같은 명령이 가능하다.
ex1) 로그인 페이지 - 회원정보를 입력하고 로그인 버튼을 누를 때, 서버에 회원정보가 일치하는지 조회한 후 승인/거절을 할 수 있다.
ex2) 주·야간모드 - 웹페이지에 야간모드(혹은 주간모드) 버튼을 만들어 사용자가 클릭시 모드를 바꿀 수 있는 기능을 만들 수 있다. (조금 더 심화하면 웹페이지의 테마를 사용자가 지정하게 할 수도 있다!!!)
이처럼 자바스크립트는 사용자와 웹페이지가 서로 상호작용할 수 있도록 한다.
*자바스크립트에서 배열은 [ ](큰따옴표)를 사용하고 객체는 { }(중간따옴표)를 사용한다. 예를 들어
<script>
let Array_students = ['김철수', '이영희', '박강서', '오렌지']
// Array_studnets라는 배열은 총 4개의 요소를 포함한다.
let Object_studentA = {
name = '김철수'
age = '18'
status = 'student'
}
// Object_studentA라는 객체는 김철수라는 학생의 정보를 name, age, status 순으로 보여준다.
</script>
*자바스크립트라는 이름을 가지고 있지만 자바와는 아무 관련이 없다고 한다!
4. <JQuery>
JQuery는 자바스크립트를 사용하는데 생산성을 증가시키기 위해 활용되는 자바스크립트 라이브러리이다. 자바스크립트를 더욱 편리하게 사용할 수 있도록 작성된 것!! JQuery를 사용하면 바닐라 자바스크립트를 사용할 때보다 코드의 양이 감소하고 이를 통해 더욱 깔끔한? 결과를 얻을 수 있다.
예를 들어, 바닐라 자바스크립트를 사용할 때는,
document.getElementById("element").style.display = "none";
으로 표기될 것이 JQuery를 사용하면,
$('#element').hide();
로 더욱 직관적이고 편리해진다.
*그러나 JQuery는 어디까지나 자바스크립트 위에서 존재하는 라이브러리이기 때문에 JQuery를 사용하기 위해서는 별도의 자바스크립트 파일을 import 해야 한다. 방법은 두 가지로 1) 파일을 다운받아 사용하는 법, 2) JQuery CDN을 이용해 네트워크상에서 파일을 사용하는 법이 있다!
https://www.w3schools.com/jquery/jquery_get_started.asp <- 링크 참고
5. <Ajax>
Ajax는 웹페이지의 전체가 아닌 일부분을 갱신할 수 있도록 도와주는 기능이다. 이를테면 검색엔진에서 검색창에 무언가를 검색할 때, 하단에 실시간으로 자동완성 기능이 실행되는 것과 같은 기능 말이다. Ajax를 사용하면 필요한 정보만을 선별적으로 갱신할 수 있기 때문에 엄청 효율적이다! 내가 만약 지금 어부이고 물고기 한마리만이 필요한데 바닷가에서 10미터짜리 그물을 던지는 일은 비효율적일 것이다. Ajax를 사용하는 것은 이와 같은 상황에서 아주 정교한 낚시대를 사용하는 것과 같다!
*JQuery가 자바스크립트 위에서 구동하는 라이브러리였다면 Ajax는 JQuery 위에서 구동한다. 따라서 Ajax를 사용할 때는 선행적으로 JQuery를 프로젝트 상에 불러와야 한다. (slim 버전은 Ajax가 구동되지 않을 수 있다. (한번 해봤는데 안된 적이 있었음))
기전은 크게 GET과 POST로 나눠지는데 POST는 아직 안배웠다. (pass)
6. <Python>
오늘 처음 배웠는데 아직 뭔지 모르겠다. :)
* 그.... 가상환경? 이용해서 라이브러리 설치하는 것을 아까 했는데 pip(python install package) 오류 때문에 1시간 가량 헤맸다. 결국 해결하긴 했지만 진짜 힘든 싸움이었음....... (구글링 +1)
