나만의 홈페이지를 직접 만드는 것을 목표로, 웹 개발 공부를 시작하였다.
홈페이지 쯤이야.. 뚝딱 만들지 않겠나 라는 생각으로 공부를 시작하였지만,
그곳에서도 역시 거대한 벽들이 있었다.
내가 느꼈던 수 많은 벽 중에서 가장 먼저 찾아온 벽은,
여러가지 언어를 습득해야 한다는 압박이었다.
웹 개발은 정말 다양한 언어로 구현이 가능하다.
하지만 10개의 언어로 웹 개발을 할 수 있다고 한들,
내가 10개의 언어를 한번에 습득할 수는 없으니...
가장 기초적인 언어 4개만 꼽아서 공부하려고 한다.
HTML : Hypertext Markup Language
HTML은 웹 페이지의 구조적인 부분을 담당하는 언어이다.
사람으로 비유하자면, 뼈대의 역할을 한다고 생각한다.
그렇기에 모든 웹 페이지에서 필수적으로 사용되며
웹 페이지의 전체적인 큰 틀을 잡아주는 역할을 한다.
이 블로그로 예를 들자면,
페이지의 상단, 내용, 카테고리 등 큼지막하게 나눠지는 부분을 HTML이 정한 것이다.
또한, 해당 위치에 text가 들어갈지, button이 들어갈지를 결정해주는 역할도 한다.
다양한 element(요소)와, 그것을 구성하는 tag(태그)로 구성이 되어있다.
tag의 종류도 다양하고, 각 tag마다 기본적인 역할이 내재되어 있다.
(위에서 언급했던 text나 button 등의 역할을 말한다.)
tag의 종류와 그들의 기본적인 역할에 대해서는 나중에 더욱 자세히 다뤄보겠다.
HTML 파일의 확장자는 .html 이다.
CSS : Cascading Style Sheets
CSS는 웹 페이지의 디자인 요소를 담당하는 언어이다.
사람으로 비유하자면 외모적인 부분을 담당할 수도 있고,
옷의 역할을 할 수도 있다고 생각한다.
사람 역시 옷을 안입고 다닐 수는 없는 법.
그렇기에 HTML과 더불어 필수적으로 사용된다.
HTML 요소에 선택적으로 CSS 스타일을 적용하는 방식으로 사용된다.
text에 색깔을 입히는 것부터 시작해서, 글씨체를 변경하기도 하고,
어떤 요소의 위치를 이동시키거나, 네모난 박스를 동그랗게 만드는 등
디자인적인 요소는 거의 갖추고 있다고 볼 수 있다.
적용 방식과 원리는 다른 언어들에 비해 비교적 간단한 편이라고 생각한다.
(물론 기초 문법을 이해할 정도의 공부는 필요하다!)
CSS를 안정적으로 사용하기 위해서는,
CSS 스타일 시트의 종류와 적용 우선 순위에 대해서 반드시 공부해야 한다.
이것 또한 다음 포스팅 때 자세히 다뤄보겠다.
CSS 파일의 확장자는 .css 이다.
JS : JavaScript
JS는 웹 페이지의 동적인 요소를 담당하는 언어이다.
(물론 기능적인 부분도 구현할 수 있다)
동적인 요소란, 말 그대로 움직이는 요소를 뜻한다.
다양한 fade 효과부터, 스크롤 효과, 움직이는 그래프 등
움직이는 요소가 있다면, 대부분 JS를 사용했다고 생각하면 된다.
HTML과 CSS처럼 필수적인 언어라고는 언급할 수 없지만,
JS가 빠진다면, 당신의 웹 페이지가 딱딱함과 심심함을 줄 것이다.
개인적으로 4개의 언어 중에서 가장 난이도가 높다고 생각한다.
하지만 높은 난이도를 자랑하는 만큼,
숙련도에 비례하여 완성도 높은 웹 페이지를 제작할 수 있게 된다.
JS 파일의 확장자는 .js 이다.
PHP : Personal Home Page Tools >> Hypertext Preprocessor
(풀네임이 변경되었다.)
PHP는 서버 사이드 스크립트 언어로서,
시스템적 기반이 되는 언어이다.
PHP 또한, 대부분 HTML 문서 안에 포함하여 사용한다.
사용되는 부분은 많다면 정말 많은데, 가장 기초적인 예시를 들자면
로그인 등에 필요한 데이터를 주고 받는 역할도 담당한다고 볼 수 있다.
당신의 웹 페이지를 단순히 '보여주기 식 껍데기' 로 사용할 것이라면,
PHP는 사용할 일이 없을 수도 있다.
하지만, 시스템 & 기능적으로 알찬 웹 페이지를 만들고자 한다면,
PHP를 필요로 할 것이다.
PHP 파일의 확장자는 .php 이다.
이번 시간에는 웹 개발의 기초적인 언어 4가지에 대해 알아보았다.
각 언어들의 문법적인 내용이나, 구성 요소에 대해서는 세부적으로 다루지 않았기에...
굳이 이런 내용을 게시할까? 말까? 생각도 했었다.
하지만 작성자 본인은 이 4가지 언어의 기초도 알아보지 않은 채로,
각 언어의 문법과 예제부터 뛰어들었다가, 큰 코 다쳤던 경험을 떠올리며..ㅋㅋ작성하게 되었다.
웹 개발을 시작하는 누군가에게 조금이나마 도움이 되었으면 좋겠다.
'Web (웹), Server (서버)' 카테고리의 다른 글
| [Web] HTTP, HTTPS, HTTP2 에 대해 알아보자 (0) | 2023.05.20 |
|---|---|
| [MySQL] 테이블에 데이터 생성 · 읽기 · 수정 · 삭제 / 데이터 CRUD - INSERT · SELECT · UPDATE · DELETE / PRIMARY KEY, AUTO_INCREMENT 초기화 (0) | 2023.03.28 |
| [MySQL] 테이블 수정 ALTER TABLE - 테이블 이름 수정 / 컬럼 추가, 수정, 삭제 (0) | 2023.03.27 |
| [MySQL] 테이블 생성과 제약 조건 설정 / 테이블 삭제 - CREATE TABLE / DROP TABLE (1) | 2023.03.26 |
| [MySQL] 데이터베이스 (DB) 생성 (2) | 2023.03.22 |