애니빌드.LAB
매뉴얼
디자인팜 1.0 4. 맞춤 디자인 제작 및 수정 방법
- Anybuild
- 2015-02-20 16:56:00
- hit2749
- http://lab.anybuild.co.kr/bbs/faq/4249
디자인팜으로 제작된 페이지는 대부분 드래그앤드롭 방식으로 누구나 쉽게 만들수 있도록 개발되어 있습니다.
예를들어 CEO 인사말 페이지를 만들어 보도록 하겠습니다.
1. 디자인팜에서 아래와 같이 빈페이지를 만듭니다.
2. 디자인 페이지를 만들때 레이아웃 구성은 제각각 아주 다양할것 입니다. 디자인팜은 어떠한 레이아웃이더라도 완벽하게 반응형 레이아웃을 만들수 있도록 설계되어있습니다.
이번 강좌에서 CEO인사말 페이지는 가장 기본적인 2칸짜리 반응형으로 만들어 보도록 하겠습니다.
왼쪽 컨텐츠 목록에서 [반응형 레이아웃 > 2칸 레이아웃]을 클릭 합니다.
클릭하면 아래와 같이 컨텐츠가 추가 되었는지 확인 합니다.
만약 위 처럼 레이아웃이 세로로 보인다면 창크기를 키우면 아래와 같이 2칸으로 변경되는것을 확인 할 수 있습니다.
이렇게 반응형웹작업은 출력되는 화면의 크기에 따라 다르게 보이기 때문에 항상 창을 크게 해놓고 작업 하시기 바랍니다.
3. 이미지 및 텍스트 컨텐츠 추가 방법
레이아웃을 만들었다면 여기 안에 사진과 인사말을 넣어보도록 하겠습니다.
사진 이미지도 적당한 사이즈로 업로드 해보시기 바랍니다.
그리고 사진을 선택해서 [FARM_CONTAINER]로 드래그해서 넣어주세요.
그런데 이미지가 왼쪽으로 붙어 있네요. 가운데로 정렬하는게 좋겠네요.
다시 이미지를 선택하고 우측 옵션박스에서 가운데로 정렬 하고 저장 합니다.
이번에는 인사말을 추가 해보도록 하겠습니다.
컨텐츠 박스에서 [텍스트 > 장문 텍스트입력]을 추가 합니다.
그리고 우측 옵션박스에서 "텍스트 수정"을 통해 내용을 수정 합니다.
추가한 텍스트를 우측 [FARM_CONTAINER] 에 드래그해서 넣습니다.
필자는 이해를 돕기 위해 최대한 꾸미지 않고 제작 해보았습니다.
여러분은 옵션박스에서 제공되는 컬러색상 및 여백조정, 배경색상조정등을 통해서 이쁘게 꾸며 보시기 바랍니다.
여기까지 작업 하셨다면 반드시 [홈페이지 적용]을 클릭해야 정상적으로 반영됩니다.
[완성 화면]
수고 하셨습니다.











열기 닫기