동빈나 부트스트랩 웹 디자인 실전 강좌 5강 - 푸터 (Bootstrap Web Design Tutorial #5) > 부트스트랩

 

이제 웹사이트에서 꼬리말 역할을 하는게 바로 부터 이구요. 자신의 생 까지
이렇게 외부 스타일시트 까지 공부를 해서 내비게이션 밖까지 만들어
봤잖아요. 이제 이런 내비게이션 바 같은 경우는 웹문서 에 가장 위쪽에
존재한다고 했다면 이제 부터 같은 용어는 가장 아래쪽에 존재하는 요소라고
할 수 있습니다.
자 이제부터 에 대해서 자세하게 알아볼 건데요. 이제부터 같은 경우는
홈페이지에 기타 정보를 담는 요소라고 할 수가 있어요.
이제 애프터 라인 태그를 이용해서 애프터를 만들 수가 있는데요. 이런 부터
같은 경우는 홈페이지 기타 정부를 보여주는 역할을 수행한다고 말씀드려 썼고
일반적으로 홈페이지에 가장 아래쪽에 위치하고 저작권 개발자 네비게이션
등의 포함하는 요소라고 할 수 있습니다.
자 이제 한번 바로 실습을 해 보면서 이해를 해 보도록 할게요. 이렇게
한번 지난 시간까지 작업을 했던 내용을 한번 보도록 하겠습니다.
이렇게 지난 시간까지 네비게이션 밖까지 작업을 했었는데요.
이제 아래쪽에 이렇게 포터가 들어가면 되는 건데요 자바로 이제 서버 램
패스트리 실행해서 인덱스 점 html 파일을 한 번 바꿔 보도록
하겠습니다.
자바로 다음과 같이 가장 아래쪽에 이 스크립트 위쪽에 넣어 주도록 합니다.
이렇게 후 터 라고 만들어 주시구요.
그다음 이렇게 스타일 한 다음에 백그라운드 칼라를 이렇게
검색어를 만들어 주도록 합니다. 왜냐하면 지금 내비게이션 바 같은 경우도
검은 색깔 배경을 가지고 있기 때문에
부터 또한 마찬가지로 맞춰주는 거구요. 이렇게 그 시 색깔은 하얀 색깔로
보여줄 수 있도록 합니다.
이렇게 다 주시고요. 이렇게 부터 태그 안에 뭐가 들어가 내느냐 먼저
이렇게
컨테이너가 들어갑니다.
달아 주시구요 이렇게 비할 태그를 넣어서 해줄 줄 바꿈 해줄 수 있도록
하구요. 이제 이렇게 gi 를 클래스를 로 라고 해 주시고
달아줍니다. 이렇게 안쪽에 div 을 클래스
컬 s12 를 넣어 주는데요.
이게 어떤 의미를 가지고 있냐는 요 먼저 이렇게
해주신 후에 이제 하나의 줄 같은 경우는 내부적으로 열을 쪼 될 수 가
있는데요.
칫 한 줄의 여러개 열이 들어갈 수 있도록 나도 가지고 이렇게 구성을 할
수가 있어요.
바로 다음과 같이 이렇게 달아 주신 다음에 이 안쪽에 h5 라고 해서
조금 큰 글씨로 넣어줄 수 있도록 합니다 그 다음 이렇게 카피로 아이즈
이렇게 카피를 넣어주시구요.
카피 키오 다음에 이렇게 2017 넣어줍니다.
이렇게 달아 주신 다음에 하나 더 만들어서 이번에는 각자의 이름
이렇게 넣어줄 수 있도록 합니다. 더 이렇게 제이름 넣어줄 거구요.
이런식으로 만들어질 수가 있어요. 이렇게 한 다음에 한번 실행을 해보시면
은 다음과 같이 이렇게나 동빈 이라고 나오는 것을 알 수가 있는데요.
지금 보시면은 콜 sm-2 일단 이렇게 나옵니다.
그렇다면 한번 이거 한번 12번 바꿔 볼까요. 그럼 이렇게 나오는 걸 알
수가 있어
한마디로 참 중앙에 나오죠. 너 같은 경우는 내부적으로 2 콜 sm 시비가
들어갈 만큼의 공간을 가지고 있어요.
즉 이렇게 이만 써준다 내는 왼쪽에 11월 일어나는 것 집 6분의 1
만큼만 이렇게 왼쪽에 자리를 차지하게 되는 거죠.
이렇게 일어 했을 때 이런 식으로 나오는 거고요. 이렇게 나눠주는 지오는
각각 공간을 나눠 가지고 다른 정보를 담을 수 있게 하기 위해서요
다음과 같이 한번 해볼게요.
하나도 만들어주는 거죠 자 did 클래스 만든 다음에 이제는 4 만큼
12 중에서 4 만큼 차지할 수 있도록 게 만들어 주고요.
다 봐 주신 후에 로 달아줍니다. 램 2g 안쪽에 이렇게 대표자 소개하고
넣으시면 됩니다. 그 다음에 이제 이렇게 p 태그를 이용해서
어떠한 설명을 넣어 줄 수 있도록 합니다. 대표자를 이제 이렇게 어떤 한
문장으로 한 문단으로 설명할 수 있도록 p 태그로 넣어 주는 거죠 저는
코딩 스타일 대표나 동빈 입니다 라 감 넣어 줄게요.
한국교원대학교해서 공부 중이며
공부를 하고 있으며 웹 개발을 의심이 많습니다.
이렇게 한번 넣어 주도록 하겠습니다. 이제 한번 새로고침 안해보신 여는
바로 다음과 같이 이렇게 카피라이트 나 동빈 나온 다음에 그 오른쪽에는
예보다 약 2도 정도 더 친 길이로 이렇게 해태 글자 소개가 들어가는
것을 알수가 있습니다.
그 다음에 다음과 같이 해 줄게요 1 터 만들어 주는 거에요. gi 클래스
한다. 이번에는
이정도 전반적으로 닥쳤을 때 총 시비가 숫자가 될 수 있도록 만들어 주는
겁니다.
이런식으로 다음으로 들어갈 것은
이렇게 가운데 정렬로 만든
네비게이션 n2 랑 단 하구요 이렇게 만든 다음에 리스트 그룹을 만들 수
있도록 합니다.
이렇게 gl 클래스 한 다음에 리스트 그룹을 만들어 주시구요.
즉 각각의 리스트가 들어갈 수 있도록 하는 되는 거죠 at 를 하나
만들어 주고요.
이렇게 소개 라고 넣어주고 아까 저는 위에서 내비게이션에서 만들었던 것과
똑같이 소개
강의사진 강의 이렇게 3가지로 내리기 전 똑같이 만들어 주시면 되는
겁니다.
이렇게 만들어 주시고요. 그대로 복사해서 붙혀넣기 해줄게요.
두번째 꺼는 강사진이 고 세 번째 것은 간이 줘
이렇게 한 다음에 제 배틀을 달아주시면 됩니다. 이렇게 만들어 주신 다음에
하나 달아주시면 이제 이렇게 완벽하게 네비게이션이 구축이 되겠죠.
이제 한번 새로고침 해 볼게요. 그럼 이런식으로 나오는 것을 알 수가
있어요.
생각보다 되게 깔끔하게 잘 나오죠 그다음 이제 하나 더 만들어 줄 거야.
div 클래스 한 다음에 콜라 이스 엔트리 똑같이 만들어 줍니다. 그래서
이걸 그대로 복사 해 줄게요.
네비게이션 그대로 복사한 다음에 붙여 넣기 해서
이름만 그냥 sns 로 바꿔 주겠습니다. 그다음 이제 이렇게 페이스북
유튜브 네이버 티비 이런식으로 한번 바꿔 줄게요. 뭐 이제 이런 식으로
어떠한 그 위치가 들어간다는 이렇게 a 태그를 따라서 이동할 수 있는건데
일단 기본적으로 지금은 이렇게 다 샵으로 넣어 주도록 할게요. 저는 낮은
이제 다 홈페이지에 구축이 되면 그 다음에 이제 이런 식으로 어떤 주소로
넣을 수 있는 건데 지금 일단 이렇게 차 보로 놓도록 하겠습니다.
그다음 이제 한번 더 새로고침 해 보시면 이런 식으로 나오는 것을 알
수가 있어요.
그 다음에 마지막으로 242 다다 2 보시면 실이 줘
즉 아직 일어나 맞습니다. 이제 한번 더 한 가지도 만들어 줄게요 클래스
한 다음에 코레스 길을 만들어 주시고 다음과 같이 h4 정도로 크기로
만들어 주신 다음에 이제 안에 이렇게 스타일로
센터를 만들어 주신 다음에 스 펜 택의 클래스를 넣은 걸 이용해서
클리프 아이콘을 이렇게 넣어줄 수 있도록 합니다.
이제 이거는 ok 싸인 같은 건데요.
이렇게 아이콘 하나 넣어 주신 다음에 다이나 동빈 이라고 해서 이렇게 제
이름을 넣어 줄 수 있도록 합니다.
이제 한번 새로 고친 해 보시면 다음과 같이 이런식으로 글리프 아이콘과
함께 제 이름이 나오는 것을 알 수가 있습니다.
생각보다 되게 깔끔하게 잘 나오죠. 다만 이지 아이콘과 이 글자가 너무
가까이 붙어 있는것 같으니까 좀 뛰어 줄게요.
한칸 띄워줄 땐 이제 이런 식으로 nb sp 를 넣어줍니다.
이제 한번 이렇게 해보시면 은 한 칸 깨져 있는 걸 볼 수가 있죠.
이런식으로 간단하게 아이콘을 활용해서 구현할 수도 있구요.
이렇게 리스트 그룹 을 이용해서 그런 알 수도 있습니다 아무튼 이렇게
간단하게 부터가 완성되었고 생각보다 되게 위에 는 내리기 션과 잘
어울려서
예쁘다는 걸 알 수가 있는데요. 아무튼 지 이렇게 간단하게 아래쪽 에프터
부분까지 한번 만들어 보는 시간을 가졌습니다.
숱한 건 이제 이런 식으로 홈페이지에 기타정보 같은걸 담는 하나의 공간을
만들어 주는 걸 알 수가 있는 건데요.
네비게이션 바 처럼 2부터 부분 또한 마찬가지로 홈페이지 어떤 부분이든
간에 항상 나오는 부분이라고 할 수가 있어요. 아무튼 이제 이렇게 부터
부분은 그런 함으로써 홈페이지기타 정보를 효과적으로 표현하는 방법에
대해서 공부해 보는 시간을 가졌습니다.
이렇게 간단하게 홈페이지에 반드시 필요한 네비게이션 그 다음에 전부터
롬을 포함한 이렇게 메인 영역이 랑 마지막으로 부터까지 이렇게 구현이
된 것을 볼 수가 있습니다.
이렇게 줄어 보더라도 이렇게 반응형 매입으로 자 작동하는 걸 알 수가
있구요.
이렇게 생각보다 되게 괜찮은 웹사이트가 만들어지고 있는 것을 볼 수
있습니다.
아무튼 이번 시간은 이렇게 부터 에 대해서 공부해 보는 시간을
가져보았습니다.