13일차

김윤정·2024년 7월 4일

코딩

목록 보기
13/60
post-thumbnail

1. 부트스트랩을 이용하여, 아래를 2가지 방법으로 구현하시오.

  • float 사용
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

<body>
    <div class="container mt-3 overflow-hidden">
        <h2>Aligning images</h2>
        <p>Use the float classes to float the image to the left or to the right:</p>
        <img src="https://www.w3schools.com/bootstrap5/paris.jpg" class="float-start" alt="Paris" width="304"
            height="236">
        <img src="https://www.w3schools.com/bootstrap5/paris.jpg" class="float-end" alt="Paris" width="304"
            height="236">
    </div>
</body>

</html>
  • flex 사용
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

<body>

    <div class="container mt-3">
        <h2>Aligning images</h2>
        <p>Use the float classes to float the image to the left or to the right:</p>
        <div class="d-flex justify-content-around">
            <img src="https://www.w3schools.com/bootstrap5/paris.jpg" alt="Paris" width="304" height="236">
            <img src="https://www.w3schools.com/bootstrap5/paris.jpg" alt="Paris" width="304" height="236">
        </div>
    </div>
</body>

</html>

2. 부트스트랩을 이용하여 두가지 방법으로 구현하시오.

  • flex 사용
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

<body>

    <div class="container mt-3">
        <h2>Aligning images</h2>
        <p>Use the float classes to float the image to the left or to the right:</p>
        <div class="d-flex justify-content-center">
            <img src="https://www.w3schools.com/bootstrap5/paris.jpg" alt="Paris" width="304" height="236">
        </div>
    </div>

</body>
</html>
  • block 사용
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

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

<body>
    <div class="container mt-3">
        <h2>Aligning images</h2>
        <p>Use the float classes to float the image to the left or to the right:</p>
        <img src="https://www.w3schools.com/bootstrap5/paris.jpg" class="d-block mx-auto" alt="Paris" width="304"
            height="236">
    </div>

</body>

</html>

3. 아래를 구현하시오.

  • modal 팝업
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Hello, world!</title>
</head>

<body>
    <div class="container mt-3">
        <h3>Modal Example</h3>
        <p>Click on the button to open the modal.</p>

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
            Open modal
        </button>
    </div>

    <!-- The Modal -->
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Modal Heading</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    Modal body..
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</body>

</html>
  • 캐라셀
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Hello, world!</title>
</head>

<body>
    <!-- Carousel -->
    <div id="demo" class="carousel slide" data-bs-ride="carousel">

        <!-- Indicators/dots -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
            <button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
        </div>

        <!-- The slideshow/carousel -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="https://www.w3schools.com/bootstrap5/la.jpg" alt="Los Angeles" class="d-block"
                    style="width:100%">
            </div>
            <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap5/chicago.jpg" alt="Chicago" class="d-block"
                    style="width:100%">
            </div>
            <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap5/ny.jpg" alt="New York" class="d-block"
                    style="width:100%">
            </div>
            <div class="carousel-item">
                <img src="https://www.w3schools.com/bootstrap5/ny.jpg" alt="New York" class="d-block"
                    style="width:100%">
            </div>
        </div>

        <!-- Left and right controls/icons -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
    </div>

    <div class="container-fluid mt-3">
        <h3>Carousel Example</h3>
        <p>The following example shows how to create a basic carousel with indicators and controls.</p>
    </div>
</body>

</html>

4.오늘의 명언을 구현하시오.

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Hello, world!</title>
</head>

<body class="bg-danger bg-opacity-10">
        <section class="container text-center">
            <h1 class="mt-5 py-5 fw-bold">오늘의 명언</h1>
            <div class="bg-danger bg-opacity-75 text-white w-75 m-auto shadow-lg p-5 my-5 rounded-4">
                <blockquote class="blockquote">
                    <p>You are the master of your fate, The captain of your soul</p>
                    <p class="small">나는 내 운명의 주인이며, 나는 내 영혼의 선장이다 </p>
                </blockquote>
                <div class="blockquote-footer pt-4 text-white"> 윌리엄 어니스트 헨리 </div>
            </div>
            <a href="#" class="btn btn-outline-dark">상세 보기</a>
        </section>
</body>

</html>

5. 아래를 구현하시오. - 포트폴리오 갤러리

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <title>Hello, world!</title>

</head>

<body class="bg-warning bg-opacity-25">
    <div class="container">
        <h1 class="fw-bold text-center mt-5 p-5">포트폴리오 갤러리</h1>
        <div class="row space-between">
            <div class="col-4"><img class="img-fluid"
                    src="http://192.168.1.69:5500/bootstrap-example-master/3.%EA%B0%A4%EB%9F%AC%EB%A6%AC%20%EC%84%B9%EC%85%98%20%EB%A7%8C%EB%93%A4%EA%B8%B0/images/img1.jpg"
                    alt=""></div>
            <div class="col-4"><img class="img-fluid"
                    src="http://192.168.1.69:5500/bootstrap-example-master/3.%EA%B0%A4%EB%9F%AC%EB%A6%AC%20%EC%84%B9%EC%85%98%20%EB%A7%8C%EB%93%A4%EA%B8%B0/images/img2.jpg"
                    alt=""></div>
            <div class="col-4"><img class="img-fluid"
                    src="http://192.168.1.69:5500/bootstrap-example-master/3.%EA%B0%A4%EB%9F%AC%EB%A6%AC%20%EC%84%B9%EC%85%98%20%EB%A7%8C%EB%93%A4%EA%B8%B0/images/img3.jpg"
                    alt=""></div>
        </div>
    </div>


</body>


</body>

</html>
profile
김윤정
이전 포스트

12일차

다음 포스트

14일차

0개의 댓글