Jung Yoon's study 고정윤

해당영상 8강 8강~15강메모 1. 상대주소 : 본인이 가지고 있는 파일을 기준으로 불러오는 것 절대주소 : https등의 사이트 주소 2. repeat-x : X축으로 (가로) 반복 됩니다. 3. background:url(../img/header_bg.jpg) center top repeat-x; (속기형 작성법 입니다.) 백그라운드 : 이미지의 상세주소 / 이미지의 위치(position) 센터 와 탑 으로 고정 / x축(가로)로 반복됨 4. 자주쓰는 핵심 태그들이 인라인 구조인지 블럭구조 인지 정도의 개념은 알고 가면 아주 좋아요!! 5. 인라인 구조에는 전체 영역이 없어요. 그래서 text-align 이 먹히지 않아요. 6. 인라인한테 padding 를 주면 양옆은 그 값이 들어가지만 위 아래는 ..

해당영상바로가기 6번의 레이아웃을 더욱 세분화 하여 작업한 레이아웃입니다. 점점 소스가 길어지고 있기때문에 주석표시와 열을 잘 맞추어 보기 쉽게 해야 할 것 같습니다. 부모안에 자식이 있고 그 자식안에 또 자식이 있는 구조라 점점 구조에 유념하여 공부해야 할 것 같아요!!!

해당영상바로가기 "container" 을 이용해서 영역을 잡는 수업이였습니다. 소스를 가볍게 하기 위해 생략이 가능한 것들은 생략을 하면서 하면 좋을 것 같습니다. rgba = r(red) / g(green) / b(blue) / a(alpa:투명도 0~1값으로 입력)

해당영상 바로가기 기본 여백값(간격)을 없애주기 위해서 *{margin : 0 ; padding : 0} 을 적용합니다. (*{}:이건 전체 선택자를 의미합니다.) 하지만 실무에서는 전체 선택자를 잘 쓰지 않습니다. width 값 100%로 합니다. 이렇게 적용하면 화면을 줄이고 늘려도 전체를 차지하고 있습니다. width 의 기본값은 100% 이기 때문에 소스를 가볍게 하기 위해서 생략할 수 있습니다. (저는 처음에 적었지만 나중에 가변은 소스를 위해 지웠습니다.) 부모와 자식의 height 값이 같다면 부모의 height값은 생략 가능합니다.

해당영상바로가기 다양한 레이아웃 만들기를 합니다!! 이번 레이아웃의 모양의 위와 같습니다. 처음에 배운 내용을 바탕으로 스스로 해 본 후 선생님과 비교해 보면 더 도움이 많이 되는 것 같습니다:) 부모들은 id 로 그 아래 자식들은 class로 하는 것이 보기에 편하고 하기에도 편한 것 같습니다!!

해당영상바로가기 다양한 레이아웃 만들기를 합니다!! 이번 레이아웃의 모양의 위와 같습니다. 처음에 배운 내용을 바탕으로 스스로 해 본 후 선생님과 비교해 보면 더 도움이 많이 되는 것 같습니다:)

해당영상바로가기 오늘 수업의 핵심 css는 'clear:both' float:left 를 사용해서 영역이 사라지게 되는데, 이를 피하려면 clear:both 를 이용하면 됩니다. clear 는 '취소하다'라는 뜻으로 clear:both는 float 의 오른쪽 왼쪽 값을 모두 취소합니다.

해당영상으로 가기 1. float으로 블록요를 가로로 정렬하면 생기는 문제 점(버그) float을 쓰면 height 값이 '0'으로 인식이 됩니다.(즉, height 값이 사라짐=영역이 사라진다.) 따라서 눈에는 보이지만 그 영역이 사라짐으로 전체적인 영역이 깨지게 됩니다. 이 방법을 해결하기 위해서는 여러가지 방법이 있는데, 이번 영상에서는 아래와 같은 방법을 씁니다. (가) footer(영역이 깨져 보이지 않게 된 부분)에도 'float:left' 를 줍니다. -하지만, 해당 방법 또한 여러 문제를 동반하기 때문에 흔히 사용하지는 않습니다. 2; margin을 이용하여 컨텐츠를(블록구조를) 가운데 오게 하는 방법 (가) 가운데로 올 부모값(전체영역)에 'margin : 0 auto' 를 줍니다. - ..

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

