웹 개발의 기초언어 (HTML/CSS/JS/PHP)

웹 개발의 필요성

 

모의 해킹 스터디를 진행하며...

웹 해킹을 진행하기 위해서는 우선적으로 만들줄 알아야 함을 뼈저리게 느낌

 

웹 개발은 매우 다양한 언어로 구현이 가능

하지만 여러개의 언어를 다 습득하는 것은 불가능

 

가장 대중적이고, 필수적인 언어 4가지

 

>> HTML, CSS, JS, PHP <<

에 대한 정리를 하며 공부하려 함

---

프로트엔드(Front-End) vs 벡엔드(Back-End)

 

개발을 하다보면 프론트엔드, 벡엔드 라는 말을 많이 들을 수 있음

• 프론트엔드(Front-End) : 클라이언트 측 코드(브라우저가 실행하는 코드)
  • (웹페이지 디자인 - HTML, CSS, JavaScript, etc...)
• 벡엔드(Back-End) : 서버측 스크립트, 벡엔드 코드
  • (PHP, ASP, JSP, etc...)

---

 

HTML  : Hypertext Markup Language

(.html)

 

•  HTML은 웹 페이지의 구조적인 부분을 담당하는 언어
  • 모든 웹페이지에서 뼈대 역할을 하는 필수적인 언어
  • 웹 페이지의 전체적인 틀을 잡아주는 역할

---

 

CSS : Cascading Style Sheets

(.css)

 

•  CSS는 웹 페이지의 디자인적 요소를 담당하는 언어
  • HTML 요소에 선택적으로 CSS 스타일을 적용하는 방식으로 사용
  • text에 색을 입히고, 글씨체를 변경하고, 어떤 요소의 위치나 모양을 지정 하는 등의 디자인적 요소

---

 

JS : JavaScript

(.js)

 

• JS는 웹페이지의 동적인 요소를 담당하는 언어
  • 다양한 효과들과, 움직이는 요소들에 사용

---

 

PHP : Hypertext Preprocerssor

(.php)

 

• PHP는 서버 사이드 스크립트 언어로, 시스템적 기반이 되는 언어
• Server Side Script  (= Server Side Technology)
  • 서버측에 위치하여 동작하는 기술/언어 
  • 대부분 HTML 문서 안에 포함하여 사용
  • 웹 페이지의 외적으로 보여지는 역할도 수행이 가능
  • BUT ! , 주로 기능적인 역할을 수행
• 데이터베이스와 상호작용하면서 데이터를 저장하고 표현
  • 사용자가 업로드한 파일을 서버에 저장
  • 사용자가 입력한 데이터를 받아서, 데이터베이스나 파일에 저장
  • 저장된 정보를 불러와 HTML을 프로그래밍적으로 생성하여 웹브라우저로 전송
• PHP - Personal Hompage Tools
  • 개인의 홈페이지를 쉽게 만들 수 있는 아주 가벼운 도구로서 시작됨
  • 현재는 Hypertext Preprocessor라는 이름으로 바뀜
    • Hypertext : 문서와 문서가 링크로 연결되어 있는 것
      • Hypertext를 만드는 언어가 HTML
    • Preprocessor (전처리) : HTML이 브라우저에게 전달되기 전에, HTML을 여러가지 목적에 의해서 프로그래밍적으로 또 다이나믹하게 만들어내는 언어/시스템
• ※ PHP는 초창기에는 Perl로 작성, 현재는 C로 새롭게 만들어짐

---