Client Server Architecture(2 Tier Architecture)
- 리소스가 존재하는 곳, 리소스를 사용하는 앱을 분리시킨 것
- 클라이언트 : 리소스를 사용하는 앱
- 서버 : 리소스를 제공하는 곳
- 클라이언트 - 서버는 요청/응답을 주고받는 관계
- 클라이언트-서버 아키텍처에서는 요청이 선행된 후에 응답이 옴
- 3 Tier Architecture
- 데이터베이스(Database) : 리소스를 저장하는 공간
- 2티어 아키텍처에서 데이터베이스를 추가한 형태
프론트엔드
- 사용자가 마주보는 인터페이스
백엔드
- 서버 측 개발
- 데이터를 저장 및 관리, 웹사이트의 클라이언트 측에서 모든 것이 매끄럽게 작동할 수 있도록 해줌
클라이언트
- 네트워크를 통하여 서버에 접속할 수 있는 응용 프로그램이나 서비스
- Ex. 웹 플랫폼, 스마트폰/태블릿 플랫폼
서버
- 하는 일에 따라 종류가 나뉘어짐
- 파일 서버
- 파일을 제공하는 앱
- 웹 서버
- 웹사이트에서 필요로 하는 정보들을 제공하는 앱
- 메일 서버
- 메일을 주고받을 수 있도록 도와주는 앱
웹 프론트엔드
HTML
- 웹 페이지의 구조를 담당하는 마크업 언어
- 마크업 언어
- 태그 등을 이용하여 문서나 데이터의 구조를 구성하는 언어의 한 가지
- 데이터를 기술하는 정도로만 사용됨
- 프로그래밍 언어가 아님
- 마크업 언어
CSS
- 디자인 요소를 시각화하는 스타일시트 언어
JavaScript
- 사용자와 상호작용할 수 있게 해주는 프로그래밍 언어
웹 개발 과정
- 기획자가 골격을 그리고 이를 HTML로 먼저 작성
- 디자인을 하고 이를 웹페이지에 구현하기 위해 CSS를 작성
- 기능 구현을 위해 JS를 작성
UI(User Interface)
- 인터페이스(interface) : 컴퓨터와 교류하기 위한 연결고리
- Ex. 키보드 인터페이스로 글을 입력, 버튼 모양의 인터페이스를 클릭함으로서 의도한 바를 컴퓨터가 실행
- UI : 일반 사용자가 쉽게 컴퓨터에게 사용자가 의도한 행동을 명령할 수 있게 만든 인터페이스
UX(User Experience)
- UI를 포함하여 사용자가 특정 서비스를 사용하며 직/간접적으로 느끼는 종합적인 만족도
- 웹페이지를 만들 때에는 사용자의 입장에서 편리하게 해당 서비스를 이용하고 조작할 수 있도록 하는 시각적인 도구를 만들고, 사용자의 입장에서 편의를 생각해야 함!
HTML
- 웹 페이지를 구성하는 마크업 언어
- 웹 페이지의 내용 및 골격을 기술하는 언어
- 태그(tag)들의 집합
- 태그(tag) : 부등호(<>)로 묶인 HTML의 기본 구성 요소
- 쌍이 존재
- 여는 순서 및 닫는 순서가 철저히 지켜짐
- 트리 구조를 이룸
- Self-Closing Tag
- 몇몇 태그는 하나의 태그만 사용
- 단일태그 요소에 속하는 태그들은 오프닝 태그도, 클로징 태그도 아닌 Self-Closing Tag
- Ex. <img>(<img />)
- 위 예시와 같이 마지막에 /를 포함하는 것은 선택 사항
CSS
- HTML로 작성된 웹 어플리케이션 구조에 디자인을 적용하는 데에 사용
- 즉, 웹 페이지의 스타일 및 레이아웃을 정의하는 스타일시트 언어
- 독립적으로 기능하지 않음
- HTML이 있어야만 동작할 수 있음
셀렉터(Selector)
- 특정 태그의 이름, id 또는 class를 선택
- 셀렉터로 특정 요소를 선택한 후, 중괄호({}) 안에 해당 요소에 적용할 내용을 작성
- id로 이름 붙여서 스타일링 적용
- id : 하나의 문서에서 하나만 존재해야 함
- id가 있는 요소를 선택할 때에는 #을 이용
- class로 스타일을 분류하여 적용
- 동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해 class 사용
- class를 선택할 때에는 . 을 이용하여 선택
- 여러 개의 class를 하나의 엘리먼트에 적용
- 하나의 요소에 여러 class를 적용할 때에는 띄어쓰기를 통해 class들의 이름을 구분
속성(Property)
- 요소에 적용할 수 있는 내용
- 속성명(property name)과 속성값(property value)을 사용하여 속성을 변경
CSS 스타일 적용 방법
- 인라인 스타일
- 같은 줄에서 스타일 적용
- ex. <span style="color: red;">Hello World!</span>
- 내부 스타일 시트
- CSS 파일 내에 작성하는 내용을
- 외부 스타일 시트
- 외부 CSS 파일에 작성하여 HTML 파일에 적용
- 적용 방법
- <head> 태그 내에 아래와 같이 작성하여 적용
-> <link rel="stylesheet" href="style.css">- rel 속성 : 연결하고자 하는 파일의 역할이나 특징
- href 속성 : 파일의 위치(절대 경로 혹은 상대 경로를 이용)
- <head> 태그 내에 아래와 같이 작성하여 적용
- 인라인 스타일은 관심사 분리 측면에서 권장되지 않는다!
- HTML은 웹 페이지의 구조와 내용만, CSS는 디자인만 담당하여 둘의 역할을 분리하는 것을 의미
자바, 웹 개발을 열심히 공부하고 있습니다!