JW's study 지원

정보구조 설계 - 결정된 콘텐츠와 기능에 따라서 정보 구조를 설계할 수 있다. 정보구조 설계에서의 모호성 분류 시스템은 언어 기반 위에서 성립되는 것이며, 언어는 하나의 단어로 여러 가지 뜻을 나 타내는 경우가 많다.‘배’라는 단어도 먹는 배와 타는 배 그리고 사람의 배와 같이 다양한 뜻이 있다. 이와 같이 단어의 모호함은 정보를 분류하는 시스템을 구축하는 데 불안정한 요소로 작용한다. 홈페이지에서 우리는 정보의 그룹을 설명할 때 대부분의 경우 단어를 사용해서 표현을 하는데, 이런 언어의 모호함으로 이용자에게 혼돈을 줄 수 있으며 이런 문제들이 홈페이지 전체에서 일어난다면 심각한 문제가 될 수도 있다. 정보를 분류할 때는 이런 모호성을 충분히 염두에 두고, 되도록이면 이용자들이 한번에 인식을 할 수 있는..

콘텐츠 기획 - 사용자의 니즈(needs)와 제공하는 콘텐츠 간의 갭(gap)을 분석할 수 있다. - 갭 분석한 결과를 토대로 콘텐츠의 방향성을 결정할 수 있다. - 갭 분석한 결과에 의해서 결정한 콘텐츠 방향성에 따라서 주요 콘텐츠 수급 계획을 수립할 수 있다. 어피니티 다이어그램(affinity diagram) 어피니티 다이어그램은 파편화되고 불명확한 방대한 정보를 논리적이고 응집력 있는 그룹으로 조직화하고 분류하는 기법이다. 이 기법의 결과물로는 제한된 그룹의 수이며, 기대하는 목적은 보다 더 좋은 아이디어를 발굴하거나 문제를 좀 더 이해하는 것이다. 1. 어피니티 다이어그램 활용 유형 크게 3가지 유형에서 어피니티 다이어그램을 활용한다. 아이디어 도출이 목적인 브레인스토밍 세션 문제 해결을 위한 ..

기능(Feature) 리스트 도출 - UI 설계를 위하여 작성된 시나리오에 따라 기능을 도출할 수 있다. - 도출된 기능에 대해서 우선순위 기준을 수립하여 주요 기능을 선별할 수 있다. - 우선순위 기준에 의해서 선별된 주요 기능의 상세한 내역을 작성할 수 있다. 최소 기능 제품(Minimum Viable Product, MVP) MVP는 리스크나 투자 대비 최적의 성과를 창출할 수 있으면서, 사용자에게 핵심적인 기능을 최소화하여 제공할 수 있도록 정의하는 방식이다. 해당 용어는 프랭크 로빈슨(Frank Robinson)이 정의하였고, 스티브 블랭크(Steve Blank)와 에릭 리이스(Eric Ries)가 대중화시켰다. MVP는 무조건적으로 적은 기능만을 정의하는 것이 아니라, 사용자에게 가치를 제공할..

UI/UX 콘셉트 도출 - 도출된 아이디에이션(Ideation)의 프로토타입 검증 결과에 따라서 확정된 UI/UX 콘셉트를 결정할 수 있다. - 도출된 UI/UX 콘셉트를 반영하여 목표 고객인 페르소나(persona)를 추출할 수 있다. - UI 설계를 위해서 UI/UX 콘셉트에 적합한 시나리오(scenario)를 작성할 수 있다. 페르소나(persona) 페르소나는 사용자의 목적(goals)과 행동(behaviors)을 대표하는 실제 타깃 사용자 그룹을 가상의 캐릭터(artificial person and archetypical users)로 형상화하는 목적 지향적인(goal-directed) 인터랙션 디자인의 방법이다. 핵심적인 캐릭터의 구성요소는 니즈(motivations and needs), 목적..

