프로그래밍 학습기록 16~bootstrap 한 단락~
오늘 한 일
어제 연속으로 bootstrap에 대해 배웠습니다.
이하, 파트마다 취한 메모입니다.
79. 그리드 시스템 1
80. 그리드 시스템 2
81. 그리드 시스템 3
82. 그리드 시스템 4
그리드 시스템을 사용하면 화면 크기가 다른 장치에 대해서도 좋은 느낌으로 레이아웃할 수 있습니다.
그리드 시스템에서는 한 줄을 12개로 분할하여 레이아웃할 수 있습니다.
1분이면 col-1(컬럼 1)
2분이라면 col-2
라고 표기합니다.
col은 column(열)의 약어입니다.
한 줄의 col 합계가 12를 초과하면 다음 줄에 걸립니다.
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-3 bg-info">
ぽん
</div>
<div class="col-xs-12 col-sm-6 col-md-3 bg-success">
ぽん
</div>
<div class="col-xs-12 col-sm-6 col-md-3 bg-warning">
ぽん
</div>
<div class="col-xs-12 col-sm-6 col-md-3 bg-danger">
ぽん
</div>
</div>
PC, 태블릿, 스마트폰으로 표시 형식이 바뀌도록 썼습니다.
이렇게 class에 쓰는 것만으로 반응 대응이 가능하므로 grid 시스템은 매우 편리합니다.
83. 실천 : 포토 갤러리 제작 1
사진 갤러리를 만들기 위한 아래 준비를 했습니다.
84. 실천 : 포토 갤러리 제작 2
Unsplash에서 무료 이미지를 사용하는 방법에 대해 설명합니다.
무료 이미지를 무작위로 표시할 수도 있으므로 매우 편리합니다.
이 사이트에 사용법이 자세히 쓰여져 있습니다 ↓
무료 고품질 이미지 사이트 UNSPLASH 및 API 소개 (htps : // 돈쇼쿠. 이 m/우ぇb해서/아보 t-응 spぁsh. HTML)
85. 실천 : 포토 갤러리 제작 3
실제로 이미지를 배치했습니다.
class=“imp-thumbnail”로 이미지에 테두리를 붙일 수 있습니다.
b-◯(◯는 1~5의 숫자)로 margin-bottom을 지정할 수도 있습니다.
또한 Atom에서 Command 키를 누르면서 클릭하면 선택하는 커서를 늘릴 수 있다는 기술도 알았습니다. 이것은 상당히 사용할 수 있다고 생각합니다.
86. 보충：폰트 오삼 공식 사이트에 대해서
폰트 오삼 공식 사이트의 URL이 바뀌었습니다, 라는 이야기가 쓰여 있을 뿐입니다.
87. 실천 : 포토 갤러리 제작 4 폰트 오삼 도입
무료로 아이콘을 사용할 수있는 사이트 fontwesome의 사용법을 학습했습니다.
도입 방법은 살와카씨의 사이트를 알기 쉽습니다.
【저장판】 Font Awesome 사용법 : 웹 아이콘 글꼴을 사용합시다
( h tps://사루와카군. 코 m / html c - s / 바시 c / 후 t - 아우 소메 )
88. 실천 : 포토 갤러리 제작 5 마무리
포토 갤러리 페이지를 완성했습니다.
간단한 것도 자신의 손을 움직여 완성하면 달성감이 나오므로 추천합니다.
할 수 있었던 페이지는 이런 느낌입니다↓
소스 코드(HTML 및 CSS)↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>猫のフォトギャラリー</title>
<meta name="description" content="かわいい猫のフォトギャラリーです。">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/gallery.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a href="gallery.html" class="navbar-brand"><i class="far fa-image mr-1"></i>Cats</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">
<li class="nav-item">
<a href="gallery.html" class="nav-link active">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">New</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="container">
<div class="jumbotron">
<h1><i class="fas fa-camera-retro"></i>フォトギャラリー</h1>
<p>かわいい猫たちのフォトギャラリーをご覧ください。</p>
</div>
<div class="row">
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/C0zDWAPFT9A" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/5GQszN6vyI8" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/egfS7HzgKcc" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/e-S23SJzFqs" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/Hnwm8ktAd6E" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/gb3gq2Nh5xE" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/XKhV1c4oV7c" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/7qau-YIXn90" alt="">
</div>
</div>
<div class="col-lg-4 col-sm-6 mb-3">
<div class="img-thumbnail">
<img src="https://source.unsplash.com/QTe-MHNUrz4" alt="">
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
@charset "UTF-8";
html{
font-size:16px;
}
body{
padding-top:5rem;
font-family:"Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
}
img{
width:100%;
}
css는 이것만 쓰고 있지만, Bootstrap을 사용하여 이러한 화려한 페이지를 만들 수있었습니다.
게다가 반응형 대응하고 있습니다.
이점이 있습니다.
섹션 8Bootstrap4 입문 전체 감상
테크 아카데미의 프런트 엔드 코스에서 bootstrapn을 만져서 알고 있는 내용이 대부분이었습니다.
그러나, 햄버거 메뉴를 만드는 방법이나 이미지의 테두리를 만드는 방법 등은 몰랐기 때문에, 알고 좋았습니다.
Bootstrap을 사용하면 상당히 편하게 페이지를 반응 대응할 수 있으므로, 점점 사용해 가고 싶네요.
특별히 이해할 수 없는 곳은 없었기 때문에, 다음의 섹션으로 진행합니다.
그래서 내일부터 계속 프로그래밍 학습 노력하겠습니다.
끝
Reference
이 문제에 관하여(프로그래밍 학습기록 16~bootstrap 한 단락~), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuta_kinu/items/65cbf2259661c9f4b142텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
