[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할

[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할

반응형

 

---

1. 백엔드와 프론트엔드

• 백엔드 : 연산 및 처리 등 기능적인 부분을 담당
• 프론트엔드 : 사용자에게 예쁘게 보여주는 시각적 부분을 담당

반응형

 

 

---

2. HTML

• 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 구조를 담당
• 눈,코,입 재료들만 열거되어있음

반응형

 

 

 - CSS, JS가 없이 HTML만 있으면 웹사이트가 아래와 같이 구조(재료)만 나온다.

 

 

 

---

반응형

 

3. CSS

• 실제 화면에 표시되는 방법(색상,크기,폰트,레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.
• 눈, 코, 입이 위치에 맞게 정적으로 정렬되어있음

 

 

 

---

반응형

 

4. JavaScript (JS)

• 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당
• 눈, 코, 입이 움직임 

 

 

---

반응형

 

5. 웹사이트 동작 절차

 ① 주소창에 페이지 주소를 입력하면 서버에 접속을 요청한다

 ② 서버는 이에 응답하여 HTML (구성재료들)를 제공하며 응답한다

 ③ 사용자(로컬)는 HTML을 받은 후 추가 기능들을 요청한다.

 ④ 서버는 CSS(정적이미지), JS(동적이미지), JPG(사진) 등 추가 기능들을 제공하며 응답한다

 

 

 

---