빈태그 사용 시 웹접근성



<div class="boxHeight"></div>


간혹 위와 같은 빈 태그들을 발견 할 수 있다.
이런 빈 태그는 웹접근성에 위반 되는것일까?


웹접근성에서 문법오류는 아래의 내용에서만 평가된다고 한다.


 1. 태그의 열고닫음 오류
 2. 태그의 중첩오류
 3. 태그의 중복 속성 선언오류, 중복 id 선언오류

그러므로 위와 같은 빈 div 태그의 경우 웹접근성 오류에 해당되지 않는다.

(참고 : 빈 링크 <a href="#"></a>로 제공되는 경우 키보드 이동 및 초점의 이동이 의미없는 곳으로 이동되어 스크린리더 또는 키보드를 사용하는 분들에게 혼란을 줄수 있기 때문에 웹접근성에서 오류로 평가될 수 있다.)



웹표준 검사(https://validator.w3.org/)에서 확인해 본 결과, 웹표준 오류로 발견되지 않는다.

따라서 빈 태그의 사용웹접근성, 웹표준 위배되지 않는다고 보여진다.



'Front-end dev > 웹표준ㆍ웹접근성' 카테고리의 다른 글

(웹표준/웹접근성) table  (484) 2018.11.28
(웹접근성) PC 심사 환경/기준  (865) 2018.11.27
웹접근성 swiper  (1119) 2018.09.21

모델-뷰-컨트롤러(Model-View-Controller, MVC)



모델-뷰-컨트롤러(Model-View-Controller, MVC)는 


소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴이다.
이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나
그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있다.



MVC에서 

- 모델은 애플리케이션의 정보(데이터)를 나타내며,
- 는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고,
- 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리한다.



구성요소

컨트롤러는 모델에 명령을 보냄으로써 모델의 상태를 변경할 수 있다. (ex : 워드 프로세서에서 문서를 편집하는 것)
  또, 컨트롤러가 관련된 뷰에 명령을 보냄으로써 모델의 표시 방법을 바꿀 수 있다. (문서를 스크롤하는 것)
- 모델은 모델의 상태에 변화가 있을 때 컨트롤러와 뷰에 이를 통보한다. 이와 같은 통보를 통해서 뷰는 최신의 결과를 보여줄 수 있고,
  컨트롤러는 모델의 변화에 따른 적용 가능한 명령을 추가/제거/수정할 수 있다.
  어떤 MVC 구현에서는 통보 대신 뷰나 컨트롤러가 직접 모델의 상태를 읽어 오기도 한다.
- 는 사용자가 볼 결과물을 생성하기 위해 모델로부터 정보를 얻어 온다.


[웹 애플리케이션에서 일반적인 MVC 구성요소 다이어그램]



모델
모델(model)이란 어떠한 동작을 수행하는 코드를 말한다. 표시 형식에 의존하지 않는다. 다시 말해, 사용자에게 어떻게 보일지에 대해 신경쓰지 않아도 된다. 모델은 순수하게 public 함수로만 이루어진다. 몇몇 함수들은 사용자의 질의(query)에 대해 상태 정보를 제공하고 나머지 함수들은 상태를 수정한다.

MVC에서 모델은 여러 개의 뷰(view)를 가질 수 있다. 뷰는 모델에게 질의를 하여 모델로 부터 값을 가져와 사용자에게 보여준다.

컨트롤러
MVC의 뷰는 여러 개의 컨트롤러(Controller)를 가지고 있다. 사용자는 컨트롤러를 사용하여 모델의 상태를 바꾼다. 컨트롤러는 모델의 mutator 함수를 호출하여 상태를 바꾼다. 이때 모델의 상태가 바뀌면 모델은 등록된 뷰에 자신의 상태가 바뀌었다는 것을 알리고 뷰는 거기에 맞게 사용자에게 모델의 상태를 보여 준다.

원리
자바언어에서 모델은 java.util.Observable을 상속(extends)받아 만들 수 있다. 
모델에는 현재의 상태 정보를 변경하거나 다른 클래스에게 알릴 수 있는 함수가 있어야 한다. 
모델의 상태를 변경하는 함수(mutator)는 setChanged()와 notifyObservers()를 호출하여야 한다. 
NotifyObser는 모델에 등록된 모든 뷰에게 업데이트 메시지를 보내게 된다. 
뷰는 java.util.Observer를 implement하여 만들면 update method를 구현할 수 있다. 
update함수의 두 번째 매개변수는 Object 모델에서 넘어온 추가정보를 받는 데에 사용된다.

interface Observer {
    void update(Observable t, Object o);
}

뷰는 반드시 모델에게 질의하여 업데이트하는 부분이 구현되야 한다. 
모델은 addObserver라는 함수를 이용하여 뷰를 자신에게 등록시킨다. 
모델은 자신에게 등록된 모든 뷰를 기억하고 있다가 자신의 상태가 바뀌게 되면 등록된 모든 뷰에 notify 함수를 호출하여 뷰를 update시킨다. 
모델은 뷰를 여러 개 가질 수 있다. MVC에서는 이것을 허용하고 있다. 또한 뷰도 여러개의 모델에 등록될 수 있다.


'Front-end dev > Etc.' 카테고리의 다른 글

codepen 불러오기  (587) 2020.07.08
vscode와 Git 연동하기  (530) 2020.01.17
[Node.js] listen EADDRINUSE Error  (514) 2020.01.06
Front-end 로드맵(v.2020)  (887) 2020.01.03
Front-end 로드맵(v.2018)  (518) 2018.03.29

memo) error



C:\Users\CI\Desktop\AngularT\angular-tour-of-heroes>ng serve

Your global Angular CLI version (1.7.0) is greater than your local
version (1.6.1). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".
module.js:538
    throw err;
    ^
Error: Cannot find module '@angular-devkit/core'
    at Function.Module._resolveFilename (module.js:536:15)
    at Function.Module._load (module.js:466:25)
    at Module.require (module.js:579:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\CI\Desktop\AngularT\angular-tour-of-heroes\node_modules\@angular-devkit\schematics\src\tree\virtual.js:10:16)
    at Module._compile (module.js:635:30)
    at Object.Module._extensions..js (module.js:646:10)
    at Module.load (module.js:554:32)
    at tryModuleLoad (module.js:497:12)
    at Function.Module._load (module.js:489:3)


solution // npm install --save-dev @angular/cli@latest


'Front-end dev > Angular || Ionic' 카테고리의 다른 글

Angular 명령어  (558) 2020.01.07
cordova-plugin-camera  (909) 2020.01.06
memo) Error  (526) 2020.01.06

+ Recent posts