기본 타입 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type)은 다음과 같습니다. 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined var num = 10; // 숫자 var myName = "홍길동"; // 문자열 var str; // undefined 숫자(number)형 자바스크립트는 다른 언어와는 달리 정수와 실수를 따로 구분하지 ..
HTML 리스트 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공하고 있습니다. 순서가 없는 리스트(unordered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트(ul) 순서가 없는 리스트는 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다. - disc : 검..
CSS 텍스트 CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같습니다. color direction letter-spacing word-spacing text-indent text-align text-decoration text-transform line-height text-shadow color 속성 color 속성은 텍스트의 색상을 설정합니다. 웹 페이지에서 텍스트의 기본 색상은 검정색입니다. 태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용됩니다. 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 태그에 명시된 속성값보다 우선 적용됩니다. direction 속성 direction 속성은 텍스트가 써지는 방향을 설정합니다. 웹 페이지에서..
함수의 기초 함수(function)란? 함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다. function addNum(x,y) { return x + y; } document.wrtie(addNum(2,3)); 자바스크립트 함수 자바스크립트에서는 함수도 하나의 타입(datatype)입니다. 따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능합니다. 또한, 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있습니다. 함수의 정의 자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가잡니다. 함수의 이름 괄호 안에 ..
테이블 만들기 table 테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그는 다음과 같은 태그들로 구성됩니다. 1. 태그는 테이블에서 열을 구분해 줍니다. 2. 태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다. 3. 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다. 참치 고래 상어 문어 오징어 고등어 CSS의 CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다. border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다. 위의 예제에서 테이블의 테두리(border)가 두 줄씩..
CSS 문법 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됩니다. CSS 내의 문법은 다음과 같이 정의됩니다. 선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킵니다. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌉니다. 각 선언은 CSS 속성명(property)과 속성값(value)을 가지며, 그 둘은 콜론(:)으로 연결됩니다. 이러한 CSS 선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마칩니다. CSS 선택자 스타일을 적용할 HTML 요소를 가리키는 데 사용하는 선택자는 다음과 같습니다. HTML 요소 선택자 아이디(id) 선택자 클래스(class) 선택..
HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 블록(block)타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. p요소는 display 속성값이 블록인 요소입니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.요소는 주로 여러 요소들의 스타일을..
프로토타입 제작 학습목표 선정된 아이디어를 다양한 방법으로 프로토타입을 제작할 수 있다. 제작된 프로토타입이 목적에 맞게 구성되었는지 분석하고 검증할 수 있다. 프로토타입의 구성요소와 특징에 대한 분석을 통해서 수정 사항을 도출하고 이슈를 보완할 수 있다. 1. 프로토타입(Prototype) 프로토타입은 상품/서비스가 출시되기 전 만들어진 원형(archetype)을 의미한다. 프로토타이핑(prototyping)은 사용자의 요구사항, 사용자리서치를 통해서 도출된 니즈, 아이디어 등의 개념(Concept)을 담은 모형을 만들어 이후 사용자와 상품/서비스가 제공하는 기능의 추가, 변경 및 삭제 등을 요구사항에 대해 소통하는 도구, 개발이 진행되는 동안 개발 참여자간에 개념을 공유하는 도구를 만드는 설계과정이다..
UI/UX 콘셉트 아이디어 도출하기 요구사항분석(requirement analysis) 요구사항 분석은 제품 또는 서비스의 사용자를 포함한 이해관계자들의 요구사항을 파악하고 이를 고려하여 제품 또는 서비스가 이와 부합하도록 하기 위한 조건을 결 정하는 과정이 주가 되는 업무로 이후 개발 생명주기(SDLC, Software Development Life-Cycle)의 시발점이 되며, 아래와 같이 정의 된다. 시스템이나 소프트웨어 요구사항을 정의하기 위해 사용자의 요구 사항을 조사하고 확인하는 과정. 시스템이나 소프트웨어 요구사항의 검증. 이러한 요구사항분석은 아래와 같은 유형의 작업을 수반하게 된다. 요구사항의 도출 : 요구사항이 무엇인지를 파악하기 위해 고객 및 사용자 등 이해 관계자와 인터뷰 등을 수행..