본문 바로가기

용어

Modified Date: 2015-12-05

조건부 주석(Conditional comment)

Microsoft Internet Explorer에서만 작동하는 HTML 주석 구문 이용 방식. 조건에 따라 버전별 IE를 필터링할 수 있다.

Fixed Layout

고정폭 레이아웃이라고 한다.
이는 화면 크기나 글자 크기에 상관없이 화면 구성의 기본 폭을 고정 값으로 설정하는 경우를 말한다.

Elastic Layout

글자 비례형 레이아웃이라고 한다. 예를 들어 화면을 구성하는 최상위 요소의 폭을 60글자 기준(60em)으로 정하는 것이다. 이는 화면 확대 축소시 글자 단위로 변경되기 때문에 확대된 폭이 브라우저의 최대폭을 넘지 않을 경우 레이아웃이 깨지지 않는다.

Liquid Layout

화면 비례형 레이아웃이라고 한다. 화면의 최대폭인 100%를 기준으로 구성 화면의 최상위 요소가 가질 폭을 결정한다.

Hybrid Layout

하이브리드 레이아웃은 유연한 레이아웃(Flexible layout)과 고정폭 레이아웃(Fixed Layout)의 장점을 취하여 사용되는 레이아웃을 말한다. 일반적으로 유연한 레이아웃은 화면 확대 축소시 가질 수 있는 장점에 비해 과다한 확대나 축소의 경우에 디자인을 유지하기 어렵다는 단점이 있다. 이 때문에 고정폭 레이아웃처럼 일정 크기 이상의 화면비나 글자비를 최소/최대폭으로 지정해두고 그 디자인이 유지되도록 만들게 된다.

Responsive Web Design

화면 너비에 따라 유동적으로 변하는 유동형 레이아웃(fluid layout)과 유연한 이미지(flexible image), 그리고 미디어 쿼리(media queries)가 어우러져서 특정 환경에 ‘최적화’된 방법이 아니라 환경에 반응하여 스스로 적응하는 방법이다.

Mediaquery

스마트 폰과 다양한 해상도의 노트북에 이르기 까지 네트워크에 액세스하는 장치의 종류가 다양해 지고 이런 장치마다 적합한 디자인을 제공해 줘야하는 업무가 중요하게 되었다. 이러한 멀티스크린의 스타일대응을 위해 CSS3에서 ‘미디어쿼리’를 제공한다.
CSS3 Media Queries Module 에서 정의하는 Media의 종류는 다음과 같다.

  • screen : 컴퓨터 스크린을 위한용도
  • tty : 디스플레이 능력이 한정된, 텔렉스(teletype), 터미날, 또는 수동 이동 장치 등, 고정 피치(fixed-pitch:폭이 일정) 글자를 사용하는 메디아를 위한 의도 “tty” 메디아 타입에서 제작자는 픽셀(pixel) 단위를 사용하여서는 안됨
  • tv : 음성과 영상이 동시 출력되는 TV와 같은 장치
  • projection : 프로젝터 표현 용도
  • handheld : 손으로 들고 다니면서 볼 수 있는 작은 스크린에 대응하는 용도
  • print : 인쇄 용도
  • braille : 점자 표시 장치
  • all : 모든 미디어 타입

Media Queries Values

width ,height ,device-width ,device-height ,orientation ,aspect-ratio ,device-aspect-ratio ,color ,color-index ,monochrome ,resolution ,scan ,grid

CSS 선언 방식

CSS 선언 타입은 크게 세 가지로 분류된다.

  • internal(embedded) style: HTML의 Head 부분에 Style 태그를 이용하여 CSS를 설정하는 방법
  • external style: HTML의 Head에서 Link 태그를 이용하여 미리 설정된 외부 CSS 파일을 불러오는 방법
  • inline style: HTML 태그 안에 style 속성을 이용하여 CSS를 직접 설정하는 방법

CSS Sprite

버튼, 블릿 등 배경으로 쓰이는 여러 개의 이미지를 하나로 모아 이미지 파일의 리퀘스트를 줄이는 방법을 말한다. background의 속성 중 position을 이용하여 배치한다.

카멜 표기법

카멜 표기법이란 프로그램 언어에서 변수와 함수를 선언할 때 일정한 규칙을 만들어서 프로그래머끼리 서로 직관적으로 알아볼 수 있게 만든 것이다. 카멜(낙타)이라는 말은 카멜표기법으로 작성된 변수의 형태가 낙타의 혹을 닮아서 붙여진 것이다. 카멜 표기법을 사용하면 이름들의 가독성을 높이고, 이름만 보고도 변수와 함수를 구분할 수 있다. 표기 방법은 단어와 단어를 이어서 네이밍을 붙일 때 앞 단어는 모두 소문자로 작성하고 뒷 단어는 제일 첫 문자만 대문자로 기입하고 이후에는 소문자로 기입하는 방식이다.
예를 들면 globalNavBar, quickMenu, locationArea 등으로 표기한다.

댓글 쓰기