모바일 버전에 불필요한 PC 섹션이 있는 경우 섹션 단위로 숨김 처리할 수 있습니다. 


섹션 숨기기

  1. 뷰포트를 모바일로 전환합니다. 뷰포트 변경방법
  2. 섹션마다 왼쪽 상단에 표시된 숨김 아이콘(눈 아이콘)을 클릭합니다.
    참고: 섹션마다 숨김 아이콘이 준비되어 있어, 원하는 섹션만 클릭해 숨길 수 있습니다. 
  3. 섹션이 숨겨집니다.


섹션 복원하기

숨긴 섹션은 언제든 복원할 수 있습니다.

  1.  뷰포트 오른쪽의 섹션 구분선(파란 점선) 주변에 표시된 말풍선 아이콘을 클릭합니다. (숨긴 섹션의 수에 따라 숫자가 다르게 표시될 수 있습니다.) 
  2. 화면 오른쪽에 숨긴 섹션 목록창이 나타나면 복원하려는 섹션을 클릭합니다.
  3. 숨긴 섹션이 원래 위치로 복원됩니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기



아임웹은 PC 버전을 제작하면 모바일 버전도 자동으로 제작됩니다. 하지만 자동으로 만들어진 결과물이 모두 마음에 들지 않을 수 있습니다. 뷰포트를 모바일로 변경하고 모바일 디자인을 편집해 보세요.

모바일 디자인을 변경하려면 먼저 뷰포트를 PC에서 모바일로 변경해야 합니다.


변경방법

  1. 디자인 모드 중앙 상단에 위치한 모니터 아이콘을 클릭합니다.
  2. 모바일을 선택합니다.
  3. 뷰포트가 모바일로 변경됩니다. (다시 PC 뷰포트로 돌아가려면 같은 방법으로 PC를 선택합니다.)



도움말에 찾으시는 답변이 없으신가요? 문의하기




HTML 구조적 속성 문제로 세로선 적용은 불가능합니다. HTML에서 <hr>이라는 가로선 태그가 존재하지만 세로선은 존재하지 않으며, 이는 HTML의 구조적인 속성과 관련이 있습니다. 이에 따라 많은 개발자들이 세로선을 만들 때는 여러 편법을 사용해 구현하곤 합니다.

대표적으로 <div> 태그의 오른쪽에만 선을 부여하거나(border-right), <div> 태그 자체의 너비를 선 너비만큼 설정하고 높이를 지정하거나, <table> 태그를 이용해 선을 부여하는 방법들이 있습니다. 그러나 이러한 방법들은 아임웹 그리드 시스템에는 적용이 어렵습니다.

단, 상단(Header)에는 선 위젯을 사용해 세로선 삽입이 가능합니다. 그 이유는 상단은 그 역할 특성상 그리드 시스템이 적용되지 않고 있기 때문입니다. 현재까지 상단을 제외한 본문(Body)에는 세로선 적용이 어려운 점 양해 부탁드립니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기



위젯 설정을 열어 각 위젯이 가진 고유의 설정을 변경할 수 있습니다. 이 도움말에서는 이미지 위젯을 기준으로 위젯 설정을 열고, 일부 설정을 변경하는 방법을 안내합니다. 


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다. (위젯이 없는 경우, 디자인 모드 왼쪽 상단의 위젯 추가 + 아이콘을 클릭해 추가합니다.)
  3. 컨텍스트 메뉴가 나오면 가장 첫 번째 설정 메뉴를 클릭합니다.
    참고: 아래는 이미지 위젯의 컨텍스트 메뉴이므로 이미지 설정이 나타납니다. 다른 위젯에서는 해당 위젯의 이름이 설정 앞에 붙어 표시됩니다.
  4. 해당 위젯의 설정 창이 나타납니다.
    참고: 아래 그림은 이미지 설정 창입니다. 위젯에 따라 옵션 항목들이 달라집니다.
  5. 필요한 옵션을 모두 설정했다면 위젯 설정 창 바깥 영역을 클릭해 적용합니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기


모든 섹션은 고유의 ‘섹션 ID’를 갖고 있으며, 버튼 등에 추가할 수 있는 링크 주소로 활용할 수 있습니다.

예를 들어, 방문자가 ‘섹션 ID’가 링크된 버튼을 클릭하면 아래의 애니메이션과 같이 방문자를 동일한 페이지의 다른 섹션으로 이동시킬 수 있으며, 필요에 따라 다른 페이지의 특정 섹션으로 이동시키는 것도 가능합니다.

이 도움말을 통해 버튼을 클릭하면 특정 섹션으로 이동시키는 앵커 링크를 만드는 방법을 배워보세요.


참고: 아래는 버튼 위젯을 예로 설명하지만, 링크를 설정할 수 있는 위젯(이미지 위젯, 갤러리 위젯 등)이라면 모두 적용할 수 있습니다.




설정방법


