'bootstrap'에 해당되는 글 5건

제목 날짜

Bootstrap 정리

bootstrap/시작하기 2019. 4. 1. 20:17

부트스트랩 이란 :  이미 만들어져 있는 css를 갖다 써서 코딩양을 줄이기 위해 만들어진 프레임워크

 

 

프레임워크 란:  코드 재사용이 가능하게끔 기능들을 제공하는것

 

 

부스트랩 사용법:

cdn 방식:  url이 가리키는 서버에 있는 내용을 참조해 가져다 쓰는것 

 

stylesheet: 외부 스타일시트를 참조  

scripts: 이벤트에 따른 결과물을 새로고침없이 보여주는 기능제공

 

<link rel ="stylesheet"  .... >

<script> ....</script>


<script>를 만나게 되면 렌더링(로딩)을 멈추고 스크립트를 다 읽고 나서 진행되기 때문에 느려짐 그래서 맨 아래에 

커스텀 css:   내부스타일 시트 / 외부스타일 시트

 

 

선택자:   class . id #

 

네비게이션 바, 점보트론, 카드, 그리드

 

 

반응형 웹:  해상도나 화면 크기에 맞춰 웹페이지 모양이 자동으로 보기 좋게 변환되는것

 

 

실습:

https://kr.123rf.com/photo_31754109_%ED%8C%8C%EB%9E%80%EC%83%89-%EB%B0%B0%EA%B2%BD-%EA%B2%80%EC%A0%95-%ED%85%8C%EB%91%90%EB%A6%AC-%EB%A9%8B%EC%A7%84-%ED%8C%8C%EB%9E%80%EC%83%89-%EB%B0%B0%EA%B2%BD-%EC%B1%85-%ED%91%9C%EC%A7%80-%EB%B9%88%ED%8B%B0%EC%A7%80-%EA%B7%B8%EB%9F%B0-%EC%A7%80-%EB%B0%B0%EA%B2%BD-%EC%A7%88%EA%B0%90.html

불러오는 중입니다...

https://blog.fotolia.com/kr/2017/07/24/%EC%82%AC%EB%9E%91%EC%8A%A4%EB%9F%AC%EC%9A%B4-%EB%B0%98%EB%A0%A4%EA%B2%AC-%EA%B0%95%EC%95%84%EC%A7%80/

불러오는 중입니다...

http://blog.daum.net/_blog/BlogTypeView.do?blogid=0ar4S&articleno=6

불러오는 중입니다...

 

저작자표시 비영리

'bootstrap > 시작하기' 카테고리의 다른 글

card  (0) 2019.03.26
[튜토리얼] 그리드[grid]  (0) 2019.01.03
[ 튜토리얼 ] 점보트론[jumbotron] 만들기  (0) 2019.01.01
Posted by FlaSh..

card

bootstrap/시작하기 2019. 3. 26. 14:03


card


https://getbootstrap.com/docs/4.3/components/card/



카드: 여러 정보를 간략하게 보여주는 컴포넌트



<div class="card" style="width: 18rem; display: inline-block;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>






이미지 적용:

<img src="..." class="card-img-top" alt="...">





적용된 모습:






저작자표시 비영리

'bootstrap > 시작하기' 카테고리의 다른 글

Bootstrap 정리  (0) 2019.04.01
[튜토리얼] 그리드[grid]  (0) 2019.01.03
[ 튜토리얼 ] 점보트론[jumbotron] 만들기  (0) 2019.01.01
Posted by FlaSh..

[ 응용] 템플릿 사용하기

bootstrap 2019. 3. 26. 11:54

[ 응용] 템플릿 사용하기



Bootstrap는 널리 사용되는 front-end framework입니다. 


반응형 웹디자인을 기본으로 하고 있고, 폼 디자인, 메뉴바, 드롭다운 등 자주 사용되지만 손이 많이 가는 요소들의 디자인과 기능을 포함하고 있어 쉽게 사이트를 제작할 수 있습니다.


하지만, Bootstrap 기본 모양을 사용하면 모든 사이트가 같은 디자인이 된다는 단점이 있습니다. 그래서 어느 정도 수정을 해야 차별화된 모습을 갖출 수 있습니다.


그런 수정 작업이 번거롭다면, 또는 그런 작업을 할 수 있는 인력이 없다면 Bootstrap 무료 템플릿을 이용하여 디자인을 바꾸는 방법이 있습니다.


