FrontEnd : 레이아웃 구성하기

이지수·2021년 8월 10일

부트스트랩을 이용하여 레이아웃을 만들어 보았다.
https://getbootstrap.com/

여기에 들어가면 다 잘 정리되어있어서 읽어보고 사용하면 편리하다.

이러한 레이아웃을 임의로 그려서 레이아웃 만들기를 연습했다.
코드는 아래와 같다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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/bootstrap@4.6.0/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>

이지수

The only thing worse than starting something and failing...is not starting something

FrontEnd : 레이아웃 구성하기

[구현 알고리즘] 상하좌우 문제

[Django]회원가입폼 전송하기

0개의 댓글