[ECC-프론트엔드 2팀] 3주차 스터디

 

교재: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 1장 ~ 2장

공부한 페이지: pp. 15~42

실습한 내용:  https://github.com/HongYeonLee/ECC-Frontend-Study

GitHub - HongYeonLee/ECC-Frontend-Study: ECC 49기 FW 프론트엔드 2팀 스터디 내용을 기록하는 레포지토리입

 

---

목차

 

• 1-1 웹 개발 알아보기
• 1-2 웹 개발, 어디서부터 시작할까

 

• 2-1 웹 브러우저와 웹 편집기
• 2-2 웹 개발 환경 설정하기

---

1-1 웹 개발 알아보기

 

웹 사이트의 종류

1. 정적 사이트 (static site) - 사용자에게 정보를 보여주기만 하는 사이트, 상호작용 없음
2. 동적 사이트 (dynamic site) - 정보를 보여주는 것뿐만 아니라 사용자에게 서비스와 기능을 제공함  

웹 개발은 사용에게 서비스와 기능을 모두 제공하는 것을 목표로 한다

 

서버와 클라이언트

서버 - 사용자에게 정보를 제공해주는 쪽, 인터넷에 연결된 컴퓨터

클라이언트 - 정보를 요청하는 쪽, 사용자가 사이트에 접속하려고 하는 디바이스

로그인 기능을 예시로 들자면,

클라이언트는 아이디와 비밀번호를 입력해 서버에 로그인을 요청한다.

서버는 저장된 정보 중에서 입력한 정보와 일치하는 것이 있는지 찾는다.

일치한다면 로그인 성공 화면을, 일치하지 않는다면 로그인 실패 화면을 클아이언트에게 전달한다.

 

웹 개발의 종류

1. 프론트엔드 - 웹 사이트의 디자인, 사용자의 동작에 반응하는 기능 등을 개발, HTML, CSS, 자바스크립트 등 이용
2. 백엔드 - 웹 사이트의 정보를 저장하는 데이터 베이스 설계 및 처리 등을 개발, 자바, PHP, 파이썬 등 이용

 

1-2 웹 개발, 어디서부터 시작할까

 

 

HTML

• 웹 문서의 뼈대를 만드는 역할
• 웹 브라우저의 제목, 본문, 이미지, 표와 같은 웹 요소를 알려주는 역할

CSS

• 웹 문서를 꾸미는 역할
• 다양한 디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인을 만드려면 CSS를 반드시 공부해야 한다.

자바스크립트

• 사용자의 동작에 웹 문서가 반응할 수 있도록 하는 역할
• 자바스크립트 기반의 프레임워크를 많이 사용한다

프레임워크

• 프로그램을 만들 때 필요한 여러 기능을 쉽게 구현하도록 도와주는 도구
• 웹 프레임워크는 로그인이나 댓글과 같이 자주 쓰는 기능을 제공해 개발자가 쉽게 개발할 수 있도록 함

라이브러리

• 프레임워크와 비슷하게 개발자에게 유용한 기능을 제공해줌
• 그러나 프레임워크와 다르게 개발의 주도권이 개발자에게 있음

프론트엔드 개발을 위한 기술

 

 

백엔드는 화면에 보이지 않는 모든 영역을 다루므로 개발 분야가 다양하다. 서버의 동작뿐만 아니라 서버와 클라이언트 간의 정보를 저장 및 관리하는 데이터베이스도 다룰 줄 알아야 한다.

 

백엔드 개발을 위한 기술

 

---

 

2-1 웹 브라우저와 웹 편집기

 

웹 브라우저

• 웹 사이트를 방문할 때 사용하거나 개발자가 만든 문서를 화면에 나타내는 프로그램

 

웹 편집기 (코드 편집기)

• HTML, CSS, 자바스크립트 소스를 입력하는 프로그램
• 메모장부터 전문 편집기까지 텍스트를 입력할 수 있는 프로그램이면 모두 편집기로 사용할 수 있다
• Notepad++, 에디트 플러스, Textmate(macOS전용), Coda, VSCode 등이 있다
• 웹 브라우저 화면에 코드를 입력해 바로 결과를 볼 수 있는 웹 기반 편집기도 있다

 

2-2 웹 개발 환경 설정하기

• 비주얼 스튜디오 코드 내려받기

기존에 내려받은 것을 이용했다

 

• 확장 기능에서 한글 언어 팩 찾고 설치하기

 

 

• 비주얼 스튜디오 코드의 색 테마 변경하기

 

밝게 테마로 변경하였다

 

• 작업 폴더 추가하기

 

자료를 내려받아 기존의 실습 폴더에 넣어두었다

 

• 간단한 웹 문서 만들기

 

• 코딩을 위한 글꼴 내려받고 설치하기

 

 

• 비주얼 스튜디오 코드의 글꼴, 글자 크기, 탭 크기 변경하기