이것저것 공부노트

웹디자인 기본용어 정리 본문

IT

웹디자인 기본용어 정리

avalanche 2016. 3. 20. 22:40


웹디자인 기본용어 정리

-Web Design Note - 




인터렉션 디자인 - 사이트를 가능한 쉽고, 효과적이고, 즐겁게


사용자 인터페이스(UI)디자인 - 페이지의 기능적 구조와 사용자가 콘텐츠를 탐색하거나 작업을 수행하기 위해서 사용하는 단추, 링크, 메뉴와 같은 도구에 대해 집중적으로 다룸


사용자 경험 디자인 - 도널드 로먼: 제품에 대한 모든 측면에서 사용자 인터렉션을 포함해야 함. 웹사이트를 운영하는 조직적 브랜드와 사업 목적에 부합해야 함.


사용자 중심 디자인 - 사용자의 필요사랑, 요구사항, 제한사항을 잘 이해하여 디자인


와이어프레임다이어그램 - 웹페이지의 구조


사이트 다이어그램- 사이트 전체의 구조


스토리보드 - 사용자의 관점에서 사이트를 사용하는 과정


사용자 순서도 - 사이트나 응용프로그램에서 각 부분들의 연결사항


코딩 - 웹을 통해서 전달할 콘텐츠를 준비하는 과정


CSS - cascading style sheets


프런트엔드디자인(frontend design)- 브라우저에 나타나거나 브라우저에 직접 관련된 디자인 과정(그래픽디자인/인터페이스디자인/정보디자인/html문서와 스타일시트개발 / 자바스크립트)


백엔드디자인(backend design) -  웹페이지를 동적이고 대화형으로 만들고자 서버에서 동작하는 프로그램이나 스트립트(폼의처리/데이터베이스디자인/콘텐츠관리시스템/프로그래밍언어를 이용한 서버사이드웹응용프로그램)

 

W3C - 웹 기술 개발을 관장하는 조직


HTML(Hypertext Markup Language)-웹페이지 문서제작언어


자바스크립트 - 웹페이지에 있는 요소, 스타일, 브라우저 자체를 조작하는데 사용


구조레이어 - 마크업을 통한 콘텐츠

프레젠테이션 레이어 - 스타일시트 추가

행동레이어 - 대화형 경험 추가


서버 사이드 프로그래밍 - 

PHP(cake PHP/Codelngniter/Drupal)

Python(Django/TurboGears)

Ruby(Ruby on Rails/Sinatra)

Java Script(Node/js/Rhino/SpinderMonkey)

ASP.NET(DotNETNuke/ASP/Net MVC)


XML(eXtensible Markup Language) - 마이크로소프트 오피스, 어도비 플래시, 애플 아이튠즈에도 사용 

인터넷 - 네트워크로 연결된 수많은 컴퓨터

프로토콜(protocol) - 네트워크에서 데이터나 문서를 전송하는 표준화된 방법

웹 - 인터넷에서 정보를 공유하는 방법들 중 하나

HTTP-(Hypertext Transfer Protocol) - 이미지, 영화, 오디오파일, 데이터, 스크립트를 포함한 웹 사이트의 응용프로그램들을 구성하는 모든 웹 리소스를 전송가능

https:// - 보안 서버 트랜잭션 (secure server transaction) 특별한 암호화 장치가 있는 서버


IP-Internet Protocol

DNS(Domain Name System)-도메인 이름 서비스

클라이언트 - 정보를 요청하는 소프트웨어

클라이언트 사이드 응용 프로그램 - 사용자의 컴퓨터에서 동작

서버 사이드 응용 프로그램 - 서버 컴퓨터에서 작동

인트라넷 - 특정한 집단에서만 사용되는 웹을 기반으로 한 네트워크

엑스트라넷 - 인트라넷과 같으나 회사 외부의 사용자에게 선택적으로 접근허용

URL(Uniform Resource Locator)

마크업(Mark up) - 텍스트로 된 문서에 설명태그를 붙이는 것




웹디자인에서 고려할 주요 개념


1. 웹 표준 준수하기 - W3C가 정리한 HTML / CSS/자바스트립트 표준을 따르는것

2. 가장 성능이 떨어지는 브라우저나 보조장치에서도 콘텐츠와 기능이 작동할 수 있도록 함

3. HTML 문서를 논리적 순서에 맞게

4. 스타일 규칙을 해석하는 방법을 이용해서 사용자 경험 레이어를 생성

5. 자바스트립트의 최소화