동일한 페이지의 특정 섹션에 앵커 링크 걸기

 

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 버튼 위젯을 클릭해 페이지에 추가합니다.
  4. 버튼 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.
  6. 링크 타입으로 코드를 선택합니다.

  7. 오른쪽 코드 입력 칸에 링크 걸 섹션의 섹션 ID 를 입력합니다. (예: #s201910224dc7406405bc4)

    참고: 메뉴 URL과 섹션 ID를 찾는 방법은 이 도움말 하단의 관련 도움말 항목에서 찾아보실 수 있습니다.


  8. 버튼 설정 창에서 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.
  9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  10. 버튼을 클릭하면 의도한 섹션으로 이동하는지 확인합니다.
  11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



다른 페이지의 특정 섹션에 앵커 링크 걸기

참고: 다른 페이지에 앵커 링크를 걸 땐 페이지 새로고침이 일어나며 이건 정상적인 현상입니다.


  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 버튼 위젯을 클릭해 페이지에 추가합니다.
  4. 버튼 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 버튼 설정을 클릭합니다.
  6. 링크 타입으로 코드를 선택합니다.

  7. 링크 타입 오른쪽에 위치한 코드 입력 칸에 /메뉴URL#섹션ID 형식으로 메뉴 URL과 섹션 ID를 붙여서 입력합니다. (예: /lookbook#s20200623123e797c6dfb8)

    참고: 메뉴 URL과 섹션 ID를 찾는 방법은 이 도움말 하단의 관련 도움말 항목에서 찾아보실 수 있습니다.
  8. 버튼 설정 창에서 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.
  9. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  10. 버튼을 클릭하면 의도한 섹션으로 이동하는지 확인합니다.
  11. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.




관련 도움말 

  • 섹션ID 확인하기
  • 메뉴 주소(URL) 변경하기



도움말에 찾으시는 답변이 없으신가요? 문의하기


섹션 설정 창을 열어 섹션에 배경(색상, 이미지, 동영상)을 추가하거나 위젯 간의 간격 조절, 여백 조절, 사이드 나누기, 각종 효과를 줄 수 있습니다. 


섹션 설정 열기

  1. 디자인 모드에 접속합니다. 접속방법
  2. 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
    주의: 위젯에 마우스 오른쪽 버튼을 클릭하지 마세요.
  3. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  4. 다음 항목별 옵션을 확인하고 수정합니다.



섹션 설정항목

  1. 배경 이미지/동영상 설정방법: 섹션의 상단 회색 부분에 마우스 커서를 올리면 이미지 찾기 버튼으로 이미지를 업로드하거나 YouTube영상을 배경으로 설정할 수 있습니다.
  2. 배경 이미지: 올려진 배경 이미지를 표시하는 방법을 선택합니다. 9칸으로 구성된 네모난 버튼은 이미지가 표시되는 기준위치를 설정합니다.
  3. 배경 배경색: 배경색을 지정합니다. 업로드 된 이미지가 있는 경우 이미지 위에 겹쳐 보이기 때문에 이미지와 함께 사용하려면 투명도를 조정하세요.
  4. 배경 텍스트: 섹션에 표시되는 기본 텍스트 색상을 설정합니다. 이 값을 비워두면 공통 디자인 설정 의 텍스트 색상을 따릅니다.
  5. 흑백 이미지: 업로드된 배경 이미지를 흑백으로 처리합니다.
  6. 배경 이미지 고정: 스크롤을 하더라도 배경이 고정된 위치에 표시됩니다.
  7. 마우스 포인터 움직임: 마우스 포인터의 움직임에 따라 배경 이미지가 움직입니다.
  8. 간격-상하여백, 좌우여백: 섹션의 안쪽 여백을 설정합니다.
  9. 그리드 간격: 기본 그리드 간격 옵션을 해제하고 그리드 상하 및 좌우 간격을 조정하여 공통 디자인 설정의 그리드 간격을 따르지 않고 해당 섹션에만 위젯간 간격을 조정할 수 있습니다.
  10. 가로 100% 확장: 섹션의 본문영역을 브라우저 크기만큼 확장합니다.
  11. 사이드: 좌측이나 우측에 사이드 메뉴를 삽입하려면 분할된 모양의 아이콘을 선택합니다. 사이드 영역의 폭과 사이드 영역과 본문 영역간의 간격을 조정할 수 있습니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기


메인페이지란?

사이트 접속 시 나타나는 첫 페이지 말합니다. 메인페이지 또는 홈 메뉴이라고도 부르며, 예시로 http://imweb.me 으로 접속 시 아임웹 메인페이지가 나타나는 걸 보실 수 있습니다. 대다수의 웹사이트는 상단 메뉴 로고를 클릭하거나 HOME 메뉴(제공하는 경우)를 클릭하면 메인페이지로 돌아가는 구조를 가지고 있습니다. 


메인페이지 설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 메뉴 관리   를 클릭합니다.
  3. (선택 사항) 기존 메인페이지를 수정해 사용하거나, 보관하려는 경우 해당 메뉴를 복제해둡니다. 메뉴 복제방법
  4. 메인페이지 메뉴를 마우스 클릭 후 위로 드래그하여 최상단으로 이동시킵니다.
    주의: 하단 메뉴가 아닌 상단 메뉴의 최상단에 위치해야 합니다.




관련 도움말


메뉴 추가, 이동, 삭제 방법은 다음 도움말을 참조하실 수 있습니다.

메뉴 추가, 이동, 복제, 삭제하기


도움말에 찾으시는 답변이 없으신가요? 문의하기




본문폭이란, 웹 페이지 본문 영역의 가로 길이를 가리킵니다. 본문폭의 길이를 조절하면 아래 그림과 같이 콘텐츠가 표시되는 페이지 가로폭이 변경되는 걸 볼 수 있습니다. 웹 페이지가 포함하는 콘텐츠 및 콘셉트에 따라 본문폭을 조절하여 사용해 보시길 바랍니다.

[그림1] 본문폭 넓음



[그림2] 본문폭 좁음


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 오른쪽 상단의 톱니바퀴 아이콘을 클릭합니다.
  3. 공통 디자인 설정 메뉴가 화면의 오른쪽에서 나타납니다.
  4. 본문 항목에서 본문폭 옵션을 픽셀(px) 단위로 조절합니다.
  5. 공통 디자인 설정 바깥 화면을 클릭해 설정을 종료합니다.
  6. 저장 버튼을 클릭해 적용합니다. 이제 설정한 길이로 본문폭이 변경됩니다.


참고사항

아래 두 가지 옵션은 본문폭 설정값의 영향을 받지 않습니다. 

  • 위젯에 가로 영역 확장 옵션을 설정한 경우
  • 섹션 가로 100% 확장 옵션을 설정한 경우


도움말에 찾으시는 답변이 없으신가요? 문의하기

접근시 첫 번째 하위 메뉴로 이동 옵션을 활성화 하면, 해당 메뉴 클릭 시 그룹 메뉴 내 첫 번째 하위 메뉴로 이동합니다.


설정방법


  1. 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 왼쪽 상단 메뉴 관리 를 클릭합니다.
  3. 링크를 걸 메뉴명 오른쪽 끝의 ⓘ 아이콘을 클릭합니다.
  4. 옵션 항목에서 접근시 첫 번째 하위 메뉴로 이동 옵션을 선택합니다.
  5. 메뉴 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  6. 디자인 모드 오른쪽 상단 미리보기 아이콘을 클릭합니다.
  7. 상단 메뉴 클릭 시 하위 첫 번째 메뉴로 이동하는지 확인합니다.
  8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.




주의사항

접근시 첫 번째 하위 메뉴로 이동 옵션을 활성화 하면 해당 메뉴는 더 이상 사용하지 않게 되므로 페이지 편집이 제한됩니다. 편집 제한을 해제하려면 위 4번 항목의 옵션을 선택 해제해 주세요.



도움말에 찾으시는 답변이 없으신가요? 문의하기


방문자가 웹사이트의 상단 또는 하단 메뉴를 클릭했을 때, 해당 메뉴로 이동하지 않고, 외부 사이트로 이동하거나 파일을 내려받을 수 있도록 링크를 설정할 수 있습니다.

예를 들어, "회사소개서" 상단 메뉴를 클릭하면 PDF 문서가 다운로드 되거나, 페이스북 페이지 등으로 이동하도록 링크를 걸 수 있습니다.

참고: 이 작업을 수행하면, 해당 메뉴는 사용자가 설정한 링크로 이동하거나 기타 다른 작업을 수행하게 되므로 페이지 편집이 제한됩니다. 페이지 편집 제한을 풀려면, 제한 경고 메시지의 링크 해제하고 편집하기를 클릭하거나, 메뉴 설정에서 삽입한 메뉴 링크를 삭제하면 됩니다.


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 링크를 걸 메뉴명 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭합니다.
  4. 메뉴 링크 항목에서 링크 타입링크 로 지정하고, 오른쪽 주소 입력칸에 http:// 또는 https:// 로 시작하는 링크 URL(주소)를 입력합니다.

참고: 링크 타입에는 링크 외에도 전화걸기, 파일첨부, 즐겨찾기 등 다양합니다. 모든 링크 타입은 링크 타입의 종류 도움말을 참고할 수 있습니다.


5. (선택 사항) 새창 옵션을 선택하면 새 브라우저 탭으로 링크가 열립니다.

6. 메뉴 설정 창 오른쪽 상단에 위치한 닫기 ✕ 아이콘을 클릭해 설정을 완료합니다.

7. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭해 확인합니다.

8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기

도움말에 찾으시는 답변이 없으신가요? 문의하기
TOP