[정보처리기사실기] 레이아웃 / HTML / CSS / JS

1과목. 소프트웨어 구축

📒 09. UI 구현

 

계획 - 요구사항 분석 - 소프트웨어 설계 - 구현 - 테스트 - 유지보수

---

1. 화면 구성

(1) 레이아웃(Layout)

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

(2) HTML5

• a) 개념 : 웹페이지의 기본 구조로, 마크업(구조화된) 언어의 5번째 주요 버전
• b) 특징 : 멀티미디어, 그래픽, 통신, 지리적 위치, 오프라인 작업
• c) 시맨틱 요소 : <header>, <nav>, <aside>, <section>, <article>, <footer>
• d) INPUT 요소 : 텍스트 입력, 비밀번호 입력, 라디오 버튼, 체크 박스, 파일 선택, 선택 입력, 버튼, 전송, 필드셋

(3) CSS(Cascading Style Sheet)

• a) 개념 : HTML과 함께 웹 페이지를 구성하는 핵심 요소로 디자인 요소, 배치 방법 등을 담당
• b) 특징 : 디자인 분리, 재사용성, 동적 디자인, 반응형 웹

(4) JavaScript

• a) 개념 : 클라이언트 측 웹 페이지의 동적 동작 담당
• b) 특징 : 스크립트 언어, 이벤트 중심, 프로토타입 기반 객체지향 언어, 동적 형변환, 다양한 환경에서 사용
• c) 프레임워크 : React, Vue.js, Angular JS

 

2. UI 관련 용어

(1) 웹 표준

• 월드 와이드 웹에서 사용되는 공식 표준이나 기술 규격

(2) 웹 호환성

• 다양한 하드웨어 및 소프트웨어 환경에서도 웹 서비스가 동일하게 작동하는 능력
• 웹 표준을 지키면 웹 호환성이 좋아짐

(3) 웹 접근성

• 장애인과 비장애인 모두가 웹 사이트에 동등하게 접근, 이용할 수 있어야 함

(4) 반응형 웹

• 다양한 디바이스에서 화면 크기에 맞춰 내용을 적절하게 표시하는 웹 디자인 방식

(5) 인포그래픽

• 정보+그래픽, 복잡한 정보를 시각적으로 쉽고 명확하게 전달하는 방법

(6) 브랜드 아이덴티티(BI)

• 특정 브랜드의 가치와 의미를 반영한 심적 이미지

(7) 내비게이션

• 웹 사이트 내에서 하이퍼링크를 통해 정보 탐색

(8) 아코디언

• 사용자가 필요에 따라 확장하거나 축소할 수 있는 패널 형식의 콘텐츠

(9) 플레이스 홀더

• 입력 필드에 예시나 안내 문구 제공하는 간단한 텍스트

(10) 필터링

• 특정 데이터를 제외하거나, 선택적으로 보여주는 기능

(11) 입력 폼

• 사용자가 정보를 입력하고 웹 서버로 전송할 수 있는 기능

(12) 입력 필드

• 사용자가 데이터를 입력하거나 선택할 수 있는 인터페이스 요소

(13) 썸네일

• 큰 이미지를 축소한 작은 버전의 이미지로 크기뿐 아니라 용량도 같이 축소함

(14) 레이블

• 입력 폼의 각 입력 필드를 식별하기 위해 사용되는 텍스트

(15) 대체 텍스트

• 이미지나 그래픽 콘텐츠를 대신하여 제공되는 텍스트

 

💡UI를 구현할 때는 html(구조), CSS(화면 디자인), JS(동적 요소)가 있음

 

참고자료

흥달쌤,  '흥!나게 합격 달성! 2024 정보처리기사 실기 클래스'

1억뷰 N잡