- 내비게이션 바
- 내비게이션 바란 웹사이트 상부 또는 좌우에 있는 사이트 내 페이지 링크를 모은 부분으로, 페이지 전체의 목차 같은 역할을 하는 중요한 파트입니다.
제2회는 Webflow에서 내비게이션을 만듭니다. 또한 심벌을 만드는 방법을 해설합니다. 둘 다 Webflow를 쓰는 데 기본이 되는 작업이니 확실히 익힙시다.
브레드크럼 작성 방법은 여기
>>Webflow에서 브레드크럼을 만드는 방법
- 내비게이션이란
기본적으로 웹사이트 상부 또는 좌우에 있는 사이트 내 페이지 링크가 모인 곳. 페이지 전체의 목차 같은 역할을 하는 중요한 파트입니다. - 심벌이란
여러 번 재사용하는 파트를 간단히 저장할 수 있는 기능. 한 번 저장해 두면 모든 페이지에서 즉시 같은 디자인을 삽입할 수 있고, 클래스명도 그대로 유지되므로 모든 페이지의 심벌을 한 번에 편집할 수 있습니다.
1. 내비게이션 바 작성 방법
【순서 1】내비바 선택·추가
Webflow에는 처음부터 내비바 템플릿이 준비되어 있습니다. 제작 화면 왼쪽 위 “＋” 버튼에서 내비바를 드래그 앤 드롭으로 Body 바로 아래에 배치합시다.
【순서 2】클래스 지정
내비바 안의 Container에 그대로 “Container”라고 클래스명을 붙입니다. 지난번에 배치한 Container와 같은 클래스명으로 합시다.
【순서 3】Max width 설정
Container에 Max Width를 1200px 지정합니다. 이때 option(Alt) 키를 누르며 Max Width를 변경해 내비바와 타이틀이 동시에 움직이는지 확인해 봅시다. 함께 움직이면 같은 클래스가 지정되어 있다는 뜻입니다.
내비게이터 고정
아이템을 삽입할 때는 내비게이터를 보며 작업하면 효율 UP! “Z”를 누르면 내비게이터를 표시할 수 있습니다. 아래 이미지를 참고해 PIN으로 고정해 봅시다.
2. 내비바의 스타일 변경
배경을 검정으로
웹사이트 전체의 배경을 검정으로 합시다. 이번엔 전체 배경을 바꾸므로 핑크 태그의 BODY를 사용합니다.
- 내비바에도 클래스명을 붙이고 배경을 검정으로 변경합시다.
글자색 변경
배경에 동화되어 사라진 글자를 보이게 하고 싶으므로 글자색을 흰색으로 바꿉니다. 글자색을 정할 때는 대비(콘트라스트) 평가를 보며 정하면 읽기 좋은 색을 고를 수 있습니다.
내비바 글자색을 바꿀 때의 주의
내비바에는 미리 링크 텍스트가 3개 정도 있습니다. 링크 텍스트는 전부 같은 클래스명으로 합시다. 색 지정과 여백에 통일감을 줄 수 있습니다.
내비바 왼쪽에 로고 삽입
원하는 로고 또는 샘플 로고를 넣읍시다. 이후 PADDING으로 여백을 조정해 바의 중심에 배치할 수 있으면 GOOD!
콤보 클래스 사용
메뉴 끝에 문의 버튼을 만듭니다. 이때 2개의 클래스를 사용하는 콤보 클래스를 사용합시다.
첫 번째 “menu”는 내비바 링크 전체에 공통된 클래스입니다. 이대로 편집하면 내비바 안의 링크 전부가 편집되므로, 독립된 움직임을 갖는 클래스 “Contact”를 하나 더 붙입니다. “Contact”에는 배경색과 Radius(모서리를 둥글게 하는 기능)를 설정합시다.
- 2개의 클래스를 지정
- 배경과 Radius 설정
이번엔 Webflow의 색을 떠올려 비슷한 색을 골랐습니다. Radius는 10px. 다른 메뉴에 맞춰 여백은 20px로 통일하고 싶으므로 PADDING을 10px, margin을 10px로 해 글자가 중앙에 오도록 합니다.
글자 변경
메뉴의 자간, 글자색, 텍스트는 취향대로 바꿔 보세요! 자신만의 웹사이트를 만들어 갑시다.
3. Webflow의 심벌 기능 사용
우클릭만 하면 된다
먼저 이번에 만든 내비바를 선택합니다. 그 상태로 우클릭. 맨 아래 표시되는 Create Symbol을 선택해 이름을 Navigation으로 합시다.
심벌을 만든 부분은 초록색이 됩니다. 심벌은 모든 효과를 공유하므로 편집하면 사이트 안의 모든 같은 심벌에 영향을 줍니다.
심벌은 더블 클릭해 편집합니다. “편집이 안 돼!”라고 놀라지 말고 심벌 안에 들어와 있는지 확인한 뒤 작업합시다.
심벌에 변경을 줘 본다
먼저 저장된 심벌을 드래그 앤 드롭으로 2개로 만듭니다. 그리고 두 번째 심벌의 글자를 바꿔 보세요. 처음 만든 심벌의 글자도 똑같이 바뀔 것입니다.
정리: Webflow University 2일 차 종료
이번에는 내비바를 만들었습니다. 아주 간단해서 별로 어렵지 않으셨죠? 다음 회는 페이지의 메인 콘텐츠를 충실히 만들어 갑니다. 하루 조금씩이지만 앞으로 나아가며 힘내 봅시다.
자주 묻는 질문
Webflow에서 내비게이션 바를 추가하려면?
Webflow에는 처음부터 내비바 템플릿이 준비되어 있습니다. 제작 화면 왼쪽 위 “＋” 버튼에서 내비바를 드래그 앤 드롭으로 Body 바로 아래에 배치합니다.
Webflow의 심벌이란?
여러 번 재사용하는 파트를 간단히 저장할 수 있는 기능입니다. 한 번 저장하면 모든 페이지에서 즉시 같은 디자인을 삽입할 수 있고 클래스명도 그대로 유지되어 모든 페이지의 심벌을 한 번에 편집할 수 있습니다.
콤보 클래스는 언제 쓰나요?
공통 클래스 그대로 편집하면 같은 클래스의 요소가 전부 편집되어 버릴 때 씁니다. 글에서는 내비바 링크 전체에 공통된 “menu”에 독립된 “Contact”를 하나 더 붙여 문의 버튼을 만듭니다.
심벌을 편집하려면?
심벌은 더블 클릭해 편집합니다. 심벌은 모든 효과를 공유하며 편집이 사이트 내 모든 같은 심벌에 영향을 주므로, 심벌 안에 들어와 있는지 확인하고 작업합시다.
