On a couch
7. 웹 프로그래밍 본문
01 HTML
HTML
HTML(Hyper Text Markup Language)은 웹 페이지의 내용을 나타내는 언어입니다. 사용자가 웹 페이지를 요청하면 웹 서버는 페이지의 내용을 HTML로 보내고, 웹 브라우저는 HTML을 해석해 페이지를 사용자에게 보여줍니다.
HTML 기본
<!DOCTYPE html>은 문서가 HTML 문서라는 것을 알려줍니다. 그런 다음, HTML 코드에는 여러 개의 요소(element)들이 중첩되어 들어갑니다. html 태그 안에는 head와 body, 두 가지 다른 요소가 있습니다. head 요소는 웹 페이지 자체의 정보를 포함합니다. body 요소는 웹 페이지의 주 내용 영역입니다.
HTML 문서는 트리 계층 구조라고 생각할 수 있습니다. html 요소가 트리의 가장위에 있습니다. head와 body 태그들로 가지가 뻗어 나가고, head 태그에서는 title 태그로 가지가 뻗어 나갑니다. HTML 문서를 트리로 보여주는 이 모델은 DOM(Document Object Model)이라고 부릅니다.
요소의 속성
- HTML 요소들은 이름뿐만 아니라 속성(attribute)도 가지고 있습니다. 속성은 HTML 요소에 대한 추가 정보를 제공합니다.
- 모든 HTML 요소들은 id 속성을 가질 수 있습니다. 고유한 값이어야 하는 id 속성은 웹 페이지에서 특정 요소를 분간하고 확인할 수 있게 도와줍니다. HTML 요소는 class 속성도 가질 수 있는데, 고유한 값이 아니어도 되며, 이것 또한 HTML 요소를 확인하는 데에 쓰입니다. CSS와 JavaScript에 대하여 공부하다 보면 id와 class 속성이 어떻게 유용하게 쓰이는지 알게 될 것입니다.
02 CSS
CSS
HTML이 웹 페이지의 구조를 표현하기 위한 언어인 반면, CSS(Cascading Style Sheets)는 웹 페이지를 디자인하기 위해 인터넷에서 사용되는 언어입니다. 웹 사이트를 디자인한다는 것은 텍스트의 정렬, 다양한 요소의 크기나 색, 창의 크기가 조정될 때 HTML 요소가 어떻게 나타날 지 등을 결정하는 것입니다.
Sytle 속성
CSS는 HTML의 요소 태그 안에 style 속성으로 사용할 수 있습니다. CSS는 속성과 값이 한 쌍을 이루어 사용되며, 각각의 CSS 속성 뒤에는 콜론(:)과 그 값이 옵니다. 또한 여러 속성-값 쌍의 경우 세미콜론(;)으로 분리됩니다.
Style 태그
CSS는 style 태그의 내부에 위치할 수 있습니다. HTML 문서의 head 부분에 위치합니다. style 태그 안에서 가장 먼저 무엇에 스타일을 적용할 것인지 명시해야 합니다. ID에 스타일을 적용한다면, #과 그 뒤에 ID의 이름을 적어서 ID를 참조합니다. 클래스에 적용한다면, .과 그 뒤에 클래스의 이름을 적어서 참조합니다.
스타일을 어디에 적용할 지 결정한 후, CSS 속성-값 쌍은 괄호 {}안에서 세미콜론(;)으로 분리해 포함시킬 수 있습니다. 이런 방식을 사용하면 같은 HTML 요소를 여러 번 사용하였을 때, 동일한 CSS를 반복할 필요가 없습니다.
분리된 CSS
CSS로 스타일을 지정하는 3번째 방법은 완전히 분리된 파일에 CSS를 저장하는 것입니다. <style> 태그 안의 내용을 문서로 저장하면, 일반적으로 .css 형태의 파일이 생성됩니다. 그리고 HTML 문서의 head 요소에 <link href=”style.css” rel=”stylesheet” />과 같은 줄을 포함하면, 외부의 CSS 문서가 HTML 문서에 추가되어 적절한 스타일이 나타날 것입니다.
CSS를 분리된 문서로 만드는 것은 서로 다른 HTML 문서들이 같은 스타일을 사용할 때 유용합니다. 그 HTML 문서들의 스타일을 바꿔야 할 때, CSS 문서 하나만 바꿔주면 나머지 HTML 문서들의 스타일은 자동적으로 적절하게 바뀌게 됩니다.
03 PHP
PHP
웹 페이지에게 어떠한 기능을 주기 위해서 해석형 언어인 PHP를 사용합니다. 해석형 언어는 컴파일되지 않고 한 줄씩 인터프리터에 의해 실행됩니다. 인터프리터는 각 줄을 읽어서 그것이 의미하는 바를 실행하는 프로그램입니다.
PHP의 기본 문법
$s = "hello, world";
$numbers = [4, 8, 5, 16, 23, 42];
foreach($numbers as $number)
{
//do this with $number
}PHP언어의 기본 문법을 C언어와 비교하여 살펴봅시다. 첫 번째 차이점은 main함수가 존재하지 않고, 변수의 자료형을 가지지 않는다는 것입니다. 1행과 같이 $기호를 쓰고 변수명을 쓰면 변수가 생성되고, 자료형은 명시하지 않습니다.
조건문과 반복문은 C와 거의 같습니다.
그러나 반복문에서 C와 다른 문법이 있습니다. foreach인데, 이것을 보기 전에 먼저 3행의 배열을 살펴봅시다. PHP에서는 배열을 [ ]기호를 이용해 생성합니다. 그리고 4행의 foreach의 인자 중에 앞에있는 변수 numbers가 배열이라면 number라는 변수에는 numbers[i] 값이 차례로 들어갑니다. 즉 배열의 원소를 사용하기 위해서 $i를 따로 만들 필요가 없어집니다.
마지막으로 PHP에는 연관배열이 존재합니다. PHP로 연관배열을 구현하기 위해서는 $배열명[속성] = [ 값 ]; 이면 끝입니다. 이와 관련하여 주목해야 할 점은 많은 언어가 이러한 구조들을 추상화하기 시작했다는 것입니다. 그렇기 때문에 우리는 이러한 기능들을 새로 구현할 필요 없이 간단히 프로그래밍할 수 있습니다.
MVC (model view controller)
프로그래밍을 효율적으로 하기 위해 MVC라는 개념을 배울 것 입니다. 코드를 기능별로 분해하는 소프트웨어 설계 방법입니다.
04 SQL
데이터의 저장
데이터베이스는 데이터를 저장하고 질의할 수 있는 구조입니다. 이제 데이터베이스를 위한 프로그래밍 언어인 SQL을 소개할 것입니다. SQL은 시퀄 또는 에스큐엘이라고 읽습니다. 데이터베이스는 엑셀과 같은 프로그램과 비슷하지만 이 프로그램들과 다르게 방대한 양의 데이터(수백만 행)를 저장하고 질의할 수 있도록 해줍니다.
SQL
SQL 언어의 종류는 매우 많지만 데이터 조작언어 4개로 요약할 수 있습니다. 데이터 조작 언어는 테이블 내부의 데이터를 만들고 수정하고 삭제하는 언어입니다.
student 라는 테이블에 학생이름(name), 전공(major)라는 필드가 있다고 가정해봅시다. student 테이블의 모든 필드값을 가져오고 싶다면 SELECT * FROM student;라고 작성할 수 있습니다. *기호는 모든 필드를 뜻합니다.
만약 Bob 이라는 학생의 정보를 삭제하고 싶다면, WHERE 내부의 삭제 조건에 이름이 Bob인 사람을 찾아 해당 행을 삭제하면 됩니다. DELETE FROM student WHERE name = 'Bob';
WHERE는 특정 조건을 넣고 싶을 때 사용할 수 있습니다. DELETE문 뿐만 아니라 검색과 수정에서도 조건을 넣어 데이터를 조작할 수 있습니다.
데이터베이스를 사용할 수 있다면, 웹사이트의 로그인 기능을 만들 때 사용자의 아이디와 비밀번호를 데이터베이스에 저장해두도록 할 수 있습니다. 그러면 사용자가 가입할 때 아이디와 비밀번호를 테이블에 INSERT하고, 로그인할 때 정보가 같은지 SELECT해서 찾은 데이터와 비교할 수 있습니다.
많이 사용되는 데이터베이스 중의 하나가 MySQL입니다. MySQL은 phpMyAdmin과 상호작용하는 웹 기반 툴입니다. MySQL에서 값을 저장할 때 각 칼럼에 지정할 수 있는 자료형은 여러 가지가 있습니다. 예를 들어, 칼럼에 VARCHAR 자료형이나 INT 자료형을 지정하고 그 안에 문자열이나 숫자를 저장할 수 있습니다.
05 Javascript
JavaScript
웹 브라우저와 같은 클라이언트에서 사용되는 자바스크립트(JavaScript)를 알면 더 많은 것들을 할 수 있습니다. JavaScript는 사용자가 입력한 데이터를 다루거나 웹 서버에 요청하거나 웹 페이지를 변경하는 역할을 합니다.
JavaScript의 문법
JavaScript 역시 C 또는 PHP와 매우 비슷합니다. 그리고 JavaScript PHP와 같이 main 함수가 없습니다. JavaScript의 조건문, 반복문은 C언어의 문법 구조와 동일합니다.
var s = "hello, world!";
var num = 3;
var number = [4, 8, 15, 16, 23, 42];
var quaot = {symbol: "FB", price: 79.53};
<코드 1>을 통하여 JavaScript의 변수, 배열, 객체 사용법을 살펴볼 수 있습니다. JavaScript는 자료형을 따로 명시하지 않습니다. 그러나 $를 쓰지 않고 var 뒤에 변수명을 작성합니다. 배열은 3행과 같이 [ ]괄호 안에 데이터를 나열합니다.
객체는 4행과 같이 선언하여 사용할 수 있습니다. { }괄호 내부에 키와 값의 조합이 작성되는데, 각각의 조합은 쉼표로 나누어집니다. :기호 왼쪽이 키, 오른쪽이 값입니다.
이벤트 처리기
JavaScript는 컴파일되지 않는 해석형 언어지만 PHP와는 다르게 브라우저같이 사용자 측에서 동작합니다. 서버에 저장되지만 브라우저가 코드를 내려 받아 사용자의 컴퓨터에서 실행하는 것입니다.
브라우저에서의 이벤트를 JavaScript가 포착할 수 있도록 하는 위쪽 그림과 같은 이벤트 처리기들이 있습니다.
'프론트엔드 공부 > CS50' 카테고리의 다른 글
| 6. 인터넷과 네트워크 (0) | 2022.04.21 |
|---|---|
| 5. 프로그래밍 응용 (2) (0) | 2022.04.20 |
| 4. 프로그래밍 응용 (1) (0) | 2022.04.19 |
| 3. 프로그래밍 기초 (C) (0) | 2022.04.19 |
| 2. 알고리즘 (0) | 2022.04.18 |
