[Day 46] 개발 지식 습득

📍목차
1. 웹 web
2. 프론트엔드 / 백엔드
3. HTML
4. CSS
5. JavaScript
6. 실습

---

1. 웹 WEB

World Wide Web 의 줄임말

: 전 세계적으로 분산된 수많은 문서와 기타 리소스들이 서로 연결되어 있는 거대한 정보의 네트워크

 

1) 기초 구성요소

• HTML (콘텐츠 의미 / 구조 정의 = 뼈대 구조)
• CSS (모양 / 표현 담당 = HTML에 스타일 입히는 것)
• JavaScript (기능 / 동작 담당)

→ 웹은 주로 HTML로 작성된 웹페이지 형식으로 제공되며, 웹브라우저를 통해 열람할 수 있다. 

 

2) 발전

C언어 (1972년)

HTML (1991년) 최초공개

Python (1991년)

R studio (1993년)

JAVA (1995년)

JavaScript (1995년)

CSS (1996년)

PHP (1995년)

Node.js (2009년) 자바스크립트 런타임 환경

C# (2000년)

React (2013년) 자바스크립트 라이브러리

Swift (2014년)

 

★ 초기 언어인 C언어에서 시작하여 Python, Java, PHP와 같은 범용 언어로 분화 및 발전

★ 웹 개발의 핵심인 HTML, CSS, JavaScript가 등장 / JavaScript는 Node.js , React등으로 생태계 확장

★ Swift, C# 등 다양한 목적의 현대적인 언어 등장

 

3) 동작

상호작용

사용자가 서버에 들어가고 싶은 주소 URL을 요청

→ 서버가 데이터베이스를 통해 데이터 조회

→ 데이터베이스는 서버에 데이터 전달

→ 서버가 사용자에서 파일 전송

---

2. 프론트엔드 / 백엔드

프론트엔드: 사용자 인터페이스 UI를 다룬다.

(HTML, CSS, JavaScript를 통해 사용자와 서비스가 상호작용하는 모든 것)

백엔드: 서버와 데이터처리를 다룬다.

(선호하는 언어를 선택하여 서버 / 데이터처리)

---

3. HTML

Hyper Text Markup Language : 프로그래밍 언어가 아닌 콘텐츠의 구조를 정의하는 마크업 언어

• 웹페이지의 구조를 만드는 뼈대 역할
• 우리가 보는 웹사이트의 글, 사진, 버튼, 링크 등을 어떻게 배치할지 알려주는 언어
• Hyper Text는 정해진 순서 없이, 참조를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트

• HTML은 태그를 사용하여 문서의 구조를 정의한다. (확장자 .html / 파일 안에 HTML, CSS, JS 모두 작성 가능)
• 웹을 이루는 가장 기초적인 구성요소, 웹 콘텐츠의 의미와 구조 정의

---

4. CSS

Cascading Style Sheets의 줄임말 : 웹페이지의 모양/표현을 담당하는 스타일 시트 언어

• HTML이 웹페이지의 구조를 정의하고, CSS는 이 구조를 꾸며주는 역할

---

5. JavaScript

JS (JavaScript)는 웹페이지의 기능/동작을 담당하는 프로그래밍 언어

• HTML과 CSS로 웹페이지의 모양과 구조를 정의하고, JS는 사용자와 상호작용하거나 동적인 기능을 추가하는 역할

---

6. 실습

1) 새로운 폴더 만들기

2) Visual Studio에서 파일 열기

3) 코드 작성

4) 이미지 사용

폴더 안의 파일 구조

Visual Studio 활용

HTML 웹페이지

• ! + enter: HTML 구조 코드
• <h1> ~ <h4>: 제목 크기
• <hr />: 구분선
• <p>: 문단
• <br />: 줄 바꿈
• cmd + / : 주석
• <i>: 기움글꼴
• <b>: 볼드체
• <ol>, <li>: 숫자 목차
• <ul>, <li>: 점 목차
• <image src="" alt="" width="">: 이미지 삽입, 사진 설명, 사진 크기

---

▼ 참고 링크

UI 레퍼런스

https://www.cta.gallery/

CTA.gallery | The Best Call-to-Action Inspiration for Designers

https://www.uidesign.tips/ui-tips

UI & UX Design Tips by Jim Raptis.

https://wordpress.com/ko/

마음대로 만들어나가는 WordPress

---

프로젝트 시작 전 UI-Tips 내용 정리 및 공부

 

---

배지 UI design

 

 

💬 오늘도 학교에서 사용하고 배우던 내용과 비슷한 내용을 배웠다. 
디자인과 개발이 생각보다 더 가까이 있는 것 같다는 생각을 다시 한 번 하게 됐다.