동빈나 부트스트랩 웹 디자인 실전 강좌 3강 - 내비게이션 바 (Bootstrap Web Design Tutorial #3) > 부트스트랩

Bootstrap

부트스트랩 웹디자인 강좌 공유

동빈나 | 부트스트랩 웹 디자인 실전 강좌 3강 - 내비게이션 바 (Bootstrap Web Design Tutorial #3)

본문

※ 영상을 선명하게 보기 안내
  1. 유튜브 영상에서 오른쪽하단에 톱니바퀴를 클릭합니다.
  2. 팝업목록에서 "품질" 선택하세요.
  3. 원하는 해상도를 선택해주세요.
※ 모바일에서 Wifi가 아니라면 데이타가 소진될 수 있으니 주의바랍니다.
동빈나님의 부트스트랩강의 청각장애인을 위한 자막
15610964030763.jpg

 



 이번 시간에 볼 건 바로 내비게이션 바 라는
건데요.
흔히 우리가 일상적으로 말하는 내비게이션 이라고 한다면 어딘가에 위치를
알려주는 그러한 역할을 하는 도구를 의미하죠.
이렇게 나침반 같은 경우도 우리가 바르게 탐색할 수 있도록 어떤
네비게이션 역할을 해줄 때가 있죠.
하지만 우리 웹 사이트에서도 이렇게 내비게이션 바라는게 존재 헤어
특히 부트스트랩 안에서도 4 브 바라고 해서 어떠한 내비게이션 역할을
해주는 그런 컴포넌트가 존재하는데요. 지난 시간에 다루었던 점보트 론과
같이
부트스트랩 안에서 가장 많이 사용되는 하나의 컴포넌트 중 하나라고 할 수
있습니다.
네비게이션 다 갇힌 경우는 홈페이지 전체적인 구성을 보여주는 역할을 헤어
레비 기전을 통해서 다른 페이지로 이동하게 하거나
사용자가 원하는 기능을 찾아 가지고 스스로 이동할 수 있도록 하는 게
바로 대백 에이션 파가 하는 역할이죠 네비게이션 바 가진 경우는
일반적으로 html 소스 코드 중에서 그곳도 이바디 태그 안에서 가장
위쪽에 위치하며 자바스크립트가 함께 사용되는 경우가 많다고 할 수가
있어요.
한번 네비 개장 팔을 사용해보면서 이게 어떤 건지 그리고 어떤 역할을
하는지에 대해서 한번 이 해보는 시간을 가져보겠습니다. 이렇게 지난
시간까지 작업을 했던 내용을 한번 우리가 만든 코딩 부스터 란 사이트가
나오는 것을 알 수가 있죠.
이제 뭐 이렇게 위쪽에 네비게이션 바가 생성되도록 한번 만들어 볼게요
우리가 이렇게 전부 들어 부분을 만들어 주었는데요. 이전 보트로 부분 바로
위쪽에 다음과 같이
내부 라는 즉 4백 2 전 의미하는 인해 부트 기회를 만들어 줄 수
있도록 합니다.
그다음 바로 다음과 같이 클래스 내의 엠파 내부 바 한 다음에
디폴트로 이렇게 만들어 줍니다. 집 가장 기본적인 형태의 부트스트랩 에서
제공하는 내비게이션 바를 이렇게 만들어 주는 거고요. 클래스를 만들어
주는데요.
이렇게 컨테이너를 플로이드라고 만들어 줍니다.
단지 이런 식으로 다 맞추고요.
이제 것도 나름의 컨테이너라고 할수 있는건데요. 주로 이렇게 내비게이션
바를 만들 때는 컨테이너 슬라이드로 만들어 줍니다.
그다음 이제 이렇게
네비게이션 바위에 헤더 부분을 만들어 줄 수 있도록 합니다.
얘도 클래스 같은 경우도 이제 내비게이션에서 해도 역할을 하는 부분을
만들 때 사용하구요 바로 다음과 같이 하에 버튼을 만들어 줍니다.
타입은 이렇게 버튼을 해주시고
이런 식으로 만들어 줍니다. 그다음 이제
데이터 털 계승
지금 이렇게 입력하는 것은
가장 가장 기본적인 내비게이션 바를 만들때 사용하는
코드라고 할 수 있습니다. 이런 식으로 만들어 주시면 되구요.
이런식으로 하나의 태그 안에 들어가는 내용이 너무 긴 경우는 이렇게
줄바꿈을 해주셔도 전혀 문제가 없습니다.
이런 식으로 만들어 주시면 되구요. 이렇게 버튼을 달아 줄 수 있도록
합니다.
이제 버튼 태그 안에 뭐가 들어 가냐. 다음과 같이 스핀 클레이
ss 올리라 넣어주시고요.
달아줄 수 있도록 합니다. 그다음 이제 이런 식으로 기본적인 형태를 잡아
줄 수 있도록 합니다.
이게 가장 기본적인 네비게이션 헤더 부분을 만드는 부분이구요. 그 다음에
다음과 같이 아래쪽에
at 길을 만들어 주는데 이제 이렇게 브랜드라고 해서 상표나 아니면
홈페이지 제목이 들어갈 수 있는 의미 이렇게 자리 잡으면 됩니다.
바로 다음과 같이 연결되는 링크는 아직 정해지지 않았기 때문에 이렇게
차분해 주시고요.
다음과 같이 코딩 부스터 라고 이름을 넣어 주겠습니다.
이렇게 해주신 다음 한번 새로고침을 해주시면은 다음과 같이 코딩
부스터 라고 이렇게 제 목 부분만 들어가 있는것을 알수가 있구요.
이제 이런 식으로 사이트 크기를 줄이다 보면은 이렇게 오른쪽에 어떤
버튼이 생긴 걸 알 수가 있는데요. 보시면 이렇게 버튼이 퍼로 예쁘지 가
않죠.
따라서 이제 이런 식으로 아이콘 팔을 둘 다 만들어 주셔서 이렇게
새로고침 해 보시면 이런 식으로 짝 뜨기가 3개 그어져 가지고 더보기
예뻐지고 더 보기에 괜찮아 지는 것을 알 수 있습니다.
이렇게 만들어 주시면 아주 간단하구요. 헤더 부분을 만들어 줬기 때문에
이번에는
오른쪽에 각종 네비게이션 여명이 들어 갈 수 있도록 만들어 주도록
하겠습니다.
이렇게 kx 내비게이션 파월 컬러를 만들어 주고요.
그 다음에 아이디는 bs 의 bgm 프롤
네비게이션 파커 lx2 를 넣어줍니다. 그거 아니 이렇게 다 주시고 이렇게
태그를 달아 줄 수 있도록 합니다. 이제 이 안에는 개별적인 링크가 들어갈
수 있도록 각각의 페이지들을 만들어 줄 건데요.
저같은 경우엔 이제 고딩 부스터 라는거 아내의 뭐 코딩 버스터를 소개하는
페이지 강사들의 소개하는 페이지 강의들을 소개페이지 이런식으로 나눠
가지고 각각의 링크들을 만들어 줄 거에요.
바로 다음과 같이 링크드 리스트를 담을 수 있는 이렇게 유리랑 말 사용해
볼게요.
클래스 내비게이션 다해
이렇게 네이버 라고 해 주시구요. 위치 한번 아내 가 끝에 링크 딜을 넣어
볼게요.
이렇게 액티브 라는 것은 현재 선택이 되어 있던 뜻이에요.
이런식으로 # 을 넣어주시고
소개 라고 만들어 주겠습니다. 즉 현재 선택되어 있는 페이지가 바로 코딩
부스터를 소개하는 페이지
즉 메인 페이지가 되는 거죠 이제 이런 식으로 다 봐줄 수 있도록 합니다.
s 올 일을 넣어주고요 스텐트를 달아 주시구요.
at 를 달아 주시고 이렇게 하나의 리스트가 들어가도록 택을 달아주시면
됩니다. 이제 이런 식으로 소개한 링크가 만들어지고 현재 소개가 이렇게
선택되어 있는 것을 알 수 있습니다.
선택이 되도록 하는 건 이런 식으로 액티브 를 넣음으로써 가능하게 하는
거고요.
다음과 같이 다른 링크 들도 만들어 주도록 하겠습니다.
하나의 원소를 더 만들어 주고요. 이번에는
강사를 소개하는 강사진 이란걸 만들어 주겠습니다. 이렇게 한 다음에 강사진
이렇게 해주시면 강사진이 한 것도 생기겠죠.
그다음 이번에 하나 더 만들어 줄 건데 이번에 만든 건 바로
드랍 다운 이에요 드랍 짜오 는 이제 하나의 링크 를 선택했을 때
아래쪽으로 짝 리스트가 더 나오는 추가적으로 리스트가 나오는 그런 구조를
말하는 건데요 이렇게 한번 만들어 줄게요.
이 안에 다음과 같이 a 태그를 만들어 주시고 이렇게 링크는 샵으로
만들어주신 다음의 클래스로
드랍 다운을 이렇게 만들어 줍니다. 드롭다운 토 우리라고 해주시고요.
2시에 데이트 하토 글은 다음과 같이 드랍 땅을 해주시고
그 다음에 이렇게 역할은 버튼으로 만들어 줍니다.
해외스타 법이라고 해줍니다. 즉 이럴 클릭했을 때 어떠한 리스트가 나오도록
만들어 찍는거구요.
이제 이런 식으로 만들어 줍니다.
이제 이렇게 강 이라고 써 주고요. 이제 이렇게 스 펜 태그를 이용해서 또
추가적으로
하나의 아이콘을 넣어 줍니다 아래쪽 화살표를 의미하는 아이콘 인데요.
이렇게 만들어 준 다음에 택에 달아주시면 됩니다.
그 다음에 이렇게 유에 택에 를 넣어서
줄 압 다운 메뉴를 만들어 줍니다.
그다음 이제 각각 리스트를 만들어 주면 끝이에요.
리스트 를 하나 만들어 주시고 a 태그 이렇게 # 을 가리키도록 하고
그다음 이제 시험 라고 해 줄게요 첫번째 각인 이렇게 시연으로 만들어주고
즉 을 그대로 복사해서 뭐 이제
자바나 이렇게 안드로이드 까지 넣어줄 수 있도록 합니다. 이제 한번
새로고침을 해보시면 이런식으로 나오는 것을 알 수가 있어요.
굉장히 깔끔하죠. 근데 지금 이렇게 강연을 눌렀을때 아래쪽으로 안 내려오는
걸 알 수가 있어요. 리스트가 아래쪽 떠드는데 한번 이유를 찾아 볼게요 를
톡 우리 라는게
이렇게 오타가 있었네요. 그래도 보니까 제가 지 이런식으로 데이터 토굴에
컬러스 d 라고 했는데 이건 그냥 콜렉트 로 바꿔 주셔야 합니다.
자바스크립트를 가져와 될 수 있도록 합니다. 이제 이렇게
먼저 이렇게 공식 사이트에 있는 제이쿼리라는 자바스크립트 템플릿을 가져올 수
있도록 합니다.
이렇게
이건 바로 외부에서 어떠한 스크립트 문장에 가져오게 따는 소리구요.
즉 자바 스크립트를 이제 공식 사이트에서 명식 되고 있는 제이쿼리 라는
자바스크립트 폐를 이렇게 우리 소스코드 안으로 가져오게 딴소리를 하는
거예요.
그다음 이제 이렇게
젤리 수 점 부트스트랩 점 js 이렇게 만들어 줍니다.
이거 같은 경우는 우리 프로젝트 폴더 안에 있는 js 폴더 안에 있는
부트스트랩 점 js 파일 이렇게 가져 오겠다고 한 거구요.
이제 한번 이렇게 저장한 다음에 실행을 해보시면은 이렇게 새로고침을 해
보시면 다음과 같이 이렇게 아래쪽에 나오는 것을 알 수가 있어요. 이렇게
각각의 리스트를 선택할 수 있도록 만들어진 것을 볼 수가 있고
이제 이것 또한 마찬가지로 이렇게 잘 나오는 것을 알 수가 있습니다.
이렇게 간단하게 내력에 전파에 형태를 잡을 수가 있구요.
이제 한번 이렇게 아래쪽에 하나 더 추가해 줄게요 이번에 출발 건 바로
검색창 인데요 이제 일반적으로 만에 사이트 중에서는 하나의 검색창 1
제공해 주죠.
그래서 이런 식으로 검색창 하나만 들어 줄 수 있도록 합니다.
검색할 수 있는 집 어떤 서버를 요청을 전달할 수 있는 그런 태그를 폼
태그 라고 하는데요.
이제 이렇게 폼 태그를 이용해서 한번 검색 창을 만들어 볼게요.
이렇게 div 클래스 폼 그룹이라 만든 다음에
다음을 같이 임프 차에 텍스트로 만들어주시고 클래스는 이렇게 보험 컨
츄라 만들어 줍니다.
그다음 이제 이 플레이스 오더 같은 경우는 어떠한 것도 입력이 안되어
있을 때 사용자 한테 신 틀을 보여주는 구간이라고 할 수 있어요. 바로
다음과 같이 내용을 입력하세요 라고 해주면 되겠죠.
생 자가 검색을 입력하지 않았으니까. 이제 이렇게 내용을 입력하라고
만들어주는 거구요 버튼을 한번 더 만들어 줍니다.
버튼 타입은 이렇게 써 미스로 만들어 주고요 즉시 버튼을 눌렀을 때 이홍
태그 외에 저장된 내용들이 서버로 보내 진단 소리에요.
이제 이런 식으로 만들게요.
그래서 예를 들면 이제 우리가 어떤 검색어를 입력해 가지고 이 버튼을
누르게 됐을 때 이렇게 담긴 내용이 이제
서버로 전달이 되서 써본 이제 그것을 바다가 로 처리한 다음에 검색
결과를 이제 다시 3전 다 알려주는 그런 식으로 구리 되기 때문에 이런
식으로 폼 이란 책을 이용하는 것이랍니다. 이제 이렇게 폼 태그 바깥쪽에
또 하나의 넣어 줄게요.
바비 ul 태그 있네요 이번엔 이제 사용자의 개정과 관련해서
로그인이나 향할 같은걸 처리할 수 있는 내비게이션 바를 만들어 주려고
해요.
이렇게 오른쪽에 정렬이 되어 있는데 102 전파를 만들어 주시구요.
벌어 다음과 같이 각각 원소를 넣어줍니다.
자 이번에도 탑다운 으로 넣어주고요.
이렇게 위에 똑같은게 비슷한 형태로 만들어 줄 거에요.
그냥 귀찮으니까 이걸 그대로 복사 하도록 하겠습니다. 그대로 복사해 가지고
이렇게 넣어준 다음에 아이는 내용은 이제 이렇게 접속하기로 바꿔 주도록
하겠습니다.
그다음 이제 안에 들어가는 요소로써 이렇게 복사를 부착해 주시고요.
이렇게 로그인과 회원가입을 넣어주면 되겠죠.
이런 식으로 한 단 한번 새로고침해 볼게요. 그럼 이제 이렇게 코딩
스타라고 위에 내비게이션 파가 만들어져 있고 각각 이렇게 모든
내비게이션이 만들어졌으면
결과적으로 이제 이렇게 접속하기 버튼 또한 이렇게 로그 현관 나눠 가지고
리스트를 출력하는 것을 알 수 있습니다.
이런식으로 간단하게 내비게이션 바를 만들 수가 있구요.
정말 굉장히 빠르게 이렇게 간단하게 내게 전파를 만들 수 있음을 이해할
수 있구요.
부트스트랩 에서 제공하는 내부 바라는 클래스 즉 구성 요소를 이용해서
이렇게 빠르게 구현할 수 있는 것입니다.
다만 지금 보면 이제 이런 식으로 하얀 색갈이고 굉장히 기본적인 형태의
내비게이션 바가 만들어졌다는 걸 알 수 있어요.
따라서 이제 이제 이렇게 단순히 하얀새 깔기 볼 형태의 내비게이션 바를
자신이 원하는 형태로 색깔을 입히고 커스터마이징 하는 방법에 대해서
알아보려고 합니다 아무튼 이제 이번 시간에 이렇게 네비게이션 바를 어떻게
구원 하는지에 대해서 알아보는 시간을 가졌구요.
이런식으로 드랍 다운가 같이 다양한 태그를 이용해서 예쁘게 내비게이션
바를 꾸미는 방법에 대해서 알아보는 시간을 가졌습니다.

댓글 0개

등록된 댓글이 없습니다.

Total 15건 1 페이지

본 사이트의 컨텐츠는 명시적으로 공유기능을 제공하고 있는 공개된 자료를 수집하여 게시하고 있습니다.

저작권, 강의등록, 광고, 제휴등은 "관리자에게 문의"로 메세지 주시면 확인후 답변드립니다.

Menu