안녕하세요 이번 게시물에서는 웹 사이트는 개발시에 어떤 언어를 사용하고 어떻게 만드나에 대해서 알려드리려고 합니다
웹사이트 제작시에 기본적으로 다음과 같은 개발 언어를 사용해 만들수 있습니다
이번 게시물에서는 웹사이트제작에 사용되는 언어에는 어떤것들이 있고 각 언어들의 특징이 무엇인지만
가볍게 읽어보시고 넘어가시는걸 추천드립니다
HTML
우선 html은 <html>로 시작하며 </html>로 끝이나며 보통 홈페이지에서 마우스 우클릭후 소스보기를 눌렀을때 나오는 글자들을 말합니다
쉽게 얘기하여 웹사이트의 뼈대 라고 생각하시면 됩니다
HTML의 특징!
- HTML태그는 대문자와 소문자를 구별하지 않습니다 -
- HTML문자열 사이에 있는 하나 이상의 공백은 무시됩니다 -
- 각 태그는 <> 안에 작성하며 여는 태그와 닫는 태그가 있다 -
CSS
css는 웹사이트 디자인시에 사용됩니다
글자를 정렬한다던지 배경이미지를 변경한다던지 버튼이나 박스에 다양한 디자인을 입힐수있습니다
CSS의 특징!
- 웹 페이지의 스타일을 적용하기 위해 사용됩니다 -
- 스타일 선언은 {}(중괄호)안에 코딩을 합니다 -
- 하나의 문장이 끝나면 반드시 ;(세미콜론)을 입력해줘야 합니다 -
- CSS의 문법은 java-script문법과 유사합니다 -
PHP
php는 웹에 최적화된 언어이며 서버쪽에서 실행 되는 프로그래밍 언어
워드프레스(WordPress)같은 설치형 웹 사이트도 PHP기반으로 만들어진것들이 대부분입니다
php는 배우기도 쉽기때문에 웹에서 많이쓰입니다
PHP의 특징!
- 직관적인 코드 작성 가능하기에 작성해야하는 코드의 양이 적습니다 -
- 간단한 사이트 제작을 하기위해 만든 언어라서 복잡한 사이트를 만드는데에는 효율적이지 못합니다 -
- 보안에 안전하지 않은 언어 구조를 가지고 있습니다 -
- 웹서버에서 처리가 이루어지는 스크립트 언어입니다 -
자바스크립트(JavaScript)
자바스크립트는 버튼을 누를시에 특정한 동작을 할수 있게끔 할수있습니다
마우스와 키보드 이벤트에 대한 스크립트 실행하기도 하며 html문서내에 기술되고 html문서와 함께 수행됩니다
자바스크립트는 클라이언트쪽에서 돌아가고 php는 서버쪽에서 돌아가는 언어라고 생각하시면
구분하시기 편하실겁니다
자바스크립트(JavaScript)의 특징!
- HTML문서 내에 기술되고 HTML문서와 함께 수행됩니다 -
- 브라우저상에서 소스코드가 노출되어 있습니다 -
- 자바스크립트의 변수는 대소문자를 구별합니다 -
- 사용자의 행동에 반응하는 이벤트 처리 위주의 언어입니다 -
웹 개발 툴의 종류
앞으로 다음 강좌에서부터는 HTML강좌가 진행됩니다
HTML를 코딩하기위한 툴들을 소개해드리겠습니다
Sublime Text
https://www.sublimetext.com/
프로그램자체가 가벼운편이며 다양한 os에서 제공합니다 그리고 무료입니다
Atom
Github에서 내놓은 에디터인데 오픈소스 프로젝트이며 다양한 패키지를 활용여 작업의 속도를 높일수 있습니다
가격은 무료입니다
Visual Studio Code
https://code.visualstudio.com/
제가 앞으로 강좌를 진행하면서 사용할툴입니다
마이크로소프트에서 오픈소스로 개발하고있는 코드 에디터입니다
무료로 사용할수있으며 비주얼스튜디오코드 내부에 수 많은 개발자들을 이용해 직접 제작한 확장팩을 제공하고 있습니다
그외 웹 에디터
설치형 에디터이외에 설치없이 웹에서 작동가능한 에디터도 있습니다
https://codepen.io/
해당 사이트에서도 html뿐만아니라 css등 웹언어를 작성하실수 있습니다
'프로그래밍 > HTML, PHP, CSS' 카테고리의 다른 글
| HTML 강좌 #07 HTML에서 CSS를 불러오기 & class와 id의 차이점 (1) | 2020.09.07 |
|---|---|
| HTML 강좌#06 브라우저 사이즈에 맞게 글자크기가 변하는 반응형 텍스트 만들기 (8) | 2020.09.06 |
| HTML 강좌 #05 HTML 주석 사용방법 에디터별 주석의 차이 (0) | 2020.08.15 |
| HTML 강좌 #04 자주 사용되는 텍스트 서식 | 굵기,밑줄,강조 등 (0) | 2020.08.11 |
| HTML에서 head는 뭘까? (3) | 2020.08.09 |
| HTML 강좌 #03 HTML에서 사용하는 태그 정리 (0) | 2020.08.09 |
| HTML 강좌 #02 HTML코드 작성하기 태그편 (1) | 2020.08.07 |
