워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

이전 글 에서 어도비 뮤즈 베타의 작업흐름을 알아보았는데 이번글에서는 프로젝트파일인 뉴사이트만들기와 헤더(Header)영역 푸터(Footer)영역 설정하는 방법, 이미지 삽입하는 방법을 알아봅니다.


어도비 뮤즈 베타 초기화면의 웰컴스크린에서 뉴사이트버튼을 클릭하거나 메뉴에서 파일-뉴사이트를 선택하면 위와 같은 창이 나옵니다. 페이지의 넓이와 높이를 입력하고 컬럼 수를 3, 컬럼의 넓이는 273, 컬럼간의 간격인 거터는 20을 입력합니다. 마진은 3의 체인아이콘을 클릭하고 50을 입력하면 4곳에 동일한 수치로 입력됩니다. 패딩은 상하 36을 입력합니다. 입력도중에 수치가 변경되는 수가 있는데 이는 위 내용을 보면 가로 사이즈가 960인데 2번항목의 수치를 다 더하게 되면 959가 나오게 됩니다. 그래서 자동으로 조절하기 위해서 마진부분이나 페이지 넓이 부분에서 조정이 되기 때문입니다. OK클릭하고 메뉴에서 파일-Site Properties를 선택하면 같은 창이 나오는데 수치가 변경되어있는 것을 확인할 수 있습니다. 

 
레이아웃 수치를 지정하고 나면 위와같은 화면이 나옵니다. Ctrl+Shift+S키를 눌러 이전 글에서 다운받은 파일 폴더에 적당한 이름(MyNewSite)을 입력하고 저장합니다. 매스터페이지에서 공통적으로 들어갈 해더와 푸터를 만들기 위해 2의 A-Master썸네일을 더블클릭합니다.


디자인뷰 화면에 들어오면 좌측 눈금자에 슬라이더가 다섯개 나옵니다. 첫번째 슬라이더는 페이지의 상단을 조절하는 기능을 하고 이것과 쌍을 이루는 것이 4번의 페이지 하단 조절 슬라이더입니다. 클릭드래그하면 페이지의 상단과 하단이 조절됩니다. 5번은 브라우저의 하단을 조절하는 슬라이더이고 이 세가지는 나중에 배경 이미지를 삽입한 후에 설명드립니다. 2번의 헤더 슬라이더는 헤더영역을 설정하고 3의 푸터 슬라이더는 푸터영역을 설정합니다. 이 두가지는 매스터페이지에만 나타나고 상세페이지에는 나타나지 않아서 조절기능이 없습니다. 


어도비 뮤즈 베타의 도구모음에는 도구가 총 6개가 있는데 주로 쓰이는 것이 선택툴과 텍스트툴, 사각형툴입니다. 선택툴은 이미지나 텍스트를 선택해서 이동하거나 크기를 조절, 회전할때 사용되고 가장 많이 사용됩니다. 텍스트툴은 텍스트를 거의 입력할 기회가 없지만 텍스트의 스타일을 설정하기 위해 사용됩니다. 사각형툴은 사각형을 그리고 색상을 입력하거나 이미지를 삽입할때 사용합니다. 빨간네모의 상자를 콘트롤패널이라고 하는데 페이지에서 어떤 요소가 선택되느냐에 따라 내용이 바뀌게 됩니다. 특히 4의 글자부분을 선택 인디케이터(Selection Indicator)라고 하는데 어떤 요소가 선택되었는지에 따라 Page, Text Frame, Image Frame, Widget 등 여러가지형태의 글자로 나오므로 선택된 요소를 확인할 수 있습니다. 이는 이미지위에 글자가 들어간 경우 어떤 요소를 수정할지를 선택을 잘해야하는데 확인하기 쉽도록하기 위한 것입니다. 상세페이지를 만들기 위해 Plan을 클릭합니다.


홈 썸네일에 마우스를 올리면 주변에 아이콘이 나타납니다. 우측의 플러스 아이콘을 두번 클릭하면 페이지가 두개 만들어집니다. 이름부분을 더블클릭하여 이름을 수정합니다. 하단에 있는 아이콘을 클릭하면 자식페이지가 만들어집니다. 다시 마스터 썸네일을 더블클릭합니다.


어도비 뮤즈 베타에서 이미지를 삽입하는 방법이 두가지가 있는데 하나는 html에서 background 속성으로 요소에 배경으로 삽입하는 것이고 다른하나는 img태그형태로 삽입하는 것입니다. 첫번째 방법으로 사용되는 것이 어도비 뮤즈 베타에는 두군데 있습니다. 하나는 전체 배경에 삽입하는 것(1), 다른하나는 일반요소(2)에 삽입하는 것입니다. 배경이미지를 삽입하기 위해 1을 클릭하면 메뉴가 나옵니다. 3을 클릭하면 색상을 선택할 수 있는데 4를 클릭하면 같은 화면이 나옵니다. 5의 폴더를 클릭하면 브라우저창이 나와서 이미지를 선택할 수 있습니다. 다운 받은 폴더로 이동하여 bk-map.gif파일을 선택합니다. Fitting은 6을 클릭하여 Original size를 선택합니다. 6에서 Tile은 가로세로로 반복(repeat)되는 것이고 가로만 반복은 Tile Horizontally(repeat-x), 세로는 Tile Vertically(repeat-y)입니다. Tile은 CSS에서 no-repeat에 해당됩니다. 포지션은 중앙점을 선택합니다.

