[이스트소프트 오르미] 3일차

웹 개발 이해

프론트엔드란?

사용자가 실제로 보는 부분으로 HTML, CSS, JS로 프로그래밍한다.

• HTML - 웹의 기본 구조(뼈대, 정적인 부분)
• CSS - 디자인과 스타일(예뻐져라)
• JS - 동작과 기능(사용자와 상호작용, 동적인 부분)

백엔드란?

보이지 않는 곳에서 데이터를 처리하고 저장.

웹 서버, 웹 어플리케이션(WAS), DB로 구성된다.

브라우저

웹페이지를 표시하고 사용자가 웹 페이지와 상호작용할 수 있는 SW

주요역할

• 웹 리소스(HTML, CSS, JS 등)를 가져와 화면에 표시
• 사용자가 링크를 클릭하거나 폼을 제출할 수 있는 인터페이스 제공
• 렌더링
• 보안 및 개인정보 보로 기능 제공

구성요소

여러 서로 다른 기능을 가진 브라우저(크롬, 엣지, 파폭 등)가 있지만 기본 구성 요소는 같다

1. 사용자 인터페이스(북마크, 이전/다음 페이지 버튼 틍 사용자가 상호작용하는 요소)
2. JS 해석기
3. 네트워킹(HTTP 요청을 생성, 서버로부터 웹 페이지의 리소스 주고 받음)
4. 데이터 저장소(쿠키, 로컬 스토리지, 세션 스토리지 관리)
5. 렌더링 엔진(HTML, CSS를 해석해 화면에 표시. Blink(크롬), Gecko(파폭), Webkit(사파리))

렌더링 엔진의 렌더링 과정

HTML 기본 구성 요소

텍스트, 이미지, 버튼 등 있지만 코드를 까보면 모두 태그(<> </>)로 이루어져 있음

ex) <h1>Hello World!</h1>

HTML 속성

태그에 정보를 제공

<태그 속성이름 = “속성괎”>내용</태그>

주요 속성

• src : 파일 경로
• href : 하이퍼링크 대상 URL
• alt : 이미지에 대한 대체 텍스트
• class : CSS 스타일 적용을 위한 클래스명
• id : 고유 식별자

블록 요소 인라인 요소

블록 요소

• 너비 : 전체 너비 차지
• 줄바꿈 : 자동 줄 바꿈
• 구조 : 레이아웃 구성하는 데 주로 사용

인라인 요소

• 너비 : 필요한 만큼 차지
• 줄바꿈 : 없음
• 텍스트 스타일링, 링크 등 문쟁 내부에 사용

Form

주요 역할

• 데이터 수집
• 데이터 전송
• 사용자 인증
• 검색 기능

ex) 회원가입 폼

주요 컴포넌트 : input, textarea, select, radio, button

Input

사용자로부터 데이터를 입력받는 요소

다양한 type 속성 사용 가능(text, password, email 등)

주요 속성 : type, name, value, paceholder, disabled, required

Textarea

사용자로부터 여러 줄의 텍스트를 입력받기 위한 여러 줄의 입력 필드

주요 속성 : rows(표시할 높이), cols(표시할 너비), name

Select

드랍다운 목록 생성

주요 속성 : multiple(다중 선택 가능), name

Button

말 그대로 기능 추가 가능한 버튼

종류 : submit(폼 데이터를 서버로 제출), reset, button(js와 함께 이벤트 처리)

Label

Form 내의 입력 필드의 설명을 제공

역할

• 라벨 클릭 시 연결된 입력 필드로 포커스 이동
• 시각적 구조와 일관성 제공

for 속성을 타고 id를 따라감

Copy

<label for="id">아이디:</label> <br>
<input type="ID" id="id" name="id">

Fieldset

HTML에서 관련된 입력 필드를 그룹화하고 시각적으로도 구분하기 위해 사용

주로 Form 내에서 사용 묶어서 전달할 때 유용

Legend

필드셋의 제목

Form 정리

• 목적 : 사용자로부터 데이터를 수집해 서버에 전송
• 구조 : form 태그로 감쌈
• 제출 방식 : get/post
• 데이터 처리 : action 속성에 지정된 서버쪽 스크립트로 처리

주요 속성들

• action : 데이터가 제출될 URL을 지정. 서버 스크립트 파일이나 API 엔드포인트를 가리킴
• method : 전송 HTTP메소드 지정. get/post
• enctype : 파일 업로드 시 데이터 인코딩 방식
• name : 양식의 이름. 서버에 데이터를 보낼 때 구분하기 위해 부르는 이름

Autocomplete 속성

자동완성 기능 제공함

주로 input 태그에 속성으로 사용