Bootstrap 기반이 아니라고 생각할 정도로 확연히 다른 모습은 아니지만, 어느 정도 특색있는 디자인으로 바꿀 수 있습니다.


발췌 : https://www.cmsfactory.net/node/10674


지금부터 Bootstrap 무료 템플릿을 이용하여 템플릿 사용법을 익혀보도록 하겠습니다.

(무료 템플릿 사이트로 이동 https://startbootstrap.com/)




 해당 사이트로 들어와 스크롤을 내려보시면
여러개의 템플릿이 있는것을 보실 수 있습니다.




그중에서 아래 사진처럼 표시되어 있는 템플릿을 선택해 줍니다.



해당 템플릿 화면을 마우스로 클릭하여 

결과물을 확인도 가능합니다.



다시 해당 템플릿 메인화면으로 돌아와서 

우측에 Free Download 버튼을 클릭해 주세요.



새로운 프로젝트(새폴더)를 만들어서 그안에 압축풀기를 해줍니다!



그 다음 VSCODE로 돌아가셔서
폴더열기(open folder) 기능을 통해
방금 생성한 폴더를 열어줍니다.



다음과 같이 화면이 나오신다면! 실습준비 완료 : ) 


VSCODE 왼쪽 창에서 압축해제된 결가로 나온 폴더가 있습니다.

그 폴더를 열어보겠습니다.


index.html 파일을 찾아서 화면을 켜줍니다.

화면을 보시면, 저희가 여태까지 해왔던 

HTML개발과정과 같습니다.


이 부분에서 원하시는 내용을 추가하고, 삭제하면서 

html파일을 수정해주시면 됩니다.


CSS는 어떻게 수정하나요?

다음의 사진처럼 custom.css 파일을 만들어서

index.html의 <head></head> 사이에

외부참조로 연결해서 사용하시면 됩니다!



저작자표시 비영리
Posted by Kim_gorilla

[튜토리얼] 그리드[grid]

bootstrap/시작하기 2019. 1. 3. 15:24

그리드[grid]



그리드: 

화면크기 변화에 맞춰 컴포넌트의 비율이 그대로 유지되게 보여주는 기능을 합니다. 그리고 화면크기의 기준을 정한것에 따라 자동으로 세로배열이 되도록 해주는 기능을 제공합니다.



사용방법:
● div container class:
   container는 화면크기에 따라 div 가로길이를 자동으로 지정해주는 기능을 가지고 있습니다
   container가 없으면 div의 가로길이가 정해지지 않았기 때문에 그리드기능이 적용이 안됩니다.
● div "row" class :
   row는 열을 의미합니다 row 하나당 1줄입니다. 여러개의 row를 사용하면 여러줄을 만들 수 있습니다.

 <div class="container">
  <div class="row">
    ...
  </div>
</div>








■ 그리드 옵션: 
디바이스 화면 크기에 맞게 그리드의 크기가 자동으로 조절 되면서 세로배열이 자동으로 됩니다.
옵션은 xs sm md lg 4가지가 있습니다.
각 옵션은 화면의 가로길이가 일정 px 미만/이하일때 그리드를 세로배열을 해줍니다.





■ 그리드 생성: 

그리드는 한 줄을  12등분하여 사용합니다. 따라서 col -1은 1/12 크기의 그리드를 의미하며 col-6은 6/12 크기의 그리드를 의미합니다.

** 단 col-1이 12개가 되면 를 넘어 갈경우 자동 줄바꿈이 됩니다 **


<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>


<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>


결과: 


<div class="row">
  <div class="col-xs-6">style="background-color: yellow;">잘가</div>
  <div class="col-xs-6">style="background-color: yellow;">그래</div> 

</div> 




화면의 크기가 변했을 때의 레이아웃:

XS 옵션을 사용하면 아래의 그리드와 같이(노란색) 화면의 크기가 변해도 세로배열이 되지 않습니다.



응용예시: 

4가지 옵션중 여러개를 중복해서 사용이 가능합니다.

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- 컬럼들은 모바일과 데스크탑에서 항상 50% 너비가 됩니다 -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div> 

</div> 



■ 그리드 개행:

한 그리드 내에서 길이가 12를 넘어가면 자동 줄바꿈이 됩니다.