2의 Fill을 클릭하면 같은 메뉴가 나오는데 8을 클릭하여 투명도를 줄이면 9의 흰색배경이 투명해집니다. 90정도로 조절합니다.


메뉴바 이미지를 삽입하기 위해서 이미지삽입의 두번째 방법을 사용합니다. 메뉴에서 파일-Place를 선택하거나 단축키 Ctrl+D키를 누르면 브라우저창이 나옵니다. 이미지 저장폴더에서 top-nav.png를 선택하면 1처럼 커서에 작은 이미지가 따라다닙니다. 클릭하면 본래의 이미지가 나옵니다. 클릭드래그하여 3의 헤더슬라이더 위로 배치합니다. 이동하다보면 빨간선이 나오는데 스마트가이드입니다. 중앙이나 어떤 선과 일치하는 곳에 오면 스마트가이드가 나타나서 배치하기 용이하도록합니다. 4의 페이지탑 슬라이더를 아래로 이동해서 공간을 늘려주고 다시 Ctrl+D키를 누릅니다.


브라우저창에서 Ctrl키를 누르고 logo.png와 thedrip.png 파일을 선택하면 1처럼 두개의 이미지가 있다는 표시가 나옵니다. 페이지 상단에 클릭하여 하나를 배치하고 메뉴바 우측하단에 클릭하여 나머지를 배치합니다.


사각형툴을 선택하고 가로로 길게 클릭드래그해서 사각형을 만듭니다. Fill을 클릭하고 컬러의 작은 세모를 클릭하여 색상없음을 선택합니다. 이미지 폴더아이콘을 클릭하여 브라우저창에서 footer-zag.png파일을 선택하고 Fitting는 Tile Horizontally를 선택합니다. 스토록 컬러를 색상없음을 선택하거나 8에서 수치를 0으로 만듭니다.


이미지의 한쪽끝을 페이지의 좌측끝에 이동하여 붙이고 다른쪽 끝의 조절점을 클릭드래그해서 끝에 맞추면 이미지가 늘어나면서 채워집니다. 다시 사각형툴을 선택하고 하단에 크게 그려줍니다. Fill 컬러를 클릭하면 색상도구 상자가 나옵니다. 7의 스포이드툴을 선택하고 이미지위에 클릭하면 같은 색이 사각형에 채워집니다. 선택툴을 선택하고 클릭드래그하여 이미지하단에 맞춰줍니다.


이미지와 큰 사각형에 우클릭하여 메뉴에서 Footer Item에 체크되어있는지 확인합니다. 콘트롤패널에서 2의 Footer에 체크되어있으면 Footer슬라이더 아래에 있는 요소들은 모든 푸터아이템에 체크됩니다. 이것은 가운데 있는 Content영역의 내용이 길어지게 되서 아래로 늘어나게 되면 푸터아이템은 자동으로 아래로 내려가게 되는 것을 의미합니다. 그렇지 않고 푸터아이템으로 체크가 안되면 컨텐트요소로 취급됩니다.


시험을 해보겠습니다. 이미지를 푸터영역 위로 이동하고 우클릭해서 Footer Item에 체크해제한 다음 Plan을 클릭하여 레이아웃 창으로 가서 THE KOFFEE썸네일을 더블클릭해서 디자인뷰로 불러들입니다.


사진을 불러와서 컨텐트영역에 붙여넣고 이 이미지를 클릭드래그해서 아래로 내리면 내용영역이 늘어나게 되는데 4의 푸터영역 경계선 아래로는 내려가지 않습니다. 하지만 원래 푸터영역에 있던 5의 이미지는 아래로 내려가지 않고 고정되어있습니다. 그래서 푸터영역에 있는 요소는 Footer Item으로 체크되어있어야합니다. 마스터페이지에서 5의 이미지를 푸터영역아래로 내리면 자동으로 아이템으로 체크됩니다.


페이지 상단 슬라이더는 컨텐트영역 페이지 위의 패딩을 조절하는 역할을 합니다. 헤더슬라이더는 헤더영역을 만드는데 내용영역인 3에 어떤 요소를 놓으면 헤더영역으로 침범을 못하게 됩니다. 그래서 헤더영역 슬라이더는 적당한 간격인 4의 위치에 놓는 것이 좋습니다.


푸터영역은 내용이 늘어나면 아래로 내려가는 영역입니다. 위와같은 이미지를 프리뷰로 보면 이미지 그대로 나오기때문에 아랫부분이 보기 좋지 않습니다. 2의 페이지하단 슬라이더를 이동하면 4의 페이지 하단이 따라다닙니다. 그래서 2의 슬라이더를 1과 겹쳐놓거나 아니면 3의 브라우저하단 슬라이더를 5와 일치하게 놓고 2와 3을 겹치게 놓는 것이 좋습니다.

어도비 뮤즈 베타의 세부 디자인에 관한 글은 다음으로 계속 이어집니다.