본문 바로가기

Try/web

(41)
[wix] 요소 위치 고정 하기 안녕하세요. 플입니다. 오늘은 윅스에서 요소의 위치를 고정해보겠습니다. 위치 고정은 스크롤을 내려도 그 요소가 계속 화면의 같은 자리에 위치하게 됩니다. 코딩으로는 position:fixed;와 같은 효과를 줍니다. 주로 로고, 메뉴 등에 사용하거나 연락처 등을 계속 보이게 하고 싶을 때 사용합니다. 1. 오른쪽 클릭 위치 고정은 간편하게 할 수 있습니다. 고정하고자 하는 요소에서 오른쪽 클릭을 하면 아래쪽에 위치 고정이라는 항목이 바로 보입니다. 위치 고정을 클릭해줍니다. 2. 위치 설정 위치 고정을 클릭하면 바로 설정창이 뜹니다. 위치를 설정할 수 있는데 마우스를 올리면 어디쯤 위치할지 미리 보기로 보여줍니다. 이미지는 이미 위치한 곳에는 미리보기 영역이 뜨지 않아서 오른쪽 위를 마우스 오버해본 것이..
[wix] 인트로 만들기 안녕하세요. 플입니다. 오늘은 윅스에서 인트로를 제작해보겠습니다. 1. 새 페이지 만들기 페이지 추가로 새 페이지를 추가해줍니다. 이때 페이지는 비공개 페이지 즉, 눈이 감긴 모습으로 설정해줍니다. 더보기 버튼을 누르면 설정할 수 있습니다. 2. 배경 설정 배경 탭에 들어가서 적당한 배경을 골라줍니다. 설정에 들어가 스크롤 효과를 고정으로 바꿔줍니다. 없음이 되면 이미지가 너무 크게 들어가 흐릿하게 보일 수도 있습니다. 3. 불필요한 부분 삭제 불필요한 요소들은 삭제해줍니다. 요소를 클릭하고 오른쪽 도구에서 삭제 버튼을 눌러주거나 Delete 키로 쉽게 삭제할 수 있습니다. 다만 메뉴 같은 경우에는 모든 페이지에 표시를 체크 해제하고 삭제해야 합니다. 이럴 경우 메인 페이지를 제외하고 메뉴가 없어지는데요..
[wix] 모바일 디자인 안녕하세요. 플입니다. 오늘은 모바일 디자인을 해보겠습니다. 1. 모바일 버전 변경 모바일 디자인은 상단에 모바일을 누르면 변경할 수 있습니다. 2. 메뉴 디자인 모바일 메뉴를 선택하면 디자인 변경이 가능합니다. 디자인 사용자 지정을 들어가 디자인을 마음에 들게 변경합니다. 모바일 메뉴의 확장 디자인도 여기서 변경이 가능합니다. 3. 배경 변경 배경의 글씨가 모바일에서는 잘려 보여서 수정해주려고 합니다. 좌측 메뉴에서 배경 > 이미지를 눌러주세요. 이미지에 마우스를 올리면 더보기 아이콘이 뜹니다. 여기서 이미지 자르기 및 편집이 가능합니다. 임의로 크기를 지정해줘도 괜찮고 저처럼 크기 및 비율로 정해줘도 괜찮습니다. 수정이 끝났다면 저장을 눌러주세요. 이미지가 추가된 것을 확인할 수 있습니다. 이미지를 ..
[wix] 구글 지도 넣기 안녕하세요. 플입니다. 오늘은 구글 지도를 넣어볼게요. 1. 구글 지도 추가 구글 지도는 추가 > 기타 > google 지도 에서 넣을 수 있어요. 쭉 아래로 내리다보면 기본 지도가있어요. 드래그해서 추가한 다음 크기를 알맞게 조정해주세요. 2. 위치 관리 위치 관리로 위치를 변경해볼게요. 주소와 제목을 수정해줄수있어요. 주소에 서울 시청이라고 적어줘도 알아서 나오더라구요. 임시로 서울 시청을 넣어봤어요. 그럼 이만. 총총. .
[wix] 드롭다운 디자인 안녕하세요. 플입니다. 오늘은 드롭 다운의 디자인을 해볼게요. 1. 배경 디자인 드롭 다운은 하위 메뉴가 아래로 나오는 부분을 말하는 거예요. 마우스를 메뉴에 올렸을 때 하위 메뉴가 어떤 식으로 보이는지 디자인해줄게요. 우선 디자인 > 디자인 사용자 지정을 눌러주세요. 기본 탭에서 드롭다운 배경을 설정할 수 있어요. 저는 흰색으로 선택했어요. 2. 텍스트 디자인 모서리는 드롭다운의 배경 모서리를 정해줄 수 있어요. 저는 기본으로 넘어갈게요. 값을 넣어주면 둥근 모서리로 설정할 수 있어요. 텍스트는 상위 메뉴와 하위 메뉴가 동일하게 들어가더라고요. 3. 미리 보기 드롭다운은 미리보기를 해야지 확인할 수 있어요. 대시보드에서 사이트 미리보기로 미리 볼 수 있어요. 미리보기를 해봤어요. 내가 설정한 디자인으로..
[wix] 서브페이지 만들기 안녕하세요. 플입니다. 오늘은 서브 페이지 디자인을 해볼게요. 1. 메뉴 만들기 서브 메뉴는 버튼을 만들 거예요. 바닥글 메뉴를 만들었던 것처럼 드래그해서 추가해주세요. 텍스트 변경과 디자인을 이용해서 버튼을 꾸며주세요. 저는 버튼이 3개가 필요해서 복사해서 만들고 그룹으로 만들어줬어요. 버튼 설명은 바닥글 메뉴 제작과 동일해서 생략하고 링크를 남겨둘게요. > 바닥글 메뉴 바로가기 메뉴에 맞게 기본 색상을 변경해주면 좋아요.(필수는 아니에요.) 2. 서브 제목 서브 페이지의 제목을 우선 고쳐줄게요. 클릭하고 텍스트 편집으로 수정해주세요. 글을 수정하고 영역 지정 후 디자인을 수정해주세요. 3. 내용 입력 불필요한 부분은 지우고 텍스트에서 단락 텍스트를 추가해줬어요. 크기는 도구 바에서 직접 입력해줘서 바..
[wix] 배경이미지 흐릴 때 해결 방법 안녕하세요. 플입니다. 오늘은 이미지가 너무 크게 들어가서 흐려진 배경을 바꿔볼게요. 1. 페이지 배경 변경 배경을 클릭하면 페이지 배경 변경이라는 아이콘이 나오는데 여기를 클릭해주세요. 2. 설정 바꾸기 왼쪽 메뉴에서 페이지 배경 메뉴가 열리면 설정을 들어가 주세요. 스크롤 효과가 기본은 없음으로 돼있을 거예요. 여기서 고정을 눌러주시면 배경 이미지가 고정이 되면서 사이즈가 적절하게 조정이 됩니다. 간단하게 배경을 수정해봤어요~ 그럼 이만. 총총. .
[wix] 바닥글 메뉴 만들기 안녕하세요. 플입니다. 이번 포스트에서는 바닥글에 메뉴를 추가해볼게요. 1. 버튼 추가하기 버튼 추가는 왼쪽 도구에서 추가할 수 있어요. 버튼 탭을 선택하고 마음에 드는 디자인을 골라주세요. 고른 디자인을 저렇게 드래그해주시면 메인에 버튼을 생성할 수 있어요. 2. 텍스트 변경 및 링크 추가하기 메인에 버튼이 생성될 거예요. 클릭하면 텍스트 변경이라는 버튼이 생기는데 텍스트 변경과 링크를 추가할 수 있어요. 링크는 이렇게 여러 종류 중에서 골라서 추가 가능해요. 저는 홈이라서 페이지로 넣어줬어요. 3. 디자인 변경 사이즈는 옆의 조절점을 드래그해주시면 쉽게 변경 가능해요. 위에 자동으로 사이즈가 보이니까 원하는 사이즈로 줄이거나 늘릴 수 있어요. (버튼을 중간에 바꿔서 다른 디자인이지만 내용은 똑같아요...