CS50 - 웹프로그래밍
[웹 프로그래밍]
1. HTML
HTML(Hyper Text Markup Language) : 웹 페이지의 내용을 나타내는 언어입니다. 반복문이나 조건문 등을 포함하는 프로그래밍 언어가 아니지만, 웹 페이지의 내용을 어떻게 구성할지 결정할 수 있습니다. 사용자가 웹 페이지를 요청하면 웹 서버는 페이지의 내용을 HTML로 보내고, 웹 브라우저는 HTML을 해석해 페이지를 사용자에게 보여줍니다.
DOM(Document Object Model) : HTML 문서는 트리 계층 구조라고 생각할 수 있습니다. html 요소가 트리의 가장위에 있습니다. head와 body 태그들로 가지가 뻗어 나가고, head 태그에서는 title 태그로 가지가 뻗어 나갑니다. HTML 문서를 트리로 보여주는 이 모델은 DOM(Document Object Model)이라고 부릅니다.
요소의 속성 : HTML 요소들은 이름뿐만 아니라 속성도 가지고 있습니다. 속성은 HTML 요소에 대한 추가 정보를 제공합니다. 예를 들어, 라는 이미지 태그에는 src라는 속성이 있는데 사진 파일이 어디에 있는지를 명시합니다.위와 같은 태그를 사용했을 때 cat.jpg가 HTML 문서와 동일한 디렉토리(저장위치)에 있으면, 웹 페이지에 사진을 보여줄 것입니다. HTML에서 다른 페이지로 링크를 만들기 위해서 a 태그를 씁니다. a 태그에서 href라는 속성을 씁니다. href는 웹 페이지를 어디로 링크시킬지 명시합니다.
2. CSS
CSS(Cascading Style Sheets) : 웹 페이지를 디자인하기 위해 인터넷에서 사용되는 언어입니다. 웹 사이트를 디자인한다는 것은 텍스트의 정렬, 다양한 요소의 크기나 색, 창의 크기가 조정될 때 HTML 요소가 어떻게 나타날 지 등을 결정하는 것입니다. CSS를 웹 페이지에 포함시키는 몇 가지 다른 방법이 있습니다.(바디 태그 내, 바디 태그 위, 별도의 파일로 모듈화)
Sytle 속성 : CSS는 HTML의 요소 태그 안에 style 속성으로 사용할 수 있습니다. CSS는 속성과 값이 한 쌍을 이루어 사용되며, 각각의 CSS 속성 뒤에는 콜론(:)과 그 값이 옵니다. 또한 여러 속성-값 쌍의 경우 세미콜론(;)으로 분리됩니다.
스타일 태그 : CSS는 style 태그의 내부에 위치할 수 있습니다. 스타일을 어디에 적용할 지 결정한 후, CSS 속성-값 쌍은 괄호 {}안에서 세미콜론(;)으로 분리해 포함시킬 수 있습니다. 이런 방식을 사용하면 같은 HTML 요소를 여러 번 사용하였을 때, 동일한 CSS를 반복할 필요가 없습니다.
분리된 CSS : CSS로 스타일을 지정하는 3번째 방법은 완전히 분리된 파일에 CSS를 저장하는 것입니다.
3. PHP
PHP : HTML과 CSS는 웹 페이지의 구조와 스타일을 만들고 변경하는 언어입니다. 즉, 우리 눈에 보이는 겉모습은 만들어낼 수 있어도 이 페이지는 실질적으로 동작하지는 못합니다. 웹 페이지에게 어떠한 기능을 주기 위해서 해석형 언어인 PHP를 사용합니다. 해석형 언어는 컴파일되지 않고 한 줄씩 인터프리터에 의해 실행됩니다.
인터프리터 : 각 줄을 읽어서 그것이 의미하는 바를 실행하는 프로그램
MVC : PHP는 동적 웹 페이지를 만들기 위해 설계된 언어입니다. PHP로 작성된 코드를 HTML 소스 문서 안에 넣으면 웹 서버에서 코드를 인식하여 웹 페이지를 생성합니다. 이러한 전체 과정이 웹 프로그래밍입니다. 프로그래밍을 효율적으로 하기 위해 MVC라는 개념을 배울 것 입니다. MVC는 모델 뷰 컨트롤러의 약자로 코드를 기능별로 분해하는 소프트웨어 설계 방법입니다.
4. SQL
- SQL(Structured Query Language) : 데이터베이스에서 사용하는 언어입니다. 데이터를 추가하거나 삭제하고 필요에 따라 조회할 수도 있습니다. 데이터베이스는 사용자 데이터를 영구히 저장했다가 필요할 때 가져옴으로써 웹에서 더 좋은 사용자 경험을 제공할 때 사용합니다.SQL 언어의 종류는 매우 많지만 데이터 조작언어 4개로 요약할 수 있습니다. 데이터 조작 언어는 테이블 내부의 데이터를 만들고 수정하고 삭제하는 언어입니다.
데이터베이스 : 데이터를 저장하고 질의할 수 있는 구조입니다. 데이터베이스는 엑셀과 같은 프로그램과 비슷하지만 이 프로그램들과 다르게 방대한 양의 데이터(수백만 행)를 저장하고 질의할 수 있도록 해줍니다.
MySQL : phpMyAdmin과 상호작용하는 웹 기반 툴입니다. MySQL에서 값을 저장할 때 각 칼럼에 지정할 수 있는 자료형은 여러 가지가 있습니다. 예를 들어, 칼럼에 VARCHAR 자료형이나 INT 자료형을 지정하고 그 안에 문자열이나 숫자를 저장할 수 있습니다.
5. 자바 스크립트
JavaScript : 사용자가 입력한 데이터를 다루거나 웹 서버에 요청하거나 웹 페이지를 변경하는 역할을 함으로써 사용자가 웹 서비스를 더 잘 사용할 수 있도록 해줍니다.
JavaScript의 문법 : PHP의 문법이 C와 매우 유사하듯이 JavaScript 역시 C 또는 PHP와 매우 비슷합니다. 그리고 JavaScript PHP와 같이 main 함수가 없습니다. JavaScript의 조건문, 반복문은 C언어의 문법 구조와 동일합니다.
JavaScript는자료형을 따로 명시하지 않습니다. 그러나 $를 쓰지 않고 var 뒤에 변수명을 작성합니다. 배열은 3행과 같이 [ ]괄호 안에 데이터를 나열합니다.
객체는 4행과 같이 선언하여 사용할 수 있는데, JavaScript에서는 객체를 자주 사용합니다.{ }괄호 내부에 키와 값의 조합이 작성되는데, 각각의 조합은 쉼표로 나누어집니다. :기호 왼쪽이 키, 오른쪽이 값입니다.
JavaScript는 컴파일되지 않는 해석형 언어지만 PHP와는 다르게 브라우저같이 사용자 측에서 동작합니다. 서버에 저장되지만 브라우저가 코드를 내려 받아 사용자의 컴퓨터에서 실행하는 것입니다.
브라우저에서의 이벤트를 JavaScript가 포착할 수 있도록 하는 위쪽 그림과 같은 이벤트 처리기들이 있습니다.