■ 반응형 컬럼 초기화:   


Q: 반응형 칼럼이란?

A: 화면크기에 따라 그리드가 세로 배열될때 그리드의 크기에 맞춰서 배열되는 것


 <div class="clearfix visible-xs-block"></div> 

(왼쪽 그림에서 1시 칼럼과 7시 칼럼 사이에 위의 코드를 삽입하면 오른쪽 처럼 배열된다)


그리드가 한줄에 2개씩 배열 되어야하지만 그리드의 크기가 작아 바로 아래에 다음 그리드가 오는 현상이 생김!! (노랑)

반응형 칼럼 초기화를 해서 수정된 결과 (초록)

            
    


                                                          



■ 미디어 쿼리:


화면크기에 따라 컴포넌트의 크기를 제한하고 조절 할수 있게 도와준다.

min-width / max-width 를 지정하고 그 범위 내에서 css를 적용하면 된다.





저작자표시 비영리

'bootstrap > 시작하기' 카테고리의 다른 글

Bootstrap 정리  (0) 2019.04.01
card  (0) 2019.03.26
[ 튜토리얼 ] 점보트론[jumbotron] 만들기  (0) 2019.01.01
Posted by FlaSh..

[ 튜토리얼 ] 점보트론[jumbotron] 만들기

bootstrap/시작하기 2019. 1. 1. 18:13


점보트론[jumbotron]: 


점보트론은 특색있는 내용이나 특별히 관심을 불러 일으킬 수있는 

간단한 정보를 눈에 띄게 보여주는 박스라고 할 수 있습니다.

부트스트랩에서 제공하는 여러 기능이 있는데 어떻게 사용할까요?


답은 부트스트랩 홈페이지에 나와있습니다.


http://bootstrapk.com/


접속하고 보면 상단에 css 콤포넌트 가 있습니다. 



콤포넌트로 들어가서 우측 사이드바에서 점보트론을 클릭합니다.


그러면 아래와같이 코드가 나와있는 박스 두개가 보일겁니다.


그 위에는 example 하고 그림이 나와있죠


아래에 있는 코드를 그대로 붙여넣기 하면 위에있는 example처럼 점보트론이 나타나게 됩니다.


여기서 점보트론의 색이나 모양을 바꾸고 싶다면 선택자를 사용하면 됩니다.






그럼 사용법을 알았으니 직접 해봅시다.




일단 한글을 사용하기 위해서 charset=UFT-8로 해주고


<meta name="viewport" 를 사용하게되면 반응형 웹을 구현 할 수 있는데


컨텐츠는 각 디바이스의 화면크기를 고려 해서 보여주겠다: content="width = device-width"  


마지막으로 초기비율은 1로 설정하겠다:  initial- scale="1"> 이렇게하면 됩니다.





<link rel="stylesheet" href="css/bootstrap.css">


에서 stylesheet가 중요한데 stylesheet 는 외부에서 제공하는 css 를 가져다 쓴다는 뜻입니다.


그리고 다운받은 css 파일이 있는 경로를 href 로 설정해주면 됩니다.  css 폴더안의 bootstrap.css 를 사용하기 때문에 그에 맞게 경로를 입력해주면 됩니다.


<div class ="container"는 반응형으로 사용할 내용들을 둘러싸는 그릇이라고 생각하면 되고 


아래와같이 작성해 봅시다.









<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>



실행








반응형웹도 고려했기 때문에 아래와같이 브라우저의 크기를 조절하면 화면이 잘리지 않고 비율이 잘 맞게 나오는걸 볼 수 있습니다.







그리고 저번에 커스터마이징을 언급 했던적이 있죠 


뭐 커스터마이징이라고 하기엔 그렇지만 간단하게 버튼의 색을 바꿔보겠습니다.




style 태그 안에 버튼의 배경색을 검정으로 바꾸면 적용되는걸 볼 수 있습니다. 




점보트론 배경이미지:

.jumbotron{
background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
background-size: 100%;
}


저작자표시 비영리

'bootstrap > 시작하기' 카테고리의 다른 글

Bootstrap 정리  (0) 2019.04.01
card  (0) 2019.03.26
[튜토리얼] 그리드[grid]  (0) 2019.01.03
Posted by FlaSh..

티스토리툴바