Background Property Sample Description background background: #000 url(background.gif) no-repeat top center 배경 속성 단축형 background-image background-image: url(이미지 경로) 배경 이미지 설정 background-repeat background-repeat: no-repeat 배경 이미지 반복 여부 설정 background-attachment background-attachment: fixed 배경 고정 여부 설정 background-color background-color: #fff 배경색 설정 background-position background-position: top 배경 이미..

Background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity 밝기를/ 통해 색상을 ..

border-radius border-radius : [border-top-left-radius] [border-top-right-radius] [border-bottom-right-radius] [border-bottom-left-radius] border-radius border01 border02 border03 border04 border05 border06 border07 border08 border09 border10 .border01 {border-radius: 0;} .border02 {border-radius: 5px;} .border03 {border-radius: 10px;} .border04 {border-radius: 15px;} .border05 {border-radius: 20..

팀원 https://lake0989.tistory.com/ HyunjiZzang HyunjiZzang / 함께 코딩공부해요!! lake0989.tistory.com https://veritedy.tistory.com/ 도예 veritedy.tistory.com

팀원 https://lake0989.tistory.com/ HyunjiZzang HyunjiZzang / 함께 코딩공부해요!! lake0989.tistory.com https://veritedy.tistory.com/ 도예 veritedy.tistory.com

Box-shadow box-shadow : [h-shadow] [v-shadow] [blur] [spread] [color] [inset] / none; 속성 설명 h-shadow 그림자의 수평(X)축 거리를 나타냅니다. v-shadow 그림자의 수직(Y)축 거리를 나타냅니다. blur 그림자의 흐림 정도를 나타냅니다. spread 그림자의 거리를 나타냅니다. color 그림자의 색을 나타냅니다. inset 그림자의 효과를 내부로 나타냅니다. box-shadow shadow01 shadow02 shadow03 shadow04 shadow05 shadow06 shadow07 shadow08 shadow09 shadow10 .shadow01 {box-shadow: 0px 0px 5px rgba(0,0,0,0..

문서의 정보를 보다 잘 표현하기 위해서는 의미에 맞는 태그를 잘 사용해야 합니다. 특히 HTML5에서는 웹페이지에서 통상 많이 사용하는 구조에 의미를 분명히 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의해서 제공하고 있습니다. 그 목록은 아래와 같습니다. article 본문 aside 광고와 같이 페이지의 내용과는 관계가 적은 내용들 details 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 figure 삽화나 다이어그램과 같은 부가적인 요소를 정의 footer 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 header 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 main 문서에서 가장 중심이 되는 컨텐츠를 정의 mark 참조나 하이..

웹페이지에 표현되진 않지만, 웹 페이지를 잘 설명하기 위한 부가 정보들을 담당합니다. 사용가능한 속성 charset="속성값" : 브라우저에 디코딩되는 문자형식을 지정 name="description" content="내용" : 검색 결과에 대한 요약에 사용됨 name="keywords" content="내용" : 문서를 설명하는 중요 단어(키워드)들 name="author" content="내용" : 저자 http-equiv="refresh" content="숫자" : 지정한 시간(초) 마다 웹페이지를 리프레쉬 시켜줌

font태그는 문서 내의 TEXT를 시각적으로 꾸며주는 역할을 담당하며 size / color 등의 여러 속성들을 적용할 수 있습니다. 단, font태그는 디자인의 역할만 할 뿐 어떠한 정보로서의 의미도 갖지 않으며, 중복 사용으로 인한 파일 용량 증가, 가독성 저하, 관리 측면에서의 불편함 등의 이유로 현재는 퇴출된 태그이며 그 역할을 CSS가 담당하게 되었습니다.

파일을 업로드할 때 필요한 html 코드 : 파일을 업로드하는 코드가 있다면 form태그의 속성은 method="post" enctype="mutiple/..."이 되어야 합니다.

form태그로 데이터를 전송하는 두가지 방법 : GET, POST GET방식은 url로 전달하기 때문에 값이 노출됩니다. 우리가 form태그를 통해서 데이터를 전송할 때는 거의 100%로 post방식을 사용합니다.

label : 무언가의 이름표를 말합니다. lable 안에 id를 써서 각각의 label들이 누구의 이름표인지 연결시켜줘야 합니다.