document.onkeypress = getKey;

HTML CSS : font-color, font-face 는 없다.

1. IE7을 포함하여, font-color 가 사용될 경우 무시된다. 지원 x
스타일 시트에서는 font-color 가 아닌 그냥 color 를 사용해야 한다.

2. 폰트를 지정하면서 font-face 를 사용하면 역시 스타일이 무시된다.
스타일 시트에서는 font-family 를 사용한다.

'개발노트 > HTML' 카테고리의 다른 글

html font color   (0) 2016.12.07
웹프로그래밍 이해, 클라이언트와 서버  (0) 2016.12.05
DOM 이란?  (0) 2016.12.02

클라이언트와 서버

웹에 연결된 컴퓨터는 클라이언트 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

 

  • 클라이언트는 일반적인 사용자의 인터넷이 연결된 장치들 (예를 들어, 여러분의 컴퓨터는 WI-FI 연결되어 있고, 또는 여러분의 폰은 모바일 네트워크에 연결되어 있습니다) 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어 (일반적으로 파이어폭스 또는 크롬 같은 브라우저) 입니다.
  • 서버는 웹페이지, 사이트, 또는 앱을 저장하는 컴퓨터입니다. 클라이언트의 장비가 웹페이지에 접근하길 원할 서버로부터 클라이언트의 장치로 사용자의 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 됩니다.

 

브라우저란?

브라우저의 주요 기능

브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 문서지만 PDF나 이미지 또는 다른 형태일 수 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.

브라우저는 HTML CSS 명세에 따라 HTML 파일을 해석해서 표시하는데 이 명세는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한다. 과거에는 브라우저들이 일부만 이 명세에 따라 구현하고 독자적인 방법으로 확장함으로써 웹 제작자가 심각한 호환성 문제를 겪었지만 최근에는 대부분의 브라우저가 표준 명세를 따른다.

브라우저의 사용자 인터페이스는 서로 닮아 있는데 다음과 같은 요소들이 일반적이다.

  • URI를 입력할 수 있는 주소 표시 줄
  • 이전 버튼과 다음 버튼
  • 북마크
  • 새로 고침 버튼과 현재 문서의 로드를 중단할 수 있는 정지 버튼
  • 홈 버튼

브라우저의 사용자 인터페이스는 표준 명세가 없음에도 불구하고 수 년간 서로의 장점을 모방하면서 현재에 이르게 되었다. HTML5 명세는 주소 표시줄, 상태 표시줄, 도구 모음과 같은 일반적인 요소를 제외하고 브라우저의 필수 UI를 정의하지 않았다. 물론 파이어폭스의 다운로드 관리자와 같이 브라우저에 특화된 기능도 있다.

 

 웹 어플리케이션의 구성요소

 기능

 

웹 브라우저

웹에서 클라이언트이며, 사용자의 작업 창이라 할 수 있다.

웹 서버 

웹 브라이저의 요청을 받아들이는 곳으로 작업의 결과를 웹 브라이저에게 응담을 하는 곳이다. 요청된 페이지의 로직 및 데이터베이스와의 연동을 위해 어플리케이션 서버에 이들의 처리를 요청하는 작업을 수행

웹 어플리케이션

서버(WAS) 요청된 페이지의 로직 및 데이터베이스와의 연동을 처리하는 부분이다.

데이터베이스 

 데이터의 저장소로 웹에서 발생한 데이터는 모두 이곳에 저장된다. 게시판의 글, 회원의 정보 등

 

 

'개발노트 > HTML' 카테고리의 다른 글

html font color   (0) 2016.12.07
웹프로그래밍 이해, 클라이언트와 서버  (0) 2016.12.05
DOM 이란?  (0) 2016.12.02

DOM 이란?

우선 DOM 이 뭔지 제대로 짚고 넘어갑시다. DOM 은 Document Object Model 의 약자입니다. 이는 객체를 통하여 구조화된 문서를 표현하는 방법이며, XML 혹은 HTML 로 작성됩니다. 웹 브라우저는 이 DOM 을 활용하여 객체에 JavaScript 와 CSS 를 적용하지요. DOM 은 트리 형태로 되어있어서, 특정 node 를 찾을 수도 있고, 수정 할 수도 있고, 제거하거나 원하는 곳에 삽입 할 수도 있습니다.

 

DOM 의 문제점

요즘의 DOM API 는 수많은 플랫폼, 그리고 수많은 브라우저에서 사용되고 있는데, 이 DOM 에는 치명적인 문제점이 하나 있습니다. 그것은 바로, 동적 UI 에 최적화되어 있지 않다는 것 있습니다. HTML 은 자체적으로는 정적이잖아요. 그렇죠? 물론, 이는 자바스크립트나 jQuery 를 사용하여 손을 볼 수 있습니다.

하지만, 요즘의 큰 규모의 웹 어플리케이션, 예를 들어 트위터나 페이스북을 생각해보세요. 스크롤을 좀 내리다 보면, 정말 수많은 데이터가 로딩됩니다. 그리고 각 데이터를 표현하는 요소(element)들이 있겠죠. 그 요소들의 개수가 몇백 개, 몇천 개 단위로 많아진다면 (예: 페이스북에서 포스트 한 개를 표현 할 때 사용되는

요소의 개수는 약 100개 입니다) 이야기가 좀 달라집니다. 이렇게 규모가 큰 웹 어플리케이션에서 DOM 에 직접 접근하여 변화를 주다 보면, 성능상의 이슈가 조금씩 발생하기 시작합니다. 좀 느려진다는 건데요, 일부 문서에서는 이를 두고 요즘의 자바스크립트 엔진은 매우 빠른 반면, DOM 은 느리다 라고 하는데, 이것은 정확한 사실이 아닙니다.

DOM 자체는 빠릅니다. DOM 자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리 할 때의 성능과 비교해서 다를 게 없습니다. 단, 브라우저 단에서 DOM 의 변화가 일어나면, 브라우저가 CSS 를 다시 연산하고, 레이아웃을 구성하고, 웹 페이지를 리페인트 하는데, 이 과정에서 시간이 허비되는 것 이랍니다.

해결법

HTML 마크업을 시각적인 형태로 변환을 하는 것은 브라우저의 주 역할이기 때문에, 이를 처리 할 때 컴퓨터 자원이 사용되는 것은 어쩔 수 없습니다. 결국엔, 이 문제를 해결하기 위해서 DOM 조작을 아예 안 할 수는 없으니까, 적어도 최소한의 DOM 조작을 통하여 우리의 작업을 처리하는 방식으로 이를 개선 할 수는 있습니다. 예를 들어, DOM 업데이트를 4번 하면 브라우저에서 redraw 과정이 4번 이뤄지는데, 이를 묶어서 처리하거나, 우리가 원하는 최종 결과에는 영향을 끼치지 않아서 필요하지 않은 업데이트는 생략하게 하면 성능이 많이 개선되겠죠?

React는, Virtual DOM 이라는 방식을 사용함으로써 DOM 업데이트를 추상화하여, DOM 처리를 횟수를 최소화하고, 효율적으로 진행합니다.

'개발노트 > HTML' 카테고리의 다른 글

html font color   (0) 2016.12.07
웹프로그래밍 이해, 클라이언트와 서버  (0) 2016.12.05
DOM 이란?  (0) 2016.12.02

+ Recent posts