웹 서비스 개발 및 배포를 위해선 프론트엔드(front-end)와 백엔드(back-end)가 구성이 되어야 하고, 그중 시각적이고 직관적인 부분을 담당하는 프론트엔드는 우리 눈에 보이는 웹 페이지 자체를 만드는 영역입니다. 그리고 웹 페이지를 제작하기 위해선 HTML, CSS, JS(Javascript, 자바스크립트)라는 3가지 구성요소를 이해하고, 사용할 줄 알아야 합니다. 이 글에서는 강의(스파르타코딩클럽)와 함께 제가 이해한 내용을 바탕으로 정리한 내용입니다.
우선 이 글을 요약하면 다음과 같습니다.
웹 페이지 제작에는 HTML, CSS, JS, 이렇게 3가지 도구 및 언어를 알아야 하며,
이 3가지 요소는 사람으로 비유했을 때 다음과 같은 역할을 합니다.
1. HTML: 사람 신체의 뼈, 신체 구조(키, 몸무게, 근육 등)
2. CSS: 사람의 겉모습(외모와 의상, 액세서리 등)
3. JS: 사람이 행동하는 알고리즘(어떤 외부 자극에 대한 반응, 행동의 범위 등)
여기서 자주 쓰이는 프로그래밍 언어 중 하나인 JS 외에, HTML과 CSS는 통상적으로 프로그래밍 언어 중 하나로 취급하기보다는 웹 개발에 필수적인 하나의 도구, 하나의 요소 정도라는 인식이 있습니다. 그래서 코딩 테스트나 알고리즘 풀이 시에도 이 2가지가 없습니다. 제가 생각하기에 그 이유는 실질적인 하나의 독립적인 언어로써 무언갈 구현하는 것은 어렵기 때문입니다. 그렇기 때문에 웹 개발을 시작하는 단계에선 이 2가지를 완벽히 모두 파악하려는 것보단 어떤 방식으로 사용되고, 내가 어떻게 이용할 수 있을지 배우는 것이 이를 이해하고 이용하는 효율적인 방법 중 하나인 것 같습니다.
아래 사진은 강의자료에 있던 사진으로, 클라이언트가 서버와 데이터 교환이 없이 동작할 경우(그림 1)와 데이터 교환을 하며 동작하는 경우(그림 2)를 의미합니다. 이는 웹의 동작 개념을 파악하는데 좋은 사진이라고 판단하여 함께 넣었습니다.
1. HTML
'Hyper Text Markup Language'의 줄임말인 HTML은 웹 문서, 웹 페이지 작성에 있어서 기본적인 뼈대를 담당합니다. 우리가 웹 페이지를 띄우면 바로 눈에 보이는 시각적인 모든 부분, 각 요소의 위치와 구성, 구조 등을 HTML로 작성하는 것입니다. HTML은 크게 <head></head>와 <body></body> 부분으로 나뉘며, 웹 페이지의 구조와 구성은 body 부분에서 작성됩니다. 즉, 프론트엔드 코딩에서 body를 담당하고 있다고 생각하면 됩니다. head 부분에서는 CSS와 JS로 꾸미는 요소, 동적인 요소 등을 작성하기 때문에, HTML은 head 부분에서는 그저 다른 언어를 작성하고 저장할 구조와 공간만을 제공하는 것으로 파악할 수도 있습니다.
여기서 head와 body를 포함해 웹 페이지 제작에 사용하는 다양한 요소명은 <> 안에 표시하며, 이를 '태그'라고 부릅니다. 대표적으로 앞에서 설명한 <head>, <body> 외에 <div>(여러 태그를 하나의 그룹으로 묶어주는 역할), <hr>(가로선을 삽입하는 역할) 등 여러 태그가 존재합니다.
2. CSS
'Cascading Style Sheets'의 줄임말이며, 전반적으로 웹 페이지를 꾸미는 역할을 담당합니다. 특히, <head>의 <style> 태그 내에서 글씨체와 글씨 크기, 여러 요소의 색상, 여백 크기 등을 HTML로 짜여진 구조 위에 입히면서 입체감을 더합니다. HTML이 태그와 텍스트로 코드를 한 줄 한 줄 작성한다면, CSS는 <head>의 <style> 태그 내에서 각 구조(<div>)마다 {}(중괄호)를 통해 각 요소를 일일이 설정하는 방식으로 작성합니다.
좋은 UI(사용자 인터페이스)&UX(사용자 경험)을 제공하는 웹 페이지가 되기 위해서는 시각적인 부분이 중요할 수밖에 없고, 이는 각 요소를 CSS를 통해 얼마나 디테일한 부분까지 완성도 있고 조화롭게 작성하느냐가 많은 비중을 차지할 것입니다. 하지만 그만큼 세세한 부분까지 모든 개발자가 처음부터 작성하는 것은 쉽지 않은 일이면서 시간을 많이 차지하기 때문에, 일종의 라이브러리처럼 CSS의 다양한 요소를 이미 작성된 오픈 소스로 제공하는 사이트가 있습니다. 이 사이트는 '부트스트랩(Bootstrap)'이라는 사이트로, 필요한 요소를 선택하고 그 요소 내에서도 다양한 디자인으로 사용자가 비교적 높은 자유도로 선택할 수 있게 제공하며, 복사한 후 임의로 자신의 디자인과 생각에 맞게 수정할 수도 있습니다.
또한, 부트스트랩에서도 없거나 일부 수정을 위해 CSS의 문법이나 사용법을 정확히 알기 위해선 구글링이 제일 좋은 방법입니다. 구글링을 하면 이미 수많은 개발자와 사용자들이 자신의 언어로 작성한 내용이 있기 때문에 이제 막 배우기 시작한 개발자에게는 개발 시간을 단축시킬 수 있는 좋은 요소이며, '4. 참고'의 두 사이트(W3schools, MDN)는 이런 CSS의 문법에 대해 비교적 정식 기준에 가깝게 정리되어 있어서 참고하면 좋은 사이트입니다.
3. JS(Javascript)
JS는 자바스크립트라 부르며, 기본적으로 유일하게 브라우저 자체가 이해할 수 있는 언어입니다. 즉, HTML, CSS는 브라우저 스스로가 이해하지는 못하는 언어임을 의미하며, 브라우저가 만들어지고 구축되기 시작했던 시기에 적용되었던 언어였기 때문에 오늘날의 웹 제작(프론트엔드)과는 뗄 수 없는 언어가 되었다고 합니다. 이름 때문에 '자바(Java)'와 어떤 연관이 있다고 생각하는 사람도 있을 수 있고, 저 또한 그런 사람 중 하나였지만, 단순히 이름만 비슷할 뿐, 둘 사이의 연관은 없다고 합니다.
JS는 웹 페이지에서 보다 동적인 영역을 담당합니다. HTML이 뼈대, CSS가 정적인(멈춰있는) 시각 효과를 준다면, JS는 예를 들어 어떤 버튼을 눌렀을 때 화면이 전환되는 것과 같은 동적인 꾸밈과 기능을 담당한다고 볼 수 있습니다. 사람을 예시로 든다면, HTML은 사람의 신체, 뼈, 구조 등의 역할, CSS는 사람의 겉모습, 외모, 의상과 액세서리 등의 역할, 그리고 JS(자바스크립트)는 이런 모습을 가진 사람이 어떻게 행동하는가, 즉 그 움직임과 행동에 대한 알고리즘 등을 나타낸다고 볼 수 있습니다.
저는 이제 막 공부하기 시작한 단계로써 구체적인 사용법, 웹 페이지에서의 구현 방법 등을 아직 모르지만, JS에서도 변수와 함수 정의, 리스트나 딕셔너리와 같은 자료형, for문과 if문 등 이전에 python을 공부하며 배웠던 python 문법과 거의 비슷하게 적용되는 모습을 확인할 수 있었습니다. 이런 부분에 JS가 어렵다기보단 궁금하고, JS는 python과 어떤 부분이 다르며 어떤 것이 가능할지 궁금해졌습니다.
4. 참고
1) 부트스트랩 링크: https://getbootstrap.com/
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
2) CSS W3schools: https://www.w3schools.com/cssref/
CSS Reference
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
www.w3schools.com
3) CSS MDN: https://developer.mozilla.org/ko/docs/Web/CSS
CSS: Cascading Style Sheets | MDN
Cascading Style Sheets(CSS)는 HTML이나 XML(XML의 방언인 SVG, XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌
developer.mozilla.org
4) 구글 폰트(한국어 포함): https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
'지극히 개인적인 공부 노트 > 웹(Web)' 카테고리의 다른 글
| [Web] 수정한 CSS 파일이 HTML에 적용되지 않을 때 (0) | 2021.07.23 |
|---|---|
| [Web] AWS 가상 서버 이용하기(2) - 가상 컴퓨터에서 서버 파일 실행하기 (0) | 2021.07.02 |
| [Web] AWS 가상 서버 이용하기(1) - AWS 인스턴스 생성하기 (0) | 2021.07.01 |
| [Web] API 설계 시 데이터 타입 POST, GET 사용법(feat. CRUD, Flask) (0) | 2021.06.29 |
| [Web] jQuery(제이쿼리) 임포트 하는 법과 Ajax(에이잭스) 사용하기 (0) | 2021.06.23 |