동빈나 부트스트랩 웹 디자인 실전 강좌 2강 - 점보트론 (Bootstrap Web Design Tutorial #2) > 부트스트랩

 

지난 시간에는 이렇게 부트스트랩이 어떤건지 소개를 하고 부트스트랩을
이용해서 개발 환경을 구축한 이후에 헬로 월드까지 출력해 보는 시간에
가졌는데요. 이번 시간은 이제 점보 트론 이란걸 한번 공부해 볼 거에요.
점보 털의 뭐냐면은 하나의 컴포넌트 인데요. 이 부트스트랩이 제공해주는
컴포넌트라고 할 수 있는데요.
홈페이지를 소개할 때 사용하는 컴퍼넌트 입니다.
일반적으로 이제 부트스트랩으로 만든 홈페이지에 접속했을 때 가장 첫번째
화면에 보여지는 그러한 구성 요소를 전부 들어온 이라고 하는데요.
일반적으로 점보트로엔 원래 대형 전광판을 의미하는 단어에요.
하지만 전 보트로 는 이제 부트스트랩 에서는 홈페이지를 소개하는 메인
전광판 2 된다고 생각을 하시면 됩니다.
컴포넌트 중에서 가장 돋보이는 컴퍼넌트 라고 할 수가 있구요.
사용법 또한 굉장히 간단합니다. 또한 점보 토론 아 안에는 버튼 등의
다양한 컴포넌트가 포함될 수 있기 때문에 잘만 사용하면 아주 다양하게
구성할 수 있습니다.
한번 이전 보트를 이용해서 홈페이지를 멋지게 소개할 수 있도록 하겠습니다.
바로 이렇게 지난 시간에 작업했던 인덱스 점 에지 템을 그대로 실행해
주시고요.
만약에 가족이 가 어렵다고 사카시 과실수 내걸지 업 어르신 경우는 이렇게
인디 시점에 주택의 파일을 서버란 테스트 안쪽으로 이 끌어다 오시면
이렇게 추가가 되는 것을 볼 수가 있어요.
아무 데미지 이렇게 한번 코딩을 시작해볼게요.
바로 이렇게 지난 시간에 만들었다 헬로 월드 를 지워 주시고요.
다음 가챠 뭐 해 주겠습니다. 이렇게 div 클래스 한 다음에 컨텐츠를
만들어 주세요.
이 컨테이너는 어떠한 내용을 담을 수 있는 작은 그릇 같은 거라
생각하시면 되요.
어떠한 내용의 담기는 하나의 공감이 되는 거구요. 그 당 이제 이렇게
div 클래스 한 다음에
점보 트론 을 만들어 질 수 있도록 합니다. 이게 바로 점보 토론을 만드는
방법인데요.
바로 이렇게 해 줍니다. h 오늘 넣어 주신 다음에 h1 태그 같은 경우는
굉장히 큰 글씨를 작성할 때 사용하는 태그입니다.
바로 이렇게 클래스 한 다음에 테스트 센터를 해줍니다.
이건 바로 보트 스트렙 안에서 가운데 정렬을 해 주는 하나의 클래스라고
할 수가 있어요. 이렇게 해준 다음에
코딩 부스터 를 소개합니다 해줍니다.
그다음 이제 이렇게 달아 주시구요. 그 다음에 이제 이렇게 피라는 태그
같은 경우는 조금 치인 하나의 문장을 표현할 때 하나의 문단 같은 걸
표현할 때 사용하는 태그이구요.
이렇게 마찬가지로 중간으로 정해 주신 다음에
코딩 부스터 맨 아이치 교육 사이트 입니다.
다양한 it 관련 무료 및 유료 강의가 존재 합니다 라고 이렇게
넣어주시구요.
마지막으로
센터 를 넣어 주시고 이렇게 달아 주신 다음에 이제 이 1의 at 큐가
들어가도록 만들어주세요.

a 태그 같은 경우는 어떠한 다른 주소나 다른 링크로 이동할 수 있도록
만들어주는 앵커란 의미를 가진 태그에요.
아무튼 이런식으로 버튼으로 만들어 주시구요.
프라이머리 버튼으로 이렇게 만들어 줄 수 있도록 합니다.
그다음 이제 가리키는 위치는 집 이제 버튼을 눌렀을 때 이동하는 다른
웹사이트 주선 이렇게 샵을 넣어 줌으로써 아직까지는 정해지지 않았다.
미정이다 이런식으로 알려줄 수 있도록 합니다. 그 다음에 제로 길고 오래
버튼을 넣어서
하나의 버튼 임을 알려 줄 수 있도록 합니다. 그렇게 달아 주신 다음에
암에 다음과 같이 강의 들으러 가기 라고 넣어줄 수 있도록 합니다.
이렇게 해주면 간단하게 점보트 롤을 만들어 준 건데요. 한번 이렇게 컨트롤
s 를 눌러서 저장 해 줄 수 있도록 한 다음에
실행을 해보시면은 바로 다음과 같이 이렇게 점보트 롬이 만들어진 것을
볼 수 있습니다.

이렇게 웹페이지 정충 앙이 홈페이지를 소개하는 글이 나오는 것을 알 수가
있고요.
이제 이걸 이용해서 간단하게 홈페이지를 소개할 수 있는 것입니다.
다만 이제 스타일시트 한걸 한번 사용해 볼 건데요.
스타일시트라고 하는 것은 자신의 작성하고 있는 html 문서의 디자인을
꾸미고자 할 때 사용하는 것으로서 사실 부트스트랩 같은 경우는 기본적으로
스타일 시트를 적절하게 갖추고 있는 프레임워크 라고 할 수가 있어요.
하지만 부트스트랩 이 css 에서 자신만의 독특한 디자인을 만들고 싶다면
따로 취 가족이 스타일 시트를 정의해서 사용할 수가 있어 정확히 어떻게
정의를 하고 사용할 수 있는지 이제부터 설명해 드리려고 합니다.
위쪽에 이 바디 부분에 바로 아래쪽에 다음과 같이 만들어 줄 수 있도록
합니다.
이렇게 스타일을 넣은 다음에 타입의 다가 이렇게 텍스트 css라
넣어줍니다. 이게 바로
어떠한 씨스 코딩을 작성하게 따른 뜻이에요. 이렇게 한 다음에 안에다가
어떠한 디자인 요소를 넣어 주시면 됩니다.
바로 다음과 같이 점보트론
즉 점보 토론 이라는 클래스를 이렇게 정해줄 수 있도록 합니다.
이렇게 지금 만들어진 점보토론이라는 클래스의 어떠한 성질을 덧붙일
있던 뜻인데요 바로 단어가 재질 수 있도록 합니다.
텍스트 섀도 왜 이렇게 블랙 0.22 n
0.22 앰 0.22 밀어 넣어줍니다 em 이란 걸 하나의 픽셀과 같이
어떤 다니구요.
이런식으로 칼라 화이트 를 넣어 줍니다. 이제 한번 새로고침을 해보시면은
이렇게 바뀌어 있는걸 볼수가 있어요.
근데 지금 보면 이렇게 되게 정보 틀어 내 배경이 되게 허전하다고
느낄수가 있어요. 그렇기 때문에 이 배경 이미지를 한번 넣어 보도록
하겠습니다.
바로 이렇게 프로젝트 폴더 안에
이미지 쓰란 포트란 만들어 줄게요. 이미지 스가 우리가 개인 폴더 이름을
만들어 주시고
이제 이 아래 자신의 점보트 롬에 배경으로 사용할 1 이미지를 가져올 수
있도록 합니다.
천 이렇게 jpg 확장자 로 점보 트론 백그라운드라는 이미지를 한번
가져와봤어요. 이제 여기서 다음과 같이 해줄 수 있도록 합니다.
자 백그라운드 이미지란 다음에 이렇게 url 이미지 폴더 안에 있는
점보 틀어 온 백그라운드 점
jpg 를 가져와라 이렇게 만들어 주는 거구요. 바로 다음과 같이 만약에
배경 이미지가 되게 작다고 하며는
작다고 하더라도 이렇게 맞춰줄 수 있도록 사이즈를 커버로 설정해 줄 수
있도록 합니다.
이렇게 해주시면 간단하게 배경 색깔이 패치는 건데요. 한번 저장한 다음에
새로고침 해 보시면은 이렇게 배경 색깔의 들어가 있는 것을 볼 수
있습니다.
생각보다 되게 깔끔한 디자인으로 만들어 졌죠. 이제 이런 식으로 간단하게
스타일 시트를 코드 내부적으로 삽입을 해서 추가적인 어떠한 디자인을 만들
수 있도록 할 수 있습니다.
네 아무튼 이렇게 이번 시간에는 점보 트론 을 이용해서 홈페이지를
소개하는 부분을 이렇게 만드는 방법에 대해서 공부하는 시간을 가졌습니다.
이렇게 점보 토론 각종 버튼이 들어갈 수도 있고 이렇게 내부적으로 배경
이미지가 들어갈 수도 있고 다양한 디자인 처리가 가능하기 때문에 익혀
두면 유용하게 쓸 일이 많은 하나의 디자인 요소입니다.