[스파르타코딩클럽] 💻 웹개발 종합 - 1주차

[ 웹의 동작 개념 ]

- 웹페이지는 단지 서버에서 준비된 것을 받아서 그려주는 것이다.

- 브라우저의 역할은 요청을 보내고, 받은 HTML 파일을 시각화 해주는 것

(1) 브라우저의 url을 통해 API를 해당 서버에 전달

(2) 서버는 전달받은 API를 통해 해당하는 HTML/CSS/JS등과 같은 코드를 API를 통해 브라우저로 전달

(3) 브라우저는 전달받은 코드가 담긴 API를 통해 사람이 식별할 수 있게 그려줌

[ 자주 쓰이는 단축키 ]

[ HTML & CSS & JavaScript 개념 ]

HTML
- HTML은 웹의 구조(뼈대)를 담당하는 웹 언어(정적 언어)이다.
- 브라우저를 통해 사용자에게 어떤 요소를 보여줄지를 결정
- 크게는 <head/> 태그와 </body> 태그로 구성된다.
- <head/> 태그 내에는 HTML 페이지의 속성 정보를 담는다.
- <body/> 태그 내에는 페이지의 내용들을 담는다.
CSS
- 마크업 언어(HTML, XML, XHML 등)가 실제 표시되는 방법(요소들의 크기, 배치, 색상 등)을 지정
- 웹의 시각적인 표현을 담당하는 정적 언어임
- HTML은 요소들을 브라우저에 나타내는 것을 서버에 요청하는 개념이라면,
- CSS는 해당 요소들을 브라우저에 어떤 모습의 형태로 나타내야 하는지 알려주는 것임
JavaScript
- JavaScript는 브라우저 자체 내장된 해석기능을 이용한 클라이언트 기반의 스크립트 언어
- 콘텐츠의 반응, 콘텐츠의 움직임 등 페이지 내 콘텐츠의 동작(동적 움직임)을 지정하는 프로그래밍 언어
- 웹의 기능적인 부분을 담당하고 있음

간단하게 이해하자면

HTML은 특정 컨텐츠들의 존재여부를 브라우저에 알려주는 뼈대의 역할

CSS는 HTML의 컨텐츠들이 사용자에게 어떻게 보여질지를 결정하는 옷의 역할

JavaScript는 HTML 컨텐츠들의 동적 움직임을 담당하는 뇌의 역할임.

[ Bootstrap & Google fonts ]

Bootstrap
- 각종 레이아웃, 버튼, 입력창 등의 자주 사용하는 컨텐츠들의 디자인과 기능을
- CSS와 JavaScript를 통해 만들어 놓은 오픈소스 프론트엔드 프레임워크
Google fonts
- 구글에서 등록된 여러가지 폰트를 제공하는 오픈소스 라이브러리
- 최근에 추가로 아이콘 또한 지원하고 있음

Bootstrap, Google fonts 등의 오픈소스를 적재적소에 활용한다면

CDN을 통해 간단하게 코드를 삽입하는 것만으로 컨텐츠의 기본 디자인과 폰트 등을설정 가능

[ 1주차 숙제 : 쇼핑몰 메인 페이지 구현 ]

🏴 기획서

🚩 결과물

[ 🌑 1주차 소감 ]

기본적인 개념에 대해 다시 한 번 잡고 가는 것 같아서 좋았다

아무래도 해당 강의 자체가 비전공자 및 웹개발 경험이 없는 사람도

들을 수 있게 기본 개념부터 알려주다보니 전공자나 웹개발 경험이 있는

사람들에게 1주차는 기본적인 웹개발의 원리와 구조를 복습하는 느낌이 아니었나 싶다.

참고로 해당 강의를 통해 4개월간 파이참pro 버전을 지원하지만

VSC에 익숙해진터라 그냥 VSC를 이용하고 있다ㅋㅋㅋ😁

나는 부트스트랩과 같이 오픈소스 프레임워크를 사용한 개발은 처음이었는데

확실히 웹개발은 트렌드를 잘 이해하고 무작정 처음부터 만드는 것이 아닌

오픈소스를 잘 활용하여 시간도 절약하고 과정에서 다양한 기능 및 디자인을 사용하는 것이 핵심인 것 같다.

티스토리툴바