Day 058

63001 단어 udemybootstrapbootstrap

Udemy Python Bootcamp Day 058

Bootstrap

Bootstrap is very firmly on the front end. It's a bunch of code that was written to be reusable that you can drop into your site and it'll make designing the web site much easier for you.

CDN stands for Contect Delivery Network, ans the concept is really simple. They've hosted their Bootstrap CSS files on MaxCDN, which has a whole nubmer of routing points across the world. So that means when your users are trying to load up your web site that's using Boorstrap, then it can access it relatively quickly no matter where in the world they are.
When youe browser reaches the link, it'll look for the shortest route to download the CSS file if the user doesn't already have it.

Starter template

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Wireframing

Wireframes are a low fidelity representation of your design. Before you write down any code, you want to be able to get buy in on your designs and be able to iterate through your design process.

https://balsamiq.com/
https://sneakpeekit.com/

Navigation Bar

(부트스트랩이 트위터 기반(?)이어서 primary 색이 파란색이었다...!!)

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="">Tindog</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link" href="">Contact</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">Pricing</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="">Download</a>
        </li>
    </ul>
 </div>
</nav>

https://www.codeply.com/p/GVJU3ipWxP

Grid Layout System

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

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

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

<div class="row">
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
    <div class="col-lg-2 col-md-3"style="background-color:grey; border: 1px solid" >
        col-lg-2 col-md-3
    </div>
</div>

col-lg-2
col-md-3col-sm-6

Container

<div class="container">
  <!-- Content here -->
</div>

<div class="container-fluid">
  ...
</div>

Button

<button type="button" class="btn btn-dark btn-lg"><i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fa-brands fa-google-play"></i> Download</button>


add icons:
https://fontawesome.com/icons?d=gallery&q=apple

Carousel

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>



Card

<div class="card" style="width: 18rem;">
  <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>



Z-index

div {
    border: 1px solid;
    width: 100px;
    height: 100px;
}

.red-box {
    background-color: red;
    position: absolute;
}

.green-box {
    background-color: green;
    top: 20px;
    left: 20px;
    position: relative;
    z-index: 10;
}

.yellow-box {
    background-color: yellow;
    top: 40px;
    left: 40px;
}



CSS

Media Query Breakpoints

@media (max-width: 1028px) {

  #title {
    text-align: center;
  }

  .title-image {
    position: static;
    transform: rotate(0);
  }
}



Combining Selectors

  • Multiple Selectors

    selector1, selector2 {

}

  • Hierarchical Selectors
    Spacing is crucial. and read right to left (e.g. selector2 inside selector1).

    selector1 selector2 {

}

  • Combined Selectors
    all of the selectors have to be within the same HTML element.

selector1selector2 {

}

Selector priority

<h1 id="heading" class="title">Hello World</h1>

The last CSS rule change will be the one that will be carried out. It's reading the code top to bottom.

h1 {
    color: red;
    color: green;
}

A class is more specific thatn an HTML element.

h1 {
    color: red;
}

.title {
    color: yellow;
}

The id has the highest priority of all.

h1 {
    color: red;
}

.title {
    color: yellow;
}

#heading {
    color: blue;
}

Inline style is even higher that the ids and that is overriding all of our external stylesheet.
Avoid inline styles at all costs.

<h1 id="heading" class="title" style="color: orange">Hello World</h1>

Use ids really sparingly, and Recommend to only use it really for those sections and parts of code that definitely need an id.

Code Refactoring

  1. Readability
  2. Modularity
  3. Efficiency
  4. Length

FINAL

https://gist.github.com/awesomekimn/0784ae13ed74460f0b3d6b3d004b0ce6

Webhacking.kr write-up old-1~30
Day7.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage