정보처리기사[실기 핵심 정리] - UI 구현

레이아웃(Layout)의 개념

• 특정 공간에 여러 구성 요소를 보기 좋고 효과적으로 배치하는 작업

HTML5

1) HTML5 개념

• HTML5는 월드와이드 웹을 통해 정보를 표현하기 위한 마그업 언어의 5번째 주요 버전이다.
• 웹페이지의 기본 구조를 담당한다

 

2) HTML5 특징

특징	설명
멀티미디어	플러그인 없이 동영상,음악을 웹 브라우저상에서 직접 재생할 수 있다.
그래픽	SVG와 CANVAS를 이용하여 2차원 그래픽을 표현할 수 있다.
통신	웹 소켓을 통해 실시간 양방향 통신이 가능하다.
지리적 위치	GPS를 활용한 위치 확인과 장치 접근이 가능하다
오프라인 작업	로컬 스토리지와 오프라인 캐시를 통해 오프라인에서도 작업이 가능하다.

 

CSS

1) CSS 개념

• HTML과 함께 웹페이지를 구성하는 핵심 요소이다.
• 웹 문서의 디자인 요소, 즉 색상, 크기, 이미지 크기 및 위치, 배치 방법 등을 담당한다.

 

2) CSS 특징

특징	설명
디자인 분리	● HTMl부터 디자인 요소를 분리하여 정의할 수 있다. ● 구조와 디자인이 분리되어 각각의 유지 관리와 개선이 용이하다.
재사용성	● 잘 정의되 CSS는 여러 웹 페이지에 걸쳐 재 사용될 수 있다.
동적 디자인	● 자바스크립트와의 연계를 통해 동적인 콘텐츠 표현과 디자인 변경이 가능하다.
반응형 웹	● 다양한 기기에 맞게 콘텐츠를 탄력적으로 변경하는 반응형 웹 디자인을 구현할 수 있다.

 

3) CSS3

• css3는 이전 버전인 css2와 호완되면서도 다양한새로운 기능을 제공하는 CSS의 최신 표준이다.

 

JavaScript

1) JavaScript 개념

• JavaScript는 모질라 재단에 의해 개발된 프로토타입 기반을 스크립트 언어이다.
• 클라이언트 측에서 웹 페이지의 동적 동작을 담당한다.

 

2) JavaScript 특징

특징	설명
스크립트 언어	웹 문서에 삽이하여 사용된다.
이벤트 중심	사용자 행동에 반응하여 동작한다
프로토타입 기반 객체지향 언어	객체의 확장과 재사용을 쉽게 할 수 있다.
동적 형변환	변수의 데이터 타입이 실행 중에 자동으로 변환된다.
다양한 환경에서의 사용	주로 웹 브라우저에 사용되지만. Node.js 같은 프레임워크를 통해 서버측 프로그래밍에도 사용된다

 

3) JavaScript 프레임 워크

• React
  • 유저 인터페이스 UI 를 만드는데 사용되는 자바스크립트 라이브러리
  • 페이스북에 의해 개발되었으며, 주로 싱글페이지 애플리케이션(SPA)이나 모바일 애플리케이션 개발에 사용
• Vue.js
  • 자바스크립트로 개발된 컴포넌트 기반의 프론트엔드 프레임워크
  • 고성능의 싱글 페이지 애플리케이션(SPA) 구축에 사용
  • Evan You에 의해 개발
• AngularJS
  • 자바스크립트 기반의 오픈 소스 프론트엔드 앱 개발 기법
  • 구글에서 개발
• Ajax(Asynchronous JacaScript and XML)
  • 비동기적인 웹 애플리케이션 제작을 위한 웹 개발 기법
  • 웹 페이지의 일부만을 독립적으로 업데이트할 수 있어, 페이지 전체를 새로 고칠 필요 없이 웹 애플리케이션의 속도와 사용자 경험을 향상시킨다.