반응형 웹 디자인 - 뷰포트의 크기에 따라서 장치에 맞는 사용자 지정 레이아웃을 제공하는 전략


웹 접근성 


시력장애 - 브라우저의 텍스트 확대/축소기능

청각장애 - 오디오의 필사본이나 비디오의 자막

인지장애 - 간결한 디자인


소스문서의 브라우저가 무시하는 내용- 여러개의 공백 / 줄바꿈 / 탭 / 인식되지 않는 마크업 / 주석에 담긴 텍스트<!-- -->


마크업 - 콘텐츠 주위에 태그를 추가하는것



시맨틱 마크업 - 콘텐츠를 가장 의미있게 전달하는 HTML요소


<!DOCTYPE html> - 문서 형식 선언 (Document Type Declaration. DTD)

<html> - 문서에 나오는 모든 요소를 포함하고 다른 요소에 포함되지 않기 때문에 루트요소

<head> - 제목, 문서가 사용하는 스타일 시트, 스크립트, 문서 자체의 정보 <title>요소 필수, <style> 요소가 위치

<head>- 요소에 포함된 <meta>요소는 문서자체에 대한 정보 제공

<body> - 브라우저 창에 표시하고 싶은 모든 내용 포함


<img src-"bird.jpg alt="photo of bird>

src - 삽입된 이미지 파일의 이름을 제공 

alt - 이미지 파일을 표시할 수 없을때 나타날 텍스트 지정

-여는 태그에서 하나의 속성에 여러개의 속성이 사용 가능, 각 속성은 공백으로 구분되며 순서는 중요하지 않음


HTML요소


페이지 섹션

<adress> - 제작자 연락처 정보

<article>[5] - 독립된 콘텐츠

<aside>[5] - 주변 콘텐츠와 관련없는 콘텐츠

<footer>[5] - 관련된 콘텐츠

<header>[5] - 소개 콘텐츠

<nav>[5] - 주요탐색

<section>[5] - 개념적으로 연관된 콘텐츠 그룹


머리글 콘텐츠

<h1><h2><h3><h4><h5><h6> - 머릿글 

<hgroup> - 머리글 스택그룹  / 익스플로러 8과 이전 버전에서는 지원되지 않음



그룹화 콘텐츠

<blackquote>-긴 인용, 추천서, 다른소스로 복사한 부분

<div>-일반적인 컨테이너

<figure>[5]-관련된 이미지나 리소스

<figcaption>[5]-<figure>에 대한 텍스트로 된 설명

<hr>-수평선

<p>-단락

<pre>-공백 그대로 표시


목록요소

<dd>-정의

<dl>- 정의목록

<dt>-용어나 레이블 같은 이름, 설명이나 정의 같은 값

<ul>-순서없는 목록

<lI> - 순서없는 목록 내의 목록 항목

<ol>-순서있는 목록


줄바꿈

<br>-줄바꿈

<wbr>[5] - 단어 줄 바꿈




단락요소

<abbr> - 약어

<b>- 굵은 글씨

<bdi>[5] - 방향성 서식 변경

<bdo> - 방향성 서식 제어

<cite>- 출처

<code>-코드샘플

<data>(WHATWG)에서만 - 컴퓨터가 인식할 수 있는 값

<del>- 삭제된 텍스트

<dfn> - 정의하는 용어

<em> - 강조

<i>- 이텔릭체

<ins>-삽입된 텍스트

<kbd>-키보드 텍스트

<mark>[5] - 하이라이트 텍스트

<q> - 짧은 인라인 인용문

<ruby>[5] - 루비 텍스트를 포함한 섹션

<rp>[5] - 루비 텍스트 괄호

<rt>[5]- 루비주석

<s> - 취소선, 부정확한 텍스트

<samp>-샘플출력

<small>-작은 글씨로 된 주석

<span>- 일반적인 텍스트

<strong>-강조

<sub> - 아래첨자

<sup>-위첨자

<time>[5]컴퓨터가 인식할 수 있는 시간데이터

<u>-밑줄

<var>-변수







저작자표시

'IT' 카테고리의 다른 글

초등 코딩교육이란  (0) 2017.11.29
HTML5와 태그 정리  (0) 2017.11.25
멘탈모델/애자일 UX 디자인  (0) 2017.11.25
워드프레스 기초강좌  (0) 2017.11.19
3DSMAX 기본 인터페이스 1  (0) 2016.10.15
공유하기 링크
'IT' Related Articles more
Comments