데브코스 TIL - Day 6
23년 11월 21일 강의를 들은 내용과 추가로 더 학습한 내용을 기록한 글입니다.
웹 이해
인터넷 (Internet)
전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 International Network의 약자
웹이란? (Web; World Wide Web)
인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 공간
정보를 하이퍼텍스트 형식으로 표현하여 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결, 제공합니다.
- 웹페이지: 페이지 하나하나를 의미
- 웹사이트: 모든 페이지 묶음
웹 브라우저란? (Web broswer)
웹 페이지을 찾거나 읽을 때 사용하는 프로그램
- 예 사파리, 파이어폭스, 인터넷익스플로러, 크롬
웹 구조
클라이언트, 서버
클라이언트(Client): 서비스를 요청하는 컴퓨터 서버(server): 서비스를 제공하는 컴퓨터
Q. 서비스란?
서버는 클라이언트로부터 요청을 받아와 응답을 내려주고,
클라이언트는 서버에 데이터를 요청하고 응답 받는 것을
재화와 서비스의 개념에서 서비스라고 말함
서비스의 종류에 따라 파일 서버/메일 서버/애플리케이션 서버 등으로 나뉨
프로토콜 (HTTP; HyperText Transfer Protocol)
클라이언트와 서버가 정보를 주고 받을 때 지켜야하는 약속
인터넷으로 연결된 클라이언트와 서버는 웹 프로토콜인 HTTP를 사용하여 데이터를 주고 받음
웹 개발 직무 이해
■ 프론트엔드:
- 클라이언트 영역에서 서비스 사용자와 대화하는 인터페이스(웹 화면)를 개발을 담당
- 웹 및 모바일 사용자 인터페이스와 사용자 경험을 개발
■ 백엔드:
- 사용자의 눈에 보이지 않는 서버측에서 클라이언트에서 전달받은 데이터와 요청을 내부 데이터와 연산을 활용하여 처리하고 클라이언트에 결과를 전달하는 것을 담당
- API 작성, 라이브러리 생성, 데이터베이스 통합 등
■ 프론트엔드 개발자의 필수 언어 3가지
웹은 HTML,CSS,Javascript로 이루어져 있음
- HTML (Hyper Text Markup Language)
- 웹 페이지 구성 요소들의 구조 (뼈대)
<태그></태그>를 사용하여 구조와 의미를 정의함
- CSS
- 웹 페이지 구성 요소들을 스타일(표현)하는 언어
- 콘텐츠를 크기, 색상, 위치 변경 등으로 스타일을 변경함
- Javascript
- 웹 페이지 구성 요소들이 동작할 수 있도록 해줌 → 웹 페이지를 동적으로 만드는 언어
- 웹 페이지가 사용자와 상호작용할 수 있도록 도와주는 언어
◎ 기본 구조
<!DOCTYPE html>- 브라우저에게 문서 종류를 알려주는 정보
<html lang="en"></html>- 언어를 설정해주는 부분
- 한국어 설정
<html lang="ko-KR"></html> - lang은 스크린리더에 영향을 주기 때문에 반드시 정확하게 작성해주어야함
<head></head>- 메타데이터를 작성
<meta /> - 메타데이터? 다른 데이터를 설명해주는 데이터
<meta charset="UTF-8" />- 문자 인코딩을 알려주는 속성
- UTF-8은 다국어 지원을 의미
<meta name="viewport" content="width=device-width">- 뷰포트 너비에서 페이지가 렌더링되도록함, 모바일 브라우저가 뷰포트보다 넓은 페이지를 렌더링한 후 축소하는 것을 방지
- 메타데이터를 작성
<title></title>- 페이지를 나타내는 제목
- 이모지, 특수문자 사용 지양
- 검색엔진에 노출될 때 특수문자가 포함된 제목은 SEO 엔진이 걸러냄
- 각 페이지를 나타낼 수 있는 핵심 키워드로 작성
<body></body>- 사용자가 보는 화면에 출력될 내용 작성
참고 사이트
This post is licensed under CC BY 4.0 by the author.