웹 서버라는 것은 무엇일까?
웹 서버는 간단히 말하자면 클라이언트(사용자)가 웹 브라우저를 통해 요청(request)한 페이지를 서버에서 반환(response)하는 것이다.
이 과정을 거치지 않는 환경은 로컬(인터넷이 연결되지 않아도 되는 환경)에서 돌아가는 환경이며, 흔히 html파일을 실행했을 때의 결과이다. 하지만 웹 서버를 사용하게 될 경우 그러한 파일을 불러온다 정도로만 이해하면 좋을 것 같다.
개발환경 설정
본격적인 프로젝트에 들어가기 앞서 우선 개발환경을 정리해둘 필요성이 있다.
- vscode라는 code editor를 설치해준다.
- vscode에서 가독성을 높이고 작업의 능률을 높이기 위해서 extensions을 설치해준다.(sftp, html snippets)
- SFTP : 서버의 소스를 vscode에서 편집할 수 있습니다.
- HTML Snippets : html에서 주로 사용되는 tag들의 자동완성 코드들을 사용할 수 있습니다.
- FTP서버로 파일을 옮기기에 용이한 Filezilla client를 설치해준다.
https://filezilla-project.org/download.php
Download FileZilla Client for Windows (64bit x86)
Download FileZilla Client for Windows (64bit x86) The latest stable version of FileZilla Client is 3.57.0 Please select the file appropriate for your platform below. Please select your edition of FileZilla Client FileZilla FileZilla with manual FileZilla P
filezilla-project.org
- 무료 호스팅 서버인 Dothome에 회원가입한다.
우선 한달 간의 프로젝트에서 무료로 서비스를 진행하는 Dothome은 연습용으로 제작하는 프로젝트에 이만한 사이트가 없다고 생각됩니다.
https://www.dothome.co.kr/web/free/index.php
닷홈 | 호스팅은 닷홈
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
HTML 공부하기
html 언어를 주로 사용하기 때문에 아래 w3schools에서 튜토리얼을 진행한다.
https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML 정리
| tag | 설명 |
|---|---|
| html | 현재 HTML5에서 표준으로 쓰이는 태그로 항상 선두로 사용됩니다. |
| head | 말 그대로 전체의 웹 페이지의 '머리'로 html 동작 코드를 모아 사용합니다. <title>태그를 이용해 홈페이지의 이름을 정하기도 하며, js, css와 같이 꾸며주는 아이템들이 주로 들어갑니다. 어떻게 보여질 것인지를 알려줍니다. |
| body | <head>에서 동작정보를 담고 있다면, <body>는 컨텐츠의 실질적인 내용을 담고 있습니다. body안에 head에 들어가는 부분들이 추가되어도 문제될 것은 없지만, 깔끔하고 간결한 코드를 위해서 구분하는 것 같습니다. |
| div | 구분, 분류'를 뜻하는 division의 약자로. HTML 문서 구조와 상관없이 <div> 태그는 여러 요소들을 하나로 묶어서 구분해 줍니다. <div> 태그로 요소들을 묶어 놓으면 배경색이나 테두리 등의 스타일을 구역별로 적용하기 쉽습니다. <div> 태그는 웹페이지 레이아웃을 만들 때 가장 많이 쓰는 태그입니다. |
| ul | 순서가 필요하지 않은 목록이라는 뜻으로 unordered list의 약자입니다. 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙습니다. |
| li | list item의 약어로 실제로 리스트들이 들어가는 부분입니다. |
| a | 하이퍼 링크를 사용할 수 있게 해주는 태그입니다. |
| p | paragraph의 약자이며 문단 영역을 나타냅니다. |
| h1 | heading1 이라는 표현이며, 제일 큰 사이즈의 제목입니다. |
| h2 | <h1>과 마찬가지로 heading이며 <h1>보다는 작은 사이즈를 갖습니다. |
| h3 | <h1>~<h6>까지 존재하며, 수가 늘어나면 크기가 작아집니다. |
| br | line break라는 뜻으로 개행태그입니다. |
CSS 정리
CSS 문법
<style></style>해당 태그 안에 들어가기도 하고, <tag attribute="value">내용</tag>과 같이 TML 태그 안에 들어가기도 합니다.
<tag id="value">내용</tag>: #아이디 { 속성: 값; } CSS에서 해당 id만 바꾸기 위해 사용됩니다.
<tag class="value">내용</tag>: .클래스명 { 속성: 값; } CSS에서 특정 class를 포함한 모든 HTML요소에 적용가능합니다. 아이디와는 다르게 .(dot)을 사용합니다.
tag { 속성: 값; } : 위의 두개와 다르게 사용하는 모든 HTML 태그에 적용할 수도 있습니다.
CSS attribute
- margin: 해당 태그의 바깥 여백의 크기를 지정합니다. 입력할 수 있는 매개변수는 1~4가지이며, 다음과 같이 적용됩니다. 1개(상하좌우), 2개(상하 // 좌우), 3개(상 // 좌우 // 하), 4개(상 // 우 // 하 // 좌)
- border: 해당 태그의 형식, 크기, 색상을 지정합니다. 각 매개변수는 pixel, 선의 종류, 색상을 지정합니다.
- padding: 해당 태그의 가장자리의 여백의 크기를 지정합니다 들어가는 매개변수는 margin과 같으며, 이 값이 커지면 커질수록 실제 들어가는 컨텐츠의 공간이 줄어들게 됩니다.
- margin/padding-top/right/bottom/left: margin과 padding의 크기를 이와 같이 따로 지정해 줄 수도 있습니다.
- border-top/right/bottom/left-width: border는 위와 다르게 width를 더 붙여서 사용 가능합니다.
- width: 해당 컨텐츠의 가로의 크기를 나타냅니다.
- height: 해당 컨텐츠의 세로의 크기를 나타냅니다.
- color: 해당 태그의 텍스트 글자색을 나타냅니다. // 해당 색깔은 black과 같이 텍스트 형태가 될 수도 있으며, #000000(16) 와 같이 16진수의 RGB값으로 불러올 수 있습니다.
- background-color: 해당 태그의 배경 색을 결정합니다. 그 값들은 위와 동일합니다.
- float: 해당 태그가 어느 쪽에 있어야 하는지를 결정해 줍니다. Left, right 등이있습니다
- font: 해당 태그의 폰트를 결정합니다. 단축 프로퍼티로 각각 style, weight, size, family를 결정합니다. 나머지는 생략가능하지만 font-size와 font-family는 생략되지 않습니다.
- a:visited : <a>tag의 링크를 설정하는 속성입니다. 해당 링크를 방문한 후에 다음과 같이 바꿀 수 있습니다. 주로 색상값을 바꿉니다.
JS 정리
JS 문법
자바스크립트는 주로 <script></script> 태그 안에서 정의되며, <head>와 <body> 태그 안에 배치할 수 있습니다. 다른 방법으로도 불러올 수 있다:
External JavaScript
// myScript.js in file
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
// in html
<script src="myScript.js"></script>파일 확장자는 .js 이며, 다음과 같은 이점이 있습니다:
- HTML과 코드를 분리합니다.
- HTML 및 JavaScript를 더 쉽게 읽고 유지 관리할 수 있습니다.
- 캐시된 JavaScript 파일은 페이지 로드 속도를 높일 수 있습니다.
Variable
- var
- let
- const
- undeclared : 정의되지 않은 값
//var
var num1 = 5;
var num2 = 10;
var num3 = num1 + num2;
//let
let variable1 = "This is variable1";
let variable2 = "This is called 'apple'";
let variable3 = 'This is called "banana"';
let alp = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = alp.length;
let x = 3;
let y = 3.14;
//undeclared
num1 = 5;
num2 = 9;
num3 = num1 + num2;Array
//1
const array_name = [item1, item2, ...];
//2
const cars = [];
cars[0]= "item1";
cars[1]= "item2";
cars[2]= "item3";Function
function name(parameter1, parameter2, ...)
//your code here
}Arithmetic operators
| 산술 연산자 | 설명 |
| + | 더하기 |
| - | 빼기 |
| * | 곱하기 |
| ** | 거듭제곱 |
| / | 나누기 |
| % | 나머지 |
| ++ | 증가 |
| -- | 감소 |
Event
| 이벤트 | 설명 |
| onchange | 해당 요소 값이 변경되었을 때 이벤트가 발생한다. |
| onclick | 해당 요소에 마우스를 클릭했을 때 이벤트가 발생한다. |
| onmouseover | 해당 요소에 마우스가 올려질 때 이벤트가 발생한다. |
| onmouseout | 해당 요소에 올려져 있던 마우스가 다른 곳으로 이동할 때 이벤트가 발생한다. |
| onkeydown | 키보드 입력할 때 이벤트가 발생한다. |
웹 서버라는 것은 무엇일까?
웹 서버는 간단히 말하자면 클라이언트(사용자)가 웹 브라우저를 통해 요청(request)한 페이지를 서버에서 반환(response)하는 것이다.
이 과정을 거치지 않는 환경은 로컬(인터넷이 연결되지 않아도 되는 환경)에서 돌아가는 환경이며, 흔히 html파일을 실행했을 때의 결과이다. 하지만 웹 서버를 사용하게 될 경우 그러한 파일을 불러온다 정도로만 이해하면 좋을 것 같다.
개발환경 설정
본격적인 프로젝트에 들어가기 앞서 우선 개발환경을 정리해둘 필요성이 있다.
- vscode라는 code editor를 설치해준다.
- vscode에서 가독성을 높이고 작업의 능률을 높이기 위해서 extensions을 설치해준다.(sftp, html snippets)
- SFTP : 서버의 소스를 vscode에서 편집할 수 있습니다.
- HTML Snippets : html에서 주로 사용되는 tag들의 자동완성 코드들을 사용할 수 있습니다.
- FTP서버로 파일을 옮기기에 용이한 Filezilla client를 설치해준다.
https://filezilla-project.org/download.php
Download FileZilla Client for Windows (64bit x86)
Download FileZilla Client for Windows (64bit x86) The latest stable version of FileZilla Client is 3.57.0 Please select the file appropriate for your platform below. Please select your edition of FileZilla Client FileZilla FileZilla with manual FileZilla P
filezilla-project.org
- 무료 호스팅 서버인 Dothome에 회원가입한다.
우선 한달 간의 프로젝트에서 무료로 서비스를 진행하는 Dothome은 연습용으로 제작하는 프로젝트에 이만한 사이트가 없다고 생각됩니다.
https://www.dothome.co.kr/web/free/index.php
닷홈 | 호스팅은 닷홈
닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다.
www.dothome.co.kr
HTML 공부하기
html 언어를 주로 사용하기 때문에 아래 w3schools에서 튜토리얼을 진행한다.
https://www.w3schools.com/html/default.asp
HTML Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
HTML 정리
| tag | 설명 |
|---|---|
| html | 현재 HTML5에서 표준으로 쓰이는 태그로 항상 선두로 사용됩니다. |
| head | 말 그대로 전체의 웹 페이지의 '머리'로 html 동작 코드를 모아 사용합니다. <title>태그를 이용해 홈페이지의 이름을 정하기도 하며, js, css와 같이 꾸며주는 아이템들이 주로 들어갑니다. 어떻게 보여질 것인지를 알려줍니다. |
| body | <head>에서 동작정보를 담고 있다면, <body>는 컨텐츠의 실질적인 내용을 담고 있습니다. body안에 head에 들어가는 부분들이 추가되어도 문제될 것은 없지만, 깔끔하고 간결한 코드를 위해서 구분하는 것 같습니다. |
| div | 구분, 분류'를 뜻하는 division의 약자로. HTML 문서 구조와 상관없이 <div> 태그는 여러 요소들을 하나로 묶어서 구분해 줍니다. <div> 태그로 요소들을 묶어 놓으면 배경색이나 테두리 등의 스타일을 구역별로 적용하기 쉽습니다. <div> 태그는 웹페이지 레이아웃을 만들 때 가장 많이 쓰는 태그입니다. |
| ul | 순서가 필요하지 않은 목록이라는 뜻으로 unordered list의 약자입니다. 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙습니다. |
| li | list item의 약어로 실제로 리스트들이 들어가는 부분입니다. |
| a | 하이퍼 링크를 사용할 수 있게 해주는 태그입니다. |
| p | paragraph의 약자이며 문단 영역을 나타냅니다. |
| h1 | heading1 이라는 표현이며, 제일 큰 사이즈의 제목입니다. |
| h2 | <h1>과 마찬가지로 heading이며 <h1>보다는 작은 사이즈를 갖습니다. |
| h3 | <h1>~<h6>까지 존재하며, 수가 늘어나면 크기가 작아집니다. |
| br | line break라는 뜻으로 개행태그입니다. |
CSS 정리
CSS 문법
<style></style>해당 태그 안에 들어가기도 하고, <tag attribute="value">내용</tag>과 같이 TML 태그 안에 들어가기도 합니다.
<tag id="value">내용</tag>: #아이디 { 속성: 값; } CSS에서 해당 id만 바꾸기 위해 사용됩니다.
<tag class="value">내용</tag>: .클래스명 { 속성: 값; } CSS에서 특정 class를 포함한 모든 HTML요소에 적용가능합니다. 아이디와는 다르게 .(dot)을 사용합니다.
tag { 속성: 값; } : 위의 두개와 다르게 사용하는 모든 HTML 태그에 적용할 수도 있습니다.
CSS attribute
- margin: 해당 태그의 바깥 여백의 크기를 지정합니다. 입력할 수 있는 매개변수는 1~4가지이며, 다음과 같이 적용됩니다. 1개(상하좌우), 2개(상하 // 좌우), 3개(상 // 좌우 // 하), 4개(상 // 우 // 하 // 좌)
- border: 해당 태그의 형식, 크기, 색상을 지정합니다. 각 매개변수는 pixel, 선의 종류, 색상을 지정합니다.
- padding: 해당 태그의 가장자리의 여백의 크기를 지정합니다 들어가는 매개변수는 margin과 같으며, 이 값이 커지면 커질수록 실제 들어가는 컨텐츠의 공간이 줄어들게 됩니다.
- margin/padding-top/right/bottom/left: margin과 padding의 크기를 이와 같이 따로 지정해 줄 수도 있습니다.
- border-top/right/bottom/left-width: border는 위와 다르게 width를 더 붙여서 사용 가능합니다.
- width: 해당 컨텐츠의 가로의 크기를 나타냅니다.
- height: 해당 컨텐츠의 세로의 크기를 나타냅니다.
- color: 해당 태그의 텍스트 글자색을 나타냅니다. // 해당 색깔은 black과 같이 텍스트 형태가 될 수도 있으며, #000000(16) 와 같이 16진수의 RGB값으로 불러올 수 있습니다.
- background-color: 해당 태그의 배경 색을 결정합니다. 그 값들은 위와 동일합니다.
- float: 해당 태그가 어느 쪽에 있어야 하는지를 결정해 줍니다. Left, right 등이있습니다
- font: 해당 태그의 폰트를 결정합니다. 단축 프로퍼티로 각각 style, weight, size, family를 결정합니다. 나머지는 생략가능하지만 font-size와 font-family는 생략되지 않습니다.
- a:visited : <a>tag의 링크를 설정하는 속성입니다. 해당 링크를 방문한 후에 다음과 같이 바꿀 수 있습니다. 주로 색상값을 바꿉니다.
JS 정리
JS 문법
자바스크립트는 주로 <script></script> 태그 안에서 정의되며, <head>와 <body> 태그 안에 배치할 수 있습니다. 다른 방법으로도 불러올 수 있다:
External JavaScript
// myScript.js in file
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
// in html
<script src="myScript.js"></script>파일 확장자는 .js 이며, 다음과 같은 이점이 있습니다:
- HTML과 코드를 분리합니다.
- HTML 및 JavaScript를 더 쉽게 읽고 유지 관리할 수 있습니다.
- 캐시된 JavaScript 파일은 페이지 로드 속도를 높일 수 있습니다.
Variable
- var
- let
- const
- undeclared : 정의되지 않은 값
//var
var num1 = 5;
var num2 = 10;
var num3 = num1 + num2;
//let
let variable1 = "This is variable1";
let variable2 = "This is called 'apple'";
let variable3 = 'This is called "banana"';
let alp = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
let length = alp.length;
let x = 3;
let y = 3.14;
//undeclared
num1 = 5;
num2 = 9;
num3 = num1 + num2;Array
//1
const array_name = [item1, item2, ...];
//2
const cars = [];
cars[0]= "item1";
cars[1]= "item2";
cars[2]= "item3";Function
function name(parameter1, parameter2, ...)
//your code here
}Arithmetic operators
| 산술 연산자 | 설명 |
| + | 더하기 |
| - | 빼기 |
| * | 곱하기 |
| ** | 거듭제곱 |
| / | 나누기 |
| % | 나머지 |
| ++ | 증가 |
| -- | 감소 |
Event
| 이벤트 | 설명 |
| onchange | 해당 요소 값이 변경되었을 때 이벤트가 발생한다. |
| onclick | 해당 요소에 마우스를 클릭했을 때 이벤트가 발생한다. |
| onmouseover | 해당 요소에 마우스가 올려질 때 이벤트가 발생한다. |
| onmouseout | 해당 요소에 올려져 있던 마우스가 다른 곳으로 이동할 때 이벤트가 발생한다. |
| onkeydown | 키보드 입력할 때 이벤트가 발생한다. |
