[정처산기] 필기준비 : 화면 구현(2) [UI 구현하기]

---

[정처산기] 필기준비 : 화면 구현(1) [UI 설계 확인하기]

---

2. UI 구현하기

2-1. UI구현 지침 확인

1) W3C(World Wide Web Consortium)

W3C(World Wide Web Consortium)는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 국제적인 컨소시엄 조직으로, W3C의 설립 취지는 웹의 지속적인 성장을 도모하는 프로토콜과 가이드라인을 개발하여 월드 와이드 웹의 모든 잠재력을 이끌어 낸다는 목적으로 설립

 

2) 한국형 웹 콘텐츠 접근성 지침(KWCAG)

• 장애인이 비장애인과 동등하게 웹 콘텐츠에 접근할 수 있도록 웹 콘텐츠를 제작하는 방법에 관하여 기술
• 웹 콘텐츠 저작자 및 개발자, 웹 사이트 설계자 등이 장애인 접근성을 준수하여 콘텐츠를 쉽게 제작할 수 있도록 돕는 지침들을 제공
• 기존의 ‘인터넷 웹 콘텐츠 접근성 지침’(KICS.OT-10.0003, 2005.12.21)에 해외 웹 관련 표준 및 기술 동향을 최대한 반영하여 개정
• 해외의 ‘웹 콘텐츠 접근성 가이드라인 2.0(WCAG 2.0: Web Content Accessibility Guidelines 2.0)’을 국내 실정에 맞게 반영

3) 전자정부 웹 표준 준수 지침

전자정부 웹 사이트 이용자가 특정 운영 체제나 웹 브라우저에 상관없이 접속할 수 있도록, 정부에서 전자정부시스템 구축 시 반영해야 하는 최소한의 규약을 정의

 

4) 웹의 3요소

웹(Web) 3요소 / 참고 : NCS 학습모듈 교재

웹 콘텐츠 접근성(사용성) 지침 준수를 위한 고려 사항 / 참고 : NCS 학습모듈 교재

---

2-2. UI 구현

1) 서버(Server)와 클라이언트(Client)

서버와 클라이언트 관계 / 참고 : NCS 학습모듈 교재

 

(1) 서버

클라이언트에게 네트워크를 통해
정보나 서비스를 제공하는 컴퓨터 또는 프로그램

 

• 웹 서버의 기능은 HTML 문서(웹 페이지)를 클라이언트로 전달
• HTML 문서(웹 페이지)에는 그림, CSS, 자바스크립트가 포함
• 대표적인 종류로는 Apache, IIS, nginx, GWS 등이 있음

 

웹 서버의 종류 / 참고 : NCS 학습모듈 교재

 

(2) 클라이언트

네트워크를 통하여 다른 서버 시스템 상의 컴퓨터에
원격 서비스에 접속할 수 있는 응용 프로그램이나 서비스

 

• 웹 브라우저에 URL을 입력하여 그 URL에 해당하는 웹 서버로 웹 페이지에 대한 요청을 전달
• 대표적인 종류로는 파이어폭스, 크롬, IE 등이 있음

 

웹 클라이언트(웹 브라우저) 종류 / 참고 : NCS 학습모듈 교재

 

2) 웹 사이트(Web Site)와 웹 페이지(Web Page)

웹 사이트는 인터넷 프로토콜 기반의 네트워크에서 URL을 통하여 보이는 웹 페이지들의 묶음
(월드 와이드 웹(WWW, World Wide Web) 상에 있는 개개의 문서를 의미)

 

웹 페이지 편집 도구의 종류 / 참고 : NCS 학습모듈 교재

 

3) HTML(Hyper Text Markup Language)

HTML은 마크업 언어로서 웹 페이지를 표현하는 언어이다.

 

(1) HTML의 구조

HTML 기본 구조 / 참고 : NCS 학습모듈 교재

HTML의 기본 태그 / 참고 : NCS 학습모듈 교재

 

(2) HTML 태그의 이해

• HTML의 모든 태그는 시작과 끝 태그로 이루어진다.
• HTML 태그에는 속성을 지정할 수 있다.
• 웹 브라우저에 보여지는 내용들을 표현한다.

(3) HTML의 레이아웃 관련 태그

HTML 레이아웃 관련 태그 위치 / 참고 : NCS 학습모듈 교재

 

4) CSS(Cascading Style Sheets)

(1) CSS 문법

CSS 문법 예시 / 참고 : NCS 학습모듈 교재

 

(2) CSS 선택자

① 공용 선택자(Universal Selector. 일반 선택자)

HTML 요소 모두에 스타일이 적용

공용 선택자 예시 / 참고 : NCS 학습모듈 교재

 

② 태그 선택자(Type Selector)

지정한 태그에 대하여 스타일이 적용

태그 선택자 예시 / 참고 : NCS 학습모듈 교재

 

③ 클래스 선택자(Class Selector)

특정 HTML 요소들을 그룹화하여 스타일을 지정

클래스 선택자 예시 / 참고 : NCS 학습모듈 교재

 

④ 아이디 선택자(ID Selector)

특정 ID를 부여하여 ID에 스타일을 지정

아이디 선택자 예시 / 참고 : NCS 학습모듈 교재

 

⑤ CSS 선택자 사용 예시

CSS 선택자 사용 예시 / 참고 : NCS 학습모듈 교재

 

5) 자바스크립트(JavaScript)

JavaScript 구현 예제의 소스 코드 예시 / 참고 : NCS 학습모듈 교재

외부 JavaScript 파일을 적용하는 방법 예시 / 참고 : NCS 학습모듈 교재

HTML DOM의 예시 / 참고 : NCS 학습모듈 교재

---

2-3. UI테스트

1) 테스트 케이스의 작성

어떤 실행 환경에서 어떤 입력 값들을 부여하여 원하는 결과가 정확히 나오는지를 판단할 수 있도록 작성

 

2) 유효성 검사

HTML 문서 작성 후, 문법 및 규칙 등에 실수한 부분이 있는지 검사

 

테스트 절차 / 참고 : NCS 학습모듈 교재

분야별 테스트 내용 / 참고 : NCS 학습모듈 교재

사용성 테스트 케이스 예시 / 참고 : NCS 학습모듈 교재

웹 접근성 테스트 예시 / 참고 : NCS 학습모듈 교재

호환성 테스트 예시 / 참고 : NCS 학습모듈 교재

입출력 자료 테스트 케이스 예시 / 참고 : NCS 학습모듈 교재

 

참고자료 : https://www.ncs.go.kr

---

[정처산기] 필기준비 : SQL활용(1) [기본 SQL 작성하기]

---