동빈나 부트스트랩 웹 디자인 실전 강좌 8강 - 웹 사이트 확장하기 (Bootstrap Web Design Tutorial #8) > 부트스트랩

Bootstrap

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

동빈나 | 부트스트랩 웹 디자인 실전 강좌 8강 - 웹 사이트 확장하기 (Bootstrap Web Design Tutorial #8)

본문

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

 



지난시간까지 인덱스 점 html 파일을 만들면서 부트스트랩에 사용되는
각종 컴포넌트들을 공부하는 시간을 가졌는데요. 이번 시간에 이제 좀 더
나아가서 웹사이트를 확장하게 될 겁니다. 이제 부트스트랩 으로 몇
디자인을 설계하는 방법에 대해서 알아보려고 하는데요.
강좌에 첫 번째 시간에도 말씀드렸듯이 이 강좌는 웹 개발 초보자가
부트스트랩을 이용해서 당정 웹사이트를 개발하는 것에 초점을 맞추었기
때문에 다소 완존 기본적인 것들은 알려 드리지 못하는 점 죄송하구요.
부트스트랩은 웹 디자인 프레임워크 입니다. 지난 시간까지 부트스트랩 에서
자주 사용되는 몇가지 기능들을 공부하는 시간에 가졌구요.
앞으로도 계속해서 프로젝트를 진행하게 될 겁니다. 다만 이제 여러 개의 웹
페이지 사이에 썰어 안정적으로 링크를 통해서 이동할 수 있고 페이지가
각자 서로 그 조화를 이룰 수 있도록 웹사이트를 적절하게 설계하는 과정을
거쳐 오도록 할 겁니다. 결과적으로 이제 부트스트랩 을 이용해서 웹디자인
어떻게 적절히 꾸밀 수 있는지 그 방법에 대해서 한번 알아보려고 하는데요.
전반적으로 이제 메모 하게 작성을 났던 그냥 샵으로 처리했던
그분들을 이제 실제 링크 로 바꿔서 웹디자인을 설계하도록 하는 것입니다.
자 아무튼간에 이제 프로젝트 완성까지 남은 목차는 다음과 같고요.
이번 시간에 공부하는 건 바로 이 웹사이트 확장하기 부분이고 찌 그
다음으로 테이블 공부하고 2년 군 을 공부하고 리스트 그릇도 공부하고
이렇게 하나씩 공부를 했어요.
결과적으로 이번 ppt 차씨가 끝날 때는 이렇게 웹 디자인 완성까지 한번
해볼 수 있을 거에요. 이제 한번 시작해 보도록 하겠습니다.
이번 시간에 공부할 건 바로 웹사이트 확장하기 인데요.
자 웹사이트를 확장하는 방법은 바로 이 링크로 연결하는 거에요.
10 사이트를 학자가 4 방법은 더 많은 페이지를 만들고 이를 링크를
이용해서 서로 연결하는 것입니다.
먼저 자신의 프로젝트 전반에 사용되는 웹 페이지를 포함해서 모두 만들어 지도록 합니다.
이뭐 자신의 만들었던 모든 a 태그에 주소를 실제로 연결을 해서 각
페이지에 접속할 수 있도록 하는 것이죠.
그다음 이제 웹사이트에 일관성을 유지하면서 전반적으로 웹사이트를 확장할
수 있도록 하는 것이 가장 중요하다고 할수가 있구요.
이제 한번 바로 시작을 해보도록 할게요. 이게 바로 지난 시간까지
작업을 했던 내용인데요.
이렇게 간단하게 인덱스 점 html 발까지 만들어봤어요. 하지만 이제
이렇게 각각의 링크를 눌렀을 때 해당 페이지로 이동을 해야 되는데 현재
그러한 부분이 이루어지지 않았죠.
따라서 이제 웹사이트를 확장하기 위해서 실제로 이제 각각의 페이지에
해당하는 내용들을 html 펠로 구성을 해 주고 서로를 연결해 주면
과정이 필요할 것입니다.
일단 몇 개 홈페이지가 필요한 지 한번 볼까요 코딩 보스턴 페이지는 이제
이렇게 웹페이지가 갖은 기본 페이지이기 때문에 벌리게 소개페이지기 때문에 더
있어 소개 변심에 만들 필요가 없구요.
이제 강사진 페이지가 필요하겠죠. 그다음 이제 강의를 보여주는 페이지 또한
필요 할 거구요.
그 다음에 이렇게 로그인 페이지 회원 갈 페이지까지 각각 필요할 것입니다.
그리고 이제 이걸 눌렀을 때도 마찬가지로 이 강해 페이지로 이동을 하기
때문에 딱히 특별한 페이지를 통해서 만들 필요 났구요.
이걸 눌렀을 때는 일로 가구 이거 넣었을 때 인물가도록 한 번도 만들어
볼게요.
또 추가적으로 이제 sns 같은 경우는 제 개인 sns 계정과 연결 할
필요가 있겠죠.
이제 한번 그런 식으로 각각 홈페이지를 만들 필요가 있는데 방금 죽은
책의 얘기했던 모든 내용을 구성하기 위해서는 총 돼 가지만 있으면 되네요.
강사진 페이지 이강의 페이지 로그인 페이지에 회원가입 페이지 이렇게 총
4가지 만 있으면 적절하게 구현이 가능할 것 같습니다.
따라서 이제 바로 서브 렘 테스트를 실행한 지 왜 한계를 더 파일을
만들어 줍니다.
그 다음에 이제 인덱스 점 h10 의 파일을 수정한 이후에 그 내용들이
온 보시면 되겠죠.
이제 한번 이렇게 컨트롤 f 를 눌러서 샵을 한번 찾아보도록 하겠습니다.
이렇게 # 뜰을 각각 바꿀 필요가 있겠죠. 그러나 이 디카 피니까 바꾸실
필요가 없구요 발언입니다. 코딩 부스터를 눌렀을 때 코딩 포스터
즉 여유 를 눌렀을 때 나와야 되는 화면은 가장 기본적인 펴지기 때문에
즉 인덱스 점 htm 파일로 이렇게 넣어줄 수 있도록 합니다.
소개 또한 마찬가지로 인데 시점에 슈트의 바 일이구요 이제 강사진은
눌렀을 때는 어떤 페이지로 연결이 되야 될까요?
저는 그냥 이렇게 이름을 이런식으로 인스트럭터 라고
하겠습니다.
이렇게 인스트럭터 였죠 html 으려고 이렇게 만들어 주시구요.
그다음 이제 각각 c언어 자바 안들어도 눌렀을때 페이지로 이동하도록
만들어 줄까요.
이제 번은 강의 페이지기 때문에 이름은 간단하게 그냥 매처럼 하겠습니다
let's 점 html 이라 한 다음에 이제 이렇게 각각의 강의 를 연발
해 달라는 의미에서 이렇게 왜 녀 변수를 써도 쪽으로 같이 보낼 수
있도록 한번 해 주겠습니다.
이렇게 let's 네임은 씨다 라고 이렇게 보내 줄게요.
이제 이걸 그대로 복사해서 잡아라 안들었던 마찬가지로 넣어 주겠습니다
자반 이렇게 넣어주고 안 돌렸던 마찬가지로 이렇게 안드로이드 라고 넣어
주겠습니다.
이렇게 각각 맥 철암 은 html 문서로 이동할 수 있도록 해준다고
이렇게 각각의 매개변수 록 시 나 자바 안드로이드 이런식으로 각각의
어떠한 변수를 보낼 수 있도록 만들어준 거구요.
이제 한번 또 넘어와서 이 아래쪽에 로브가 회원가입 떠 마찬가지로 만들어
줘야겠죠.
로그 무전 이런식으로 로맨 폼 점 html 이라고 만들어 줄게요.
그 다음에 회원가입도 와 마찬가지로 레지스터 쏜 점 html 다 이렇게
만들어 주겠습니다.
이렇게 각각 페이지로 연결 할 수 있도록 만들어 주시구요. 고딩 포스터
소개 강사진 이런식으로 각각 눌렀을때 어디론가 이동할 수 있게 되는
거예요.
한번 강사진 페이지로 이동하도록 눌러 볼게요. 그런데 이런 식으로 찾을 수
없다 는 메시지가 나오는데요.
이건 이제 보시는
스트라이프 쯤에 시스템에 파일이 이제 아직 만들어 주지 않았기 때문에
이렇게 파일이 없기 때문에 해당 메모 서 를 불러올 수 없다고 나오는
것을 알 수 있습니다.
이런식으로 나머지도 다 각각 해 줄게요. 더 내려와서 자 강의 들으러 가기
또한 마찬가지죠 강연 페이지를 이용할 수 있도록 해줘야 겠죠. 그래서
이렇게
랫 철 좀 html 파일로 이동할 수 있도록 만들어 주시구요. 그 다음에
이렇게 폭넓은 강사진은 눌렀을 때는 인스트럭터 홈페이지로 이동시켜 주면
되겠죠. 그 다음에 이제 핵심적인 강의 를 눌렀을 때 또 강에 페이지를
이동할 수 있도록 이렇게 만들어 줄 수 있는 것입니다.
이렇게 내려와서 시원을 강의이미지는 눌렀을 때는 이렇게 위쪽에 있는
시원을 강의 홈 포즈를 이동할 수 있도록 이렇게 매칭 시켜 주면 되겠죠.
즉 이렇게 시원한 강변 폐지 둘러 쓸 때 이런 식으로
시오 로페즈 일어날 수 있도록 해주고 여기 또한 마찬가지로
강의 제목은 눌렀을때 이동할 수 있도록 해줍니다. 그 다음에 내려와 가지고
마찬가지로 이렇게 잡아 또 잡아로 바꿔주시고 이렇게 닿아 각각
넣어줄 수 있도록 합니다.
이런식으로 다 넣어 줄게요.
이렇게 주게 되면 저장을 한 다음에 소르고 춤을 했을 때 이런 식으로
강의 를 눌렀을 때 이렇게 또 된걸 이동하게 되는 것을 알 수가 있어요.
보시면 이제 이렇게 잡아 눌러 키 때문에 렉쳐 점 htm 홈페이지에 애초
내밀한 은 매개변수로 차 바라는 갚을 보냈다. 고 이렇게 나와 있는 것을
알 수가 있어요.
집 렉쳐 점 html 팔며 이동하게 따 이런 뜻이구요. 이제 또 바꿔
줄게요.
이제 얼마 안남았네요. 이제 이렇게 소개 페이지는
인덱스 점에 지태 내리고 요 강 사진같은 경우는 아까도 말씀드렸듯이 s
트럭도 점 html 이고 강의 페이지는 이제 랩쳐 점에 시트에 애니죠.
이런식으로 각각 넣어줄 수 있도록 하고 이제 페이스북이나 유튜브 네이버
같은 경우는 이제 이렇게 가까이 1x 러스 속성 에다가 자신의 sns
주소를 넣으시면 되겠죠.
이제 한번 저는 제게 sns 주소를 한번 더 보도록 할게요.
4 전에 이제 이런 식으로 한번 각각의 sns 링크를 이렇게 한번 넣어
보았구요.
이 양을 아래쪽으로 내려 5시에는 아무것도 남지 않았죠 이제 한마디로
이렇게 성공적으로 모든 링크 부분에 이렇게 넣을 준 것이 됩니다 이제 뭐
테스트를 해볼게요.
이렇게 한번 새로고침 해 보신 다음에 가끔 눌러서 이렇게 정상적으로
이동이 이루어지는 지 확인을 할 수가 있구요.
이렇게 다 체크를 하나씩 해볼게요.
이런식으로 체크를 해서 정상적으로 작동하는지 어디 말해 주시면 됩니다.
자 이제 이렇게 파일이 없다고 나오는데 정상적인 거구요.
이제 한번 하나씩 실제로 파일을 만들어 주면 이제 완벽하게 작동할 겁니다.
이자만 각각의 페이지를 만들어 줄게요.
이렇게 새로운 쌀 하나 만들어 주시구요. 이렇게 만들어 졌으며는
이렇게 인도 시점에 시티에 파일이 널 그대로다 복사한 다음에 부천
익혀줍니다. 그다음 이제 이렇게 이 프 트 부분 위쪽부터 전부 다 없애
주도록 합니다.
어디까지 없앤다면 로그인 회원가입까지 집 내부 미션까지 이렇게 없어지면
됩니다.
즉 내비게이션과 이렇게 부터 분만 남도록 만들어 주시면 되구요.
이렇게 스타 렉돌 없어 주도록 합니다 왜냐하면 전부 트론 같은 경우는
인덱스 점 html 파일에서 마 사용되는 것이기 때문에 다른 페이지
아래서 사용되지 않기 때문에 이렇게 그냥 삭제를 해서 없앨 수 있도록
합니다.
그 다음에 이제 아래쪽으로 내려와서 이 모델 또한 없애 줘야겠죠. 이
모델 참 같은 경우도 인덱스 점 html 파일 안에서만 사용해 들었던
하나의 코딩 스터의 특징에 대한 보다 이었기 때문에 이제 이렇게 이것
또한 지워줄 수 있도록 합니다.
그럼 이제 이렇게 딱 홈페이지에 트리라고 할 수 있는 이 내비게이션
부분이 가 애프터 부분만 이렇게 만들어져 있는 것을 알 수가 있고요.
이렇게 각각의 링크 또한 이렇게 다 위치가 되어 있기 때문에 이렇게
안정적으로 트리 갖췄다고 할 수 있는 것입니다. 이 잠언 이거를 조장을
해줄게요 가장 먼저 강사진은 인스트럭터 점
html5 이렇게 한번 조장을 해 주도록 하겠습니다.
이제 한번 다루고 침을 한 다음에 이 가사 참 버튼을 눌렀을 때 이렇게
가 사진 홈페이지로 이동하는 것을 알 수가 있어요. 다만 이 이렇게 안의
내용은 없지만 이렇게 정상적으로 트리 출력이 되는 것을 알 수가 있습니다.
이제 이렇게 2강 사진에는 홈페이지 인스트럭터 점 html 파일을 이렇게
만들어 줌으로써 수 시간에 이렇게 연결이 깔끔하게 이루어진 것을 알수가
있구요.
이제 이어 가지고 남은 강의 랑 접속하기 또한 만들어 주시면 됩니다.
이제 한번 인스트럭터 를 크도록 복사해서 만들어 주면 되겠죠.
이렇게 랙 철학을 만들어 주겠습니다 그 다음에 하나 더 추가해서 이렇게
로그온 색상과 레지스트 분까지 이렇게 만들어 줄 수 있도록 합니다.
이제 이렇게 만들어 주시면 은총 우리 프로젝트 필요한 5가지 가 이렇게
다 만들어 졌다고 할 수 있는거구요 이제 한번 이제 이렇게 하나씩 들어
가서 테스트를 해 볼 수가 있습니다.
자 이렇게 nds 점 htm 파일 안에서 아무거나 자기가 원하는 버튼을
눌러서 이렇게 이동을 했을 때 정상적으로 모두다 오리 없이 나오는 것을
알 수가 있고요. 물론 지금은 이제 이렇게 소개페이지 말고 다른 부분들은
그의 안 된것을 알 수 있지만 이렇다 차 타 하나씩 구원을 해 보면서
공부를 해보면 하나의 완성된 홈페이지를 만들 수가 있는 거죠. 아무튼
이번 시간엔 이렇게 어떻게 웹사이트를 확장하고
링크를 각각 연결해서 이렇게 페이지별로 이동할 수 있는지 그 방법에
대해서 한번 예 보는 시간을 가졌습니다.
이제 이런 식으로 각각의 기본적인 웹 사이트 틀에 갖춰져 있기 때문에
이제 안에 내 얼마 채우는 방식으로 구현을 하면 될 것 같습니다.
이번 시간은 이렇게 웹사이트에 확장에 대해서 알아보는 시간을 가졌습니다.

댓글 0개

등록된 댓글이 없습니다.

Total 15건 1 페이지

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

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

Menu