[실기] 소프트웨어 구축- UI 구현

최초 작성일: 2024-08-26

최종 작성일: 2024-08-26

목표 : 정처기 합격 및 CS 지식 쌓기

UI 구현

계획 분석 설계 구현 테스트 유지운영

1.         화면 레이아웃 구성

(1)레이아웃의 개념 : 특정 공간에 여러 구성을 보기 좋고 효과적으로 배치하는 작업

레이아웃 작성 방법

종류	설명
DIV	DIV는 블록 레벨 요소로 웹 페이지의 주요 구조를 구성한다
SPAN
TABLE
시맨틱 태그	HTML5에서 도입된 시맨틱 태그들은 의미론적으로 명확한 웹 페이지 구조를 제공한다.

 

(2) HTML 5

1)HTML5 개념

HTML5는 월드 와이트 웹을 통해 정보를 표현하기 위한 마크업 언어의 5번쨰 주요 버전이다

웹페이지의 기본 구조를 담당한다

2)HTML5특징

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

 

3)시맨틱 요소

Tag	설명
<header>	헤더 영역 제목, 내비게이션, 검색 등의 내용을 포함
<nav>	메인 메뉴나 목차 등의 정의
<section>	맥락이 같은 요소들을 주제별로 그룹화
<article>	본문의 주요내용이 들어가는 공간
<aside>	본문외의 콘텐츠 영역 사이드 메뉴나 광고등의 영역
<Footer>	푸터 영역 작성자나 회사 정보 등을 포함

4)input 요소

①     텍스트 입력 (text, textarea)
text: 한줄의 텍스트 입력

Text area: 여러줄의 텍스트 입력 <text area> ~</textarea>

②     비밀번호 입력(password)
입력받은 문자를 별표나 작은 원으로 표시

③     라디오 버튼 : 여러 개의 라디오 버튼 옵션 중에서 단 하나만의 값을 선택

④     체크 박스 : 여러 개의 체크 박스 중에서 여러 개의 옵션 값을 선택

⑤     파일 선택(file) : 사용자 컴퓨터 파일을 입력

⑥     선택 입력(select) : 여러 개의 드롭 다운 리스트 중에서 한 개의 옵션을 선택

⑦     버튼 : 사용자가 클릭했을 때 작업을 수행

⑧     전송(submit) : 입력 받은 데이터를 서버로 전송

⑨     필드셋: 관련된 데이터를 하나로 묶어준다

(3) CSS(Casacading Style Sheet)

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

2)CSS 특징

Ÿ   디자인 분리: HTML로부터 디자인 요소를 분리하여 정의할 수 있다.

Ÿ   재사용성: 잘 정의된 CSS는 여러 웹 페이지에 걸쳐 재 사용될 수 있다.

Ÿ   동적 디자인: 자바 스크립트와의 연계를 통해 동적인 콘텐츠 표현과 디자인 변경이 가능하다

Ÿ   반응형 웹: 다양한 기기에 맞게 콘텐츠를 탄력적으로 변경하는 반응형 웹 디자인을 구현할 수 있다

(4)JAVA SCRIPT

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

2)특정

Ÿ   스크립트 언어 : 웹 문서에 삽입하여 사용된다

Ÿ   이벤트 언어: 사용자의 행동에 반응하여 동작한다

Ÿ   프로토타입 기반 객체지향 언어: 객체의 확장과 재사용을 쉽게 할 수 있다

Ÿ   동적 형변환: 변수의 데이터 타입이 실행 중에 자동으로 변환 된다 (VAR a;  )
다양한 환경에서의 사용: 주요 웹 브라우저에서 사용 되지만, 노드 js와 같은 프레임 워크를 통해 서버 측 프로그래밍에도 사용 된다

3)JS 프레임 워크 : 리액트-AJAX, 싱글 페이지 어플리케이션 / VUE.JS / anglar JS(구글)/Ajax(비동기적인-반응을 기다릴 필요 없음. 웹 어플리케이션 제작을 위한 웹 개발 기법, 웹 페이지의 일부만을 독립적으로 업데이트 할 수 있어, 페이지 전체를 새로 고칠 필요 없이 웹 어플리케이션의 속도와 사용자 경험을 향상 시킨다)

Input type :text, text area, radio button, check bot

 

2.UI 관련 용어

용어	설명
웹 표준 (여기 저기 사용가능)	월드 와이드 웹에서 사용되는 공식 표준이나 기술 규격 웹 표준을 따르는 것은 웹 페이지의 호환성, 접근성, 효율성을 보장하는데 중요하다
웹 호환성 (웹 표준을 잘 지키면 웹 호환성이 좋아짐)	-다양한 하드웨어 및 소프트웨어 환경에서도 웹 서비스가 동일하게 작동하는 능력 다양한 웹 브라우저, 운영체제, 디바이스에서의 일관된 사용자 경험을 제공한다
웹 접근성	장야인과 비장애인 모두가 웹 사이트에 동등하게 접근하고 이용할 수 있는 방식 키보드 내비게이션, 스크린 리더 지원, 적절한 색상 대비 등을 포함한다
(화면 크기에)반응형 웹	PC, 모바일 등 다양한 디바이스에서 화면 크기에 맞춰 내용을 적절하게 표시하는 웹 디자인 방식 유연한 레이아웃, 미디어 쿼리 등을 이용하여 화면 크기에 따라 콘텐츠가 자동으로 조정된다
인포그래픽	정보와 그래픽을 결합하여 복잡한 정보를 시각적으로 쉽고 명확하게 전달 하는 방법
브랜드 아이덴티티(BI)	특정 브래든의 가치와 의미를 반영하여 사용자에게 전달하는 심적 이미지 로고, 색상, 폰트, 디자인, 스타일 등을 통해 브랜드의 성격을 나타낸다
내비게이션	웹 사이트 내에서 하이퍼링크를 통해 정보를 탐색하고 접근하는 과정 메뉴바, 탭, 드롭다운 목록 등이 이에 해당
아코디언	사용자가 필요에 따라 확장하거나 축소할 수 있는 패널 형식의 콘텐츠 공간을 절약하면서 필요한 정보를 효과적으로 제공한다
플레이스 홀더	입력 피드에 예시나 안내문구를 제공하는 간단한 텍스트
필터링	웹 사이즈에서 원하지 않은 데이터를 제외하거나 특정데이터 선택
입력 폼	사용자가 정보를 입력하고 웹 서버로 전송할 수 있게 하는 웹 페이지의 부분 텍스트 필드, 체크 박스, 라디오 버튼 등 다양한 입력요소가 포함된다
입력 필드	사용자가 데이터를 입력 하거나 선택할 수 있는 인터페이스 요소 텍스트 필드, 드롭다운 메뉴
썸네일	큰 이미지를 축소하여 표시한 작은 버전의 이미지 (전체 이미지 보기 전에 미리보기 제공, 용량 까지 같이 줄임)
레이블	입력 폼의 각 입력 필드를 식별하기 위해 사용되는 텍스트
대체 텍스트	이미지나 그래픽 콘텐츠를 대신하여 제공되는 텍스트 시각 장애가 있는 사용자 들이 스크린 리더로 콘텐츠를 이해할 수 있게 도움을 줌