UI 구현
화면 레이아웃 구성
레이 아웃(Layout)의 개념
- 특정 공간 내에서 여러 구성요소를 보기 좋고 효과적으로 배치하는 작업
- 레이아웃 작성 방법의 종류
- DIV 요소 : DIV는 블록 레벨 요소로, 웹 페이지의 주요 구조를 구성한다.
- SPAN 요소 : SPAN은 인라인 요소로, 텍스트나 소규모 콘텐츠의 그룹화에 사용된다.
- TABLE 요소 : 데이터 표현에 주로 사용되며, 그리드 형태의 레이아웃을 만드는 데에도 사용된다.
- 시맨틱(Semantic) : HTML5에서 도입된 시맨틱 태그들은 의미론적으로 명확한 웹 페잊 구조를 제공한다.
HTML5
1) HTML5 개념
- HTML5는 월드와이드웹을 통해 정보를 표현하기 위한 마크업 언어(HTML, XML, YAML, XAML 등)의 한 종류, 5번째 주요 버전이다.
2) HTML5 특징
- 멀티미디어 : 플러그인 없이 동영상, 음악을 웹 브라우저상에서 직접 재생할 수 있다.
- 그래픽 : SVC와 CANVAS를 이용하여 다양한 2차원 그래픽을 표현할 수 있다.
- 통신 : 웹 소켓을 통해 실시간 양방향 통신이 가능하다.
- 지리적 위치 : GPS를 활용한 위치 확인과 장치 접근이 가능하다.
- 오프라인 작업 : 로컬 스토리지와 오프라인 캐시를 통해 오프라인에서도 작업이 가능하다.
3) 시맨틱 요소
- 시멘틱(semantic)은 '의미'라는 뜻이다. 태그의 이름의 의미만으로도 그 용도를 짐작할 수 있는 태그라는 뜻이다.
예를 들면, 헤더 부분을 만들 때 <div>를 사용해서 블럭을 잡아주는 여러 코드를 입력해야했지만 <header>코드 하나만으로 그 작업들을 모두 해준다는 것이다. ``
<header> : 제목, 네비게이션, 검색 등의 내용을 포함
<nav> : 메인 메뉴나 목차 등을 정의
<section> : 맥락이 같은 요소들을 주제별로 그룹화
<article> : 본문의 주요 내용이 들어가는 공간
<aside> : 본문 외의 콘텐츠 영역, 사이드 메뉴나 광고 등의 영역
<footer> : 작성자나 회사 정보 등을 포함4) INFUT 요소
사용자가 데이터를 입력할 수 있도록, 다양한 입력 동작 유형의 필드를 생성하는 데 사용
- text(텍스트 입력) : 한 줄의 텍스트 입력
- textarea(텍스트 입력) : 여러 줄의 텍스트 입력
- password(비밀번호 입력) : 입력받은 문자를 별표나 작은 원으로 표시
- radio(라디오 버튼) : 여러개의 라디오 버튼 옵션 중에서 단 하나만의 값을 선택
- checkbox(체크박스) : 여러 개의 체크박스 중에서 여러 개의 옵션 값을 선택
- file(파일 선택) : 사용자 컴퓨터의 파일을 입력
- 곰돌이 토끼 강아지 고양이 select(선택 입력) : 여러 개의 드롭다운 리스트(drop-down-list) 중에서 한 개의 옵션을 선택
- 버튼
- submit(전송) : 입력받은 데이터를 서버로 전송
- filedset(필드셋)
관련된 데이터를 하나로 묶어줌
포도
사과
딸기
html 태그 수정 필요
CSS(Cascading Style Sheet)
1) CSS 개념
- HTML로 구성된 요소들의 스타일을 정의하는 문법
- 작성한 HTML 요소에 일대일 또는 다대일로 연결하여 사용
2) CSS 특징
- 재사용성 : HTML요소와 다대일로 연결할 수 있기때문에 공통 CSS를 정의하여 여러 HTML 요소에 재사용이 가능
- 디자인 분리 : HTMl요소(태그)를 작성할 때 스타일 속성을 HTML로 직접 디자인 요소를 작성하지 않고 CSS로 별도 정의하여 연결 후 사용
- 반응형 웹 : 다양한 기기에 맞게 콘텐츠를 탄력적으로 변경하는 반응형 웹 디자인을 구현할 수 있다
- 동적 디자인 : 자바스크립트와의 연계를 통해 동적인 콘텐츠 표현과 디자인 변경이 가능하다
3) CSS3
- CSS3는 이전 버전인 CSS2와 호환되면서도 다양한 새로운 기능을 제공하는 CSS의 최신 표준이다.
- 차세대 웹 개발을 위한 새로운 표준으로, 더 향상된 선택자, 애니메이션, 그리드 레이아웃, 플렉스 박스, 미디어 쿼리 등 다양한 기능을 포함한다.
- CSS의 특정 기능을 개별적으로 개발하고 업데이트를할 수 있게 만들어, 웹 개발의 유연성과 확장성을 크게 향상시켰다.
JavaScript
1) JavaScript 개념
- 모질라 재단에 의해 개발된 프로토타입 기반의 스크립트 언어이다.
- 클라이언트 측에서 웹 페이지의 동적 동작을 담당한다.
- Java랑 관련없음
2) JavaScript 특징
- 스크립트 언어 : 웹 문서에 삽입하여 사용된다.
- 이벤트 중심 : 사용자의 행동에 반응하여 동작한다.
- 프로토타입 기반 객체지향 언어 : 개체의 확장과 재사용을 쉽게 할 수 있다.
객체지향은 프로그래밍의 방법이지 언어의 특징이 아님..., 시험봐야하니까 공부 일단 하자 - 동적 형변환 : 변수의 데이터 타입이 실행 중에 자동으로 변환된다.
- 다양한 환경에서의 사용 : 주로 웹 브라우저에서 사용되지만, Node.js 같은 프레임워크를 통해 서버측 프로그래밍에도 사용된다.
3) JavaScript 프레임워크
- React
- 유저 인터페이스(UI)를 만드는 데 사용되는 자바스크립트 라이브러리
- 페이스북에 의해 개발되었으며, 주로 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용
- Vue.js
- 자바스크립트로 개발된 컴포넌트 기반의 프론트엔드 프레임워크
- 고성능의 싱글 페이지 애플리케이션(SPA) 구축에 사용
- Evan You에 의해 개발
- AngularJS
- 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크
- 다른곳에서 개발 시작 했는데 구글이 개발 주도
- Ajax(Asynchronous JavaScript and XML)
- 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법
- 웹 페이지의 일부만을 독립적으로 업데이트할 수 있어 페이지 전체를 새로 고칠 필요 없이 웹 애플리케이션의 속도와 사용자 경험을 향상시킨다
- 초기 JavaScript 버전에서는 비동기 처리를 지원하지 않거나 까다롭게 구현해야 했기때문에 비동기를 조금더 손쉽게 구현하기 위해 만들어진 라이브러리, 현대 JavaScript에서는 Ajax에서 제공하는 비동기 함수들을 대부분 자체 지원하기 때문에 사실상 필요없는 라이브러리 (React나 Vue.js, AngularJS에서도 비동기 기법을 제공하기 때문에 필요없음)
