[20230809] 클라우드 플랫폼 기반 웹서비스 개발자 양성 과정 23일차.

양희정·2023년 8월 9일

2023. 클라우드 플랫폼 기반 웹서비스 개발자 양성 과정

목록 보기

22/22

웹 개발 개요

웹 개발의 기본은 웹이다.
웹 개발(Web development)은 웹 사이트(프론트엔드)나 웹 애플리케이션을 생성(백엔드)하는 과정을 말한다.
이는 다양한 과정을 포함하며, 그 중 일부는 웹 디자인, 웹 콘텐츠 개발, 클라이언트-서버 사이드 스크립트 작성, 그리고 네트워크 보안 설정이 포함된다.

웹 개발의 필요성

인터넷이 우리 생활의 많은 부분을 차지하며, 개인이나 기업, 기관들은 정보를 공유하고, 서비스를 제공하며, 제품을 판매하기 위해 웹 사이트나 웹 애플리케이션을 필요로 한다.
웹 개발은 이러한 요구를 만족시키기 위한 핵심 역할을 한다.
프로세스, 체계에 도움을 준다.

웹 개발의 구성 요소

프론트엔드
프론트엔드 개발은 사용자가 직접 보고 상호 작용하는 웹 사이트의 부분을 개발하는 것이다.
주로 HTML, CSS, JavaScript와 같은 기술을 사용한다.
자바 스크립트는 목화스트립트였다가 마케팅적으로 이름을 바꾸어 자바 스크립트로 바뀌었다. 실제 자바와는 다르다.
언어가 제한적이다.
백엔드
백엔드 개발은 서버와 데이터베이스, 애플리케이션의 코어 로직(비즈니스 로직) 등 웹 사이트의 내부 작업을 개발하는 것이다.
여러 프로그래밍 언어와 프레임워크, 데이터베이스 시스템을 사용한다.
*여러, 모든 언어를 사용할 수 있다.

웹 개발 과정
1. 계획 수립 : 웹 사이트의 목적과 목표 설정, 타깃 사용자 정의, 콘텐츠 계획 등을 포함한다.
2. 디자인 : 사용자 경험 (UX)와 사용자 인터페이스 (UI) 디자인 과정을 거친다.
사용자 경험이란 사용자의 편리성을 뜻한다.
3. 개발 : 프론트엔드와 백엔드 개발을 진행한다.
프론트 개발과 백엔드 개발은 동시에 이루어진다.
4. 테스팅 : 기능, 호환성, 성능, 보안 등 다양한 테스트를 진행한다.
5. 배포 및 유지 보수 : 웹 사이트를 호스팅하고, 필요한 경우 업데이트와 유지 보수를 진행한다.

HTML이란?

HTML(HyperText Markup Language)은 웹 페이지를 구조화하고 의미를 부여하는 데 사용되는 마크업 언어이다. 웹 페이지의 제목, 문단, 표, 이미지, 링크 등의 콘텐츠를 정의하고 배치한다.

HTML의 중요성

HTML은 웹의 기초로서 모든 웹 페이지와 웹 애플리케이션의 핵심 요소이다. 웹 개발자는 HTML을 통해 웹사이트의 구조를 생성하고, 사용자가 정보를 쉽게 이해하고 찾을 수 있도록 돕다.

HTML의 구조

: 이 문서가 HTML5 문서임을 브라우저에 알려주는 선언이다.
: HTML 문서의 루트(root) 요소입니다. 모든 HTML 요소는 이 태그 안에 위치한다.
: 웹 페이지의 메타 정보를 포함하는 요소이다. 여기에는 문서 제목, CSS 스타일시트 연결, 문자 집합 선언 등이 위치한다.
: 브라우저 탭에 표시되는 웹 페이지의 제목을 정의하는 요소이다.
: 웹 페이지의 주 내용을 포함하는 요소이다. 텍스트, 이미지, 링크, 리스트, 테이블 등 사용자에게 보여지는 모든 콘텐츠는 이 요소 안에 위치다.
: 주석

<!DOCTYPE html> <!-- JTML5 문법을 따른다 -->
  <html lang="en"> 
<!-- 
lang은 기본 언어를 표시한다.
en으로 쓰여 있어도 영어로만 사용되지 않는다.
정보를 전달해 주는 것으로 정보들을 잘 정리해두면 검색엔진에서 정보를 검색할 때 상위에 올라가게 된다.
-->HTML
    <head> 
      <meta charset="UTF-8"> 
<!-- 브라우저에게 문자나 캐릭터 셋이 무엇이냐 전달해 주는 것. 한글로 하면 깨지기 쉽기 때문에 UTF-8을 따른다. --> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- viewport : 링크 아래 보이는 화면. content="width=device-width 디바이스 넓이를 따르겠다. initial-scale=1.0 1 배율. 100%로 하겠다. 반응형 웹을 만들 때 사용할 수 있다.  --> 
      <title>화면</title> <!-- 기본으로 되어있는 브라우저에 나옴 -->
    </head> 
    <body> 
       <h1>제목</h1>
    <p>내용</p>
  </body>
</html>

HTML 태그와 요소

태그 : 한 문단을 표현할 때 사용하는 태그

<!-- html boby 요소의 특징(기본적인 내용) -->
<!-- html상에 enter로 줄바꿈을 하더라도 화면에서는 변경되지 않는다. -->
안녕하세요.
반갑습니다. 
<p>안녕하세요.</p>
<p>반갑습니다.</p>

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

``` - h 태그 : 제목을 표현할 때 사용하는 태그 (h1 ~ h6) ```

h1 태그입니다.

h2 태그입니다.

h3 태그입니다.

h4 태그입니다.

h5 태그입니다.

h6 태그입니다.

``` - strong, em 태그 : strong - 지정한 요소를 굵게 표시 / em - 지정한 요소를 이탤릭체(기호)로 표시 - br 태그 : 줄을 바꾸어 준다. 단일 태그이기 때문에 종료태그를 붙여주지 않아도 된다. -
: 시작하자마자 닫아버리겠다. 완벽한 문법을 원하는 경우가 있기 때문에 습관적으로 닫아두자. -

: hr 태그. 단일태그. 구분선이다. ```

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

```

양희정

이전 포스트