어피니티 다이어그램(affinity diagram) 학습목표 • 사용자의 니즈(needs)와 제공하는 콘텐츠 간의 갭(gap)을 분석할 수 있다. • 갭 분석한 결과를 토대로 콘텐츠의 방향성을 결정할 수 있다 • 갭 분석한 결과에 의해서 결정한 콘텐츠 방향성에 따라서 주요 콘텐츠 수급 계획을 수립할 수 있다. 어피니티 다이어그램(affinity diagram) 어피니티 다이어그램은 파편화되고 불명확한 방대한 정보를 논리적이고 응집력 있는 그룹 으로 조직화하고 분류하는 기법이다. 이 기법의 결과물로는 제한된 그룹의 수이며, 기대하 는 목적은 보다 더 좋은 아이디어를 발굴하거나 문제를 좀 더 이해하는 것이다. 어피니티 다이어그램 활용 유형 (크게 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 n..

HTML5의 입력양식 태그의 새로운 속성값 알기!! 속성값 설명 color 색상 선택 창을 만든다. datetime 날짜 시간 창을 만든다.(년, 월, 일, 시, 분, 초의 분할)표준시간 datetime-local 날짜 시간 창을 만든다.(년, 월, 일, 시, 분, 초의 분할)표준시간 없음 email email 주소 창을 만든다. month 달과 년도의 창을 만든다.(표준 시간 없음) number 숫자 입력을 위한 창을 만든다.(숫자 제한을 둘 수 있음) max(최대값), min(최소값), step(허락하는 숫자 간격), value(기본값) range 정확한 값이 중요하지 않는 숫자를 입력하는 창을 만든다. search 검색창을 만든다. tel 전화 번호 입력 창을 만든다. time 시간 입력창을 만든다..

Can I use 새롭게 도입된 기술은 오래된 웹브라우저에서 동작하지 않습니다. 결국 얼마나 많은 웹브라우저가 이 기술을 사용할 수 있는가에 따라서 신기술의 도입 여부를 결정해야 합니다. Can I use는 이런 결정을 할 때 도움을 주는 서비스입니다. Can i use 가기 클릭!! 태그 설명 영상이 아닙니다. 넘어가도 되니 꼭 보시지 않아도 돼요 :)

NORMAL 사이트 사용자 리서치 예상 사용자 리서치를 기반으로, 1조의 자료 입니다. 팀원 : 정소희, 고정윤, 주선영

비디오 - video HTML5에 등장한 video태그에 대해 알아봅시다. 웹페이지에 동영상을 삽입할 수 있는 태그입니다. video 태그 알기클릭 태그 안에 를 이용해서 비디오를 삽입해 줍니다. 브라우저 마다 여러가지 원인에 따라 지원하는 방식이 다릅니다. 때문에 코드 작성시 여러가지 형태의 동영상 저장 방법을 이용해야 합니다. 그럼 웹 브라우저가 그 중에 알아서 선택해서 동영상을 나타내 줍니다. : 동영상을 컨트롤 할 수 있는 기능이 생성됩니다.

외부문서삽입 - iframe 웹페이지에 다른 웹페이지를 삽입하는 방법인 아이프래임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프래임으로 삽입된 웹페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법인데요. 아이패래임이 무엇인지, 사용법, 그리고 보안을 개선할 수 있는 새로운 방법을 소개합니다. iframe 태그 알기 클릭 ※보안방법 - iframe 태그에 "sandbox"라는 속성을 추가하여 위험한 소스는 원천적으로 차단합니다. - "보안"은 매우 중요합니다. 후에 더 정확히 숙지..

모바일 지원 (viewport) 모바일 지원시 중요 코드 아래 이미지의 코드는 모바일 지원 코드 작성시 기계적으로 꼭!!! 넣는다고 생각 하시면 됩니다. 전체 코드