Design/퍼블리싱 지식창고 (40) 썸네일형 리스트형 디자이너의 작업 화면을 공유하는 협업 툴 제플린 아이폰이 등장하고 나서 스마트폰의 시대가 본격적으로 열리고 앱을 만들기 위해 디자인했던 예전의 모습은 웹디자인에서 했던 방식을 그대로 고수하는 경우가 많았습니다. 하지만 그렇게 진행되다 보니 해상도가 다른 앱의 특성상 파일을 여러 번 전달하는 경우가 많아졌고, 프로토 디자인이 되었다면 그 작업내용을 공유하고 피드백받기 위해 (컨펌받기 위해) zip파일로 만들어 클라이언트에게 전달해 피드백을 받고, 피드백이 완료되었다면 개발자에게 전달할 때에도 수치값을 ppt에 적어 전달하는 등의 시간과 효율이 두 배,세 배가 걸리는 일련의 작업들을 디자이너가 진행하곤 했습니다. (디자인하는 시간보다도 공수가 훨씬 많이 들었습니다.) 파일도 따로 전달해야 했죠. 하지만 이제는 협업툴이 등장하면서 시간을 단축시켜 주고 작업.. 웹퍼블리싱 강의 및 홈페이지 제작 유틸 모음 홈페이지 제작을 위해 필요한 3박자. 뼈대가 되는 HTML과 인테리어를 담당하는 CSS, 유동적인 홈페이지를 위해 필수적인 JS는 차례대로 유기적으로 흘러가야 합니다. 기획, 디자이너, 개발자 할 거 없이 웹에 관련된 업무를 하는 직군이라면 알아야 할 업무 소통을 위해 필수적인 다양한 웹퍼블리싱에 대한 내용을 담고 있으며, 학습의 과정과 제작에 필요한 유틸리티를 한 데 모아봤습니다. 또한 티스토리의 스킨을 수정하기 위해 각각의 코드 요소들이 웹 상에서 어떻게 돌아가는지를 보여주고 있기 때문에 기초에 관련된 각각의 내용을 숙지한다면 티스토리 블로그 또한 원하는 대로 <span style="color: #333333; text-align: start.. 유튜브 사이즈 크기 조절 및 이미지 만드는 방법 홈페이지를 제작할 때나 포스팅을 할 때 반응형으로 제작되어 있지 않은 지도나 유튜브,비메오등의 동영상 플레이어들은 아이프레임화로 사이즈가 고정되어 있어 크기를 줄이거나 늘릴때 이미지나 동영상이 잘려 나옵니다. 이에 대응 할 수 있는 방법은 크기를 %로 바꿔 css표기하는 방법인데, 지도의 경우는 클래스를 지정해 홈페이지에서 따로 표기를 하는 번거로움 등을 예로 들 수 있고, 적용도 힘들다는 단점이 있습니다. 이를 보완해줄 수 있는 방법이 바로 아래에 표기된 사이트입니다. 사용방법은 아주 간단합니다. 유튜브나 비메오등의 사이트 주소를 그대로 복사해 해당 사이트에서 임베드 시키면 소스코드가 하단에 나오게되는데 그 소스코드를 긁어 복사해 적용하고 싶은곳에 바로 적용하시면됩니다. 프론트작업이 어려운 분들.. CSS 소개와 사용방법 (CSS란 무엇인가?) CSS 소개 첫 단추 페이지를 포스팅하기 전에 잠시 CSS가 태어나게 된 일화를 간단히 소개 후 넘어가도록 할게요 먼저 CSS는 Cascading Style Sheets의 약어로 사전적 용어로 풀이해 나타내면 계단식 스타일 시트라고 불립니다. 홈페이지 제작을 했었던 1,2세대 초기 웹디자인과 개발자들은 CSS라는 표준형 언어가 생기기 전에는 웹페이지 폰트에 컬러를 주거나 단일 페이지나 공용 페이지에 특수한 효과를 주고 싶을 때, 모든 페이지에 일일이 스타일 용어를 적용시키거나 개발자를 통한 프로그래밍적 언어로 제어를 해야 했습니다. 이때 당시에는 웹디자이너가 추구하는 미적 효과와 그것들을 실행해야 하는 개발자 사이에 마찰이 불가피했었는데요, 페이지가 늘어나면 늘어날수록 일일이 대입해 적용해야 했기 때.. 제이쿼리 슬라이더, 캐러셀 유틸 모음 (jQuery, Carasel) 홈페이지내에 제이쿼리 슬라이더,캐러셀 유틸 모음 페이지 입니다. 마치 회전목마가 돌아가는 것 같다는 의미의 캐러셀은 주로 홈페이지 메인상단에 위치하고 있으며, 쇼핑몰에서 프로모션이나 팝업이벤트를 보여주는 기능으로 많이 사용합니다. 모바일에서도 팝업등으로 많이 사용하고 있기 때문에 같이 연동되는 캐러셀을 사용하는게 중요합니다. 제이쿼리 버전에 영향을 받을 수도 있고, 많은 제이쿼리를 연결하면 동작을 하지 않을수도 있을 수 있어서 사이트내에 소스를 적용 및 확인 하시고 기능이 작동하는 슬라이드를 사용하시면 될 것 같습니다. 목록 캐러셀 모음 링크 보편적인 캐러셀 Cycle2 적용하기 배경을 제어하는 유틸소스 모음 ■ 캐러셀 모음 (이미지가 돌아가는 배너 코드) Carousel slide show [bxsli.. 임대형 홈페이지와 무료 홈페이지란? 개인적인 또는 기업들이 홍보를 하거나 상품을 온라인상으로 판매를 하는등의 목적을 가지고 홈페이지를 운영해야 할 때에 전문적인 지식을 대신해 간단한 회원가입과 로그인 만으로도 관리자계정과 관리자 툴을 가지게되어 홈페이지를 오픈하고 제어하며 운영 할 수 있는 것을 말합니다. 회원가입만으로 상품을 판매할 수 있는 홈페이지를 만들 수 있는 까페24,고도몰,네이버 오픈마켓 등으로 분류되는 오픈마켓 홈페이지와 원하는대로 튜닝을 할 수 있지만 개발적 언어가 필요한 가비아등의 호스팅형 홈페이지를 예로 들 수 있습니다 ✨필수적인 사항 임대형이나 무료 홈페이지를 운영할 때 필요한 관리자 페이지등을 제공받을 수 있기 때문에 개발용어를 몰라도 레이아웃을 수정하거나 테마에 맞게 디테일한 분류 설정이 용이하지만, 튜닝이나 차.. 홈페이지를 검색에 등록하는법 네이버,구글,다음등의 검색포털은 전 세계에 퍼져있는 홈페이지를 어떻게 찾아내고 문제가 있는지 판단할까요? www라는 방대한 세계의 웹 연결망을 통해서 각각의 소프트웨어 로봇을 통해 홈페이지의 유무를 판단합니다. 홈페이지 전체를 보여줄 수도, 일부만 보여줄 수도, 검색엔진에서 해당이 되지않게 만들어 줄 수 있습니다. 사용자가 언제든 원하는대로 말이죠. 이것이 홈페이지를 운용함에 있어 첫 관문입니다. START 저번 시간에 배웠던 임대형과 직접 제작하는 홈페이지의 무,유료의 차이점과 장단점을 살펴보았는데요 임대형은 관리자에서 검색노출을 위한 가이드가 사이트내에 별도로 제공되는 반면 제작형은 검색노출을 위해 직접 설정을 하셔야 하는데 이 때 도움을 줄 수 있는것이 네이버의 서치어드바이저나 구.. 홈페이지 제작에 대한 두가지 방법 지난시간에 홈페이지를 제작하기 위해 환경과 기술적 요인을 알아보았는데요 환경적요인에는 인터넷주소(도메인주소)를 필수로 구입해야한다는것을 배웠습니다. 기술적요소(서버와 언어)를 마련하는법에 대해 좀 더 알아볼게요 홈페이지를 제작하기 전에 상품이나 컨텐츠의 성격을 먼저 파악하는것이 중요한데 쇼핑몰인지? 회사 소개 사이트인지? 제품의 소개 사이트인지? 등등.. 이 과정을 통해서 간단하고 심플하게 작업을 하면 되는지 메뉴별로 복잡한 구성을 해야하는지의 선별작업을 먼저 끝내셔야 합니다 선별작업을 끝내셨으면 이제 홈페이지를 만드셔야 겠죠? 첫번째는 임대방식 제작입니다 제작에 관련된 기술을 모르기 때문에 만들어진 홈페이지를 임대하는방식으로 유료와 무료에 따른 서비스 요금의 차이가 있고 두번째는 직접제작 .. 이전 1 2 3 4 5 다음
