FrontEnd:レイアウトの設定
ガイドバーを使用してレイアウトを作成してみます.
https://getbootstrap.com/
ここに入ってもちゃんと整理されていて、読んでいて使いやすいです.
これらのレイアウトを任意に描画してレイアウトを作成する練習をしました.
コードは以下の通りです.
https://getbootstrap.com/
ここに入ってもちゃんと整理されていて、読んでいて使いやすいです.
これらのレイアウトを任意に描画してレイアウトを作成する練習をしました.
コードは以下の通りです.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<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-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<title>레이아웃2</title>
</head>
<body>
<div class = "container">
<div class = "row p-3" style="background-color: wheat;">
<div class ="col-4" style="background-color: darkslategray; height: 70px;"></div>
<div class ="col-5"></div>
<div class ="col-3" style="background-color: darkseagreen; height: 35px;"></div>
</div>
<div class = "row p-3" style="background-color: gold; height: 100px;">
</div>
<div class ="row p-2" style="background-color: lemonchiffon;">
<div class ="col-4">
<div style="background-color: hotpink; height: 200px;"></div>
</div>
<div class ="col-4">
<div style="background-color: hotpink; height: 200px;"></div>
</div>
<div class ="col-4">
<div style="background-color: hotpink; height: 200px;"></div>
</div>
</div>
<div class ="row p-3" style="background-color: khaki;">
<div class ="col-6">
<div style="background-color: coral; height: 250px;"></div>
</div>
<div class ="col-6">
<div style= "background-color:lightcoral; height: 100px;"></div>
<div class ="row px-3 pt-3">
<div class ="col-6">
<div style="background-color: cornflowerblue; height: 130px;" ></div>
</div>
<div class ="col-6">
<div style="background-color: cornflowerblue; height: 130px;" ></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Reference
この問題について(FrontEnd:レイアウトの設定), 我々は、より多くの情報をここで見つけました https://velog.io/@sue6e2/FrontEnd-레이아웃-구성하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol