styling using bootstrap

프론트엔드와 백엔드

• front-end: 유저가 보는 쪽
  • javascript, css, html, bootstrap
• back-end: 그 뒤 기능구현, 데이터베이스..
  • .NET, Ruby, PHP, NodeJS, Java, SQL

what is bootstrap

• responsive=> adaptable layout. changes its layout depending where its being displayed
• 이미 정의된 클래스들을 이용하여 편하게 styling 가능

<nav> : div와 비슷한데 navigation bar와 관련된 것.

 

row, col을 사용하여 나눌 수 있음

 

• col
  • 화면 전체를 하나의 column의 width로 사용
  • 하나의 row에 여러 column을 할당함으로써 동일하게 나눌 수 있음
• col-숫자 =>숫자의 범위는 1~12
  • 화면의 몇 퍼센트를 하나의 col이 사용할 지 설정 가능
  • 하나의 row의 전체는 12임. 따라서 col-6을 하게 되면 화면의 절반만 사용하는 column

=>화면의 크기와 상관없이 퍼센트

<div class="row">
    <div class="col" style="background:red; border:1px solid;">
        col
    </div>
    <div class="col" style="background:red; border:1px solid;">
        col
    </div>
</div>

<div class="row">
    <div class="col-2" style="background:green; border:1px solid;">
        col-2
    </div>
</div>

<div class="row">
    <div class="col-md-6" style="background:blue; border:1px solid;">
        col-md-6
    </div>
    <div class="col-md-6" style="background:blue; border:1px solid;">
        col-md-6
    </div>
</div>

• col-md-6 =>화면의 크기에 따라 width 달라짐
  • 화면에서 6/12 사이즈를 각  column이 medium 이상의 사이즈에서 가진다
  • 만약 그 미만의 사이즈이면(스마트폰) column 하나가 전체 width를 차지하는 것!
  • sm (small)/ md (medium)/ lg (large) 세가지 존재

<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6" style="background:yellow; border:1px solid;">
        col-lg-3 col-md-4 col-sm-6
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background:yellow; border:1px solid;">
        col-lg-3 col-md-4 col-sm-6
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background:yellow; border:1px solid;">
        col-lg-3 col-md-4 col-sm-6
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6" style="background:yellow; border:1px solid;">
        col-lg-3 col-md-4 col-sm-6
    </div>
</div>

container

• container : 화면 사이즈(sm/md/lg) 카테고리마다  width 변경(단계적, jumping)
• container-fluid: 화면 width의 100%를 컨테이너의 기본 width로

이런 것들은 bootstrap에 미리 스타일 설정되어 있긴 하지만, 개인적으로 stylesheet에서 변경 가능!

오버라이딩 된다고 생각하면 됨.

Combining selectors

• hierarchical selectors
  • selector1 selector2{ } => selector 1 becomes parent, 2 is from the child
  • 
• Combined selectors => no space between two selectors
  • selector1.selector2 { }
  • selector1#selector2{ }
  • h1#title{ }

h1중에 title이 있다면 두번째(부모-자식x), 어느 div 안에 #title이 있다면(부모-자식o) 첫 번째 방법을 사용

Prioriy

id > class> 다른 것

같은 우선순위라면, 아래쪽에 적힌 게 적용됨

inline style>external css

• 웬만하면 id 보다는 class 사용하기(navigational abillity가 아니라면, 클래스를 우선적으로 생각)
• multiple class 지양하기(충돌 가능성 높음)
• avoid using inline style!!!