오늘보다 더 나은 내일

1. 바이스 버사 vice versa https://v-vdesign.com/ 바이스 버사 디자인 스튜디오 2010년 9월 1일 설립된 바이스 버사 디자인 스튜디오(Vice Versa design studio)는 국내 최초의 인포그래픽 전문 디자인 스튜디오입니다. 다양한 데이터를 비주얼 스토리텔링(visual Storytelling)을 통해 보다 v-vdesign.com 2. infogram https://infogram.com/examples Best Examples of Charts, Reports, Infographics and Maps - Infogram Get inspired by this wonderful collection of charts, reports, maps, infographics..

※ make with top obj (ctrl+alt+C) :상단에 준비된 도형에 맞춰 하위 물체를 변형시킬 수 있는 기능 - 조건 : 가장 상단에 필요한 모양 가지고 있는 도형이 위치해 있어야 한다. - 해당 기능 들어간 오브젝트를 수정하기 위해서는 더블클릭하여 그룹 격리모드 진입하면 된다. 1. 패턴 : 특정한 물체가 면이나 스트로크 위에서 반복적으로 배치되어 비춰지는 것을 말한다. - 면, 배경, 인테리어 벽지, 옷감 패턴 , 팬시 디자인 - 필요한 툴로 패턴으로 등록시킬 도형 자유롭게 만들어준다. - 만든 도형을 스와치 패널에 등록하면 패턴으로 사용할 수 있다. 등록된 패턴은 언제든 자유롭게 수정할 수 있다. (1) appearance (shift + F6) - 선택된 도형의 속성을 파악하거나, ..

1. text type tool (T) - 포인트 타입 기재방식 : 타입툴로 마우스 클릭하여 커서 생성 후 글자 제작할 수 있는 방식 변형이 자유롭기 때문에 짧은 문구 즉 제목, 장식글자 기재 시 사용하는 방법이다. - 패러그래프 타입 기재방식 : 클릭 드래그하여 생성된 텍스트 박스 안에서만 제한적으로 글자 관리할 수 있다. 장문의 글을 수정하는 데 굉장히 용이하다. ※ ctrl+T : 캐릭터, 패러그래프 패널 꺼낼 수 있다. (1) area type tool : 도형을 텍스트 박스로 전환해줄 수 있는 기능 말한다. - 성분표, 스티커 등 - 커서가 활성화되면 도형의 속성은 사라진다. - ctrl+ente r: 커서 비활성화 - ctrl+C : 복사 - ctrl+F : 복사된 물체 앞에 붙여넣기 - ct..

1. pen tool (P) : 포인트 생성하여 직선부터 곡선을 생성할 수 있는 툴 (1) add anchor point tool (+) :고정점을 추가생성하여 변형하는 데 도움줄 수 있는 툴 (2) delete anchor point tool (-) : 고정점 삭제하여 불필요한 면적 제거할 때 사용하는 툴 (3) anchor point tool (shift+C) : 핸들 제거 및 생성하는 데 사용할 수 있는 툴이다. - 펜툴 제작 시 핸들은 웬만하면 강제로 삭제하지 않는다. - 포인트마다 양쪽으로 핸들이 유지 되어있어야만 작업물 수정 원활해지는 경향이 있다. - 펜툴 작업 중 알트(앵커 포인트 툴 호환 됨) 작업 중 앵커포인트 툴 호환하여 핸들 조절하며 작업하면 된다. - 도형 수정 위해서 포인트는 적..

1. Align (shift+F7) : 정렬 및 분배 (1) distribute objects : 분배 기능 - 선택된 물체가 각각 다른 사이즈를 가지고 있을 때 기능에 따라 간격이 달리 두어지는 것을 볼 수 있다. - 하지만 선택 물체 사이즈가 동일할 시 어떠한 버튼 눌러도 변화 없음. - 각각의 물체가 가장 안정적인 간격 가졌을 때 시각적인 판단아래 적용하면 되는 기능이다. (2) distribute spacing : 등간격 분배 - 물체가 한 번 더 클릭이 되어, align to key object 기능이 활성화되면 수치란을 사용할 수 있다. - 원하는 간격 만큼 물체 분배하는 데 사용할 수 있다. - 선택 물체 잠금 : ctrl +2 - 잠금 해제 : ctrl + alt+2 - 선택 물체 숨김 :..

1. Reshape tool : 패스에 새로운 고정점을 추가하여 곡면형태 변형 툴 2. Add anchor point tool ( + ) : 패스에 새로운 고정점 생성 가능, 핸들 없는 포인트 생성되어 뾰족한 면적 변형 가능 3. Width tool (shift + W) : 열린패스의 두께를 부분적으로 관리할 수 있는 툴 4. Free transform tool - CS 버전에서는 단축키 이용하여 원근 왜곡을 시켜야만한다. - 단축키 사용 먼저하지 않는다 (클릭드래그 변형상태 먼저 만들어야 함 ) 5. 컬러 단축키 - 색상칩 선택 : X (일러스트는 선택된 색상칩 기준으로 관리할 수 있다.) - 색상 제거 : ? , / - shift +X : 색상 위치 반전 - 색상 초기화 : D - 색상 속성 : , ..

※ html 형식 ※ container를 화면 크기에 맞추는 방법 - height:100% 지정=body 높이 기본값이 auto 라서 불가능 - min-height:100vh;로 지정하여야한다. 1. flex-grow : 기본값 0 한정된 컨테이너 내에서 아이템이 차지하는 부분을 나눠가지는 비율 2. flex-shrink : 기본값 1 한정된 컨테이너 내에서 아이템이 줄어들때 줄어드는(양보하는) 비율

Home About Products Contact body, ul, li { margin:0; padding:0; list-style:none; } a { color:inherit; text-decoration:none; } .block { display:block; } .flex { display:flex; } .flex-jc-e { justify-content:flex-end; } .bg-red { background-color:red; } .top-bar { background-color:deepskyblue; color:white; } @media ( max-width:1000px ) and ( min-width:601px ) { .top-bar .menu-box-1 { width:100%; } ..

1. justify-content : 가로 선상 정렬 - flex-start : 요소들을 컨테이너 좌측 정렬 - flex-end : 요소들을 컨테이너 우측 정렬 - center : 요소들을 컨테이너 중앙 정렬 - space-between : 요소들 사이에 동일한 간격 - space-around: 요소들 주위에 동일한 간격 2. align-items : 세로 선상 정렬 - flex-start : 요소들을 컨테이너 상단 정렬 - flex-end : 요소들을 컨테이너 하단 정렬 - center : 요소들을 컨테이너 세로선상 중앙정렬 - base-line : 요소들을 컨테이너 시작위치 정렬 - stretch : 요소들을 컨테이너에 맞도록 늘린다. 3. flex-direction : 컨테이너 내의 요소들의 정렬방..

※ 상품이미지 hover효과 주기 - .img-box에 position:absolute;를 준다 - transition 이용하여 opacity,transform,background-color 애니메이션 지정 - text-transform:uppercase;는 대문자 변환 속성 단가라 OPS 19,800 body { margin:0; } .img-box > img { width:100%; display:block; } .box-1 { margin-top:100px; width:300px; margin:0 auto; } .box-1 { cursor:pointer; } .box-1 > *:not(:first-child) { text-align:center; font-weight:bold; margin-top:..

※ 라이브러리에 bg-red{background-color:red;} 속성을 만들어 배경색이 필요한 요소에 그때 그때 사용해준다. ※ 메뉴 사이 구역선 만들기 - 글자 높이와 비슷한 선을 만들기 위해서 border는 사용 불가함. - a 요소에 ::before, ::after를 이용하여 content:"";, background-color 이용하여 선 생성 - position:absolute 값 지정하고 대략적인 위치, top.left: 0지정 - 세부적인 수직중앙 정렬은 transform:translatex(-50%) translatey(-50%)로 맞춘다 BRAND VISUAL STYLE MEDIA NEWS STORE CUSTOMER /* 노말라이즈 */ body, ul, li { margin:0; ..

1. 라이브러리 : 커스텀이 아닌 많은 요소들이 공유하는 속성값들을 노멀라이즈 다음으로 코드업해주는 것 - .con : 페이지 내 컨텐츠들의 너비가 무한정으로 늘어나는것을 방지해주고 일정의 값을 지정해주는것 /*라이브러리*/ .con { margin:0 10px; width:auto; } /*커스텀*/ .con { max-width:1000px; } - .img-box > img : 이미지를 삽입할때 img(display기본값-inline)에 여백이 생기는 것을 방지하고 부모 요소 너비 만큼 값을 지정하여 여백을 없애주는것 .img-box > img { display:block; width:100%; } - .cell : 모든 셀요소의 정렬을 한줄정렬(float:left) 하고, 박스 사이즈 크기를 고정..