1주차 미니프로젝트 2일차

sa 컨셉을 다시 만들었다. 심플하면서 우리가 할 수 있는 느낌으로다가.

역할 배정은 하지 않았으나, 개인 소개 화면을 만들었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Page with Carousel</title>
    <!-- Bootstrap CSS 추가 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'font-family', sans-serif;
            font-weight: 800;
            text-align: center;
            background-color: #ffff;
            margin: 0;
            padding: 0;
        }

        .container {
            width: 60%;
            margin: auto;
            padding-top: 50px;
        }

        .profile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        .profile-details {
            text-align: left;
            margin-top: 20px;
        }

        h1 {
            font-size: 2.5em;
            color: #07011a;
        }

        .buttons {
            margin-top: 30px;
        }

        .button {
            background-color: #020007;
            color: white;
            border: none;
            border-radius: 30px;
            padding: 10px 20px;
            margin: 0 10px;
            cursor: pointer;
            font-size: 1em;
            transition: background-color 0.3s ease;
        }

        .button:hover {
            background-color: #543a8e;
        }
    </style>

</head>

헤드 라인 과 css 추가 부분이다.

<body>
    <div class="container">
        <h1>About.</h1>
        <div class="profile">
            
            <div id="carouselExample" class="carousel slide">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="c:\Users\todlq\OneDrive\바탕 화면\화면 캡처 2024-08-27 144428.png" class="d-block w-100" alt="프로필 사진 1">
                    </div>
                    <div class="carousel-item">
                        <img src="c:\Users\todlq\OneDrive\바탕 화면\1111.png" class="d-block w-100" alt="프로필 사진 2">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
            
            <div class="profile-details">
                <p><strong>이름:</strong> 장문석</p>
                <p><strong>생년월일:</strong> </p>
                <p><strong>거주지:</strong> </p>
                <p><strong>학교/전공:</strong> </p>
            </div>
       
        </div>
        <div class="buttons">
            <button class="button">취미</button>
            <button class="button">성격</button>
        </div>
    </div>

    <!-- Bootstrap JS 추가 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

바디에 들어간 부트스트랩에서 끌어온 슬라이딩 기능이 삐걱거린다.

추가로 바디 마지막 부분에 부트스트랩 js 를 추가해주면 완성!

q1) 사진의 크기가 다른것인가.

q2) 아니면, 코딩이 잘못된 것인가.

q1) -> a1) 사진 크기가 달라서 넘어갈 때 느낌이 이상한 것 같다.

-> 해결책 그림판으로 일단 사진 크기를 조정해 보자.
흠 여전히 이상했다. 그림판 크기 조정을 시행 후 먼가 슬라이드가 내가 원하는 느낌으로 넘어가지 않는다.

코드를 통한 사진 크기 조절을 알아보자

부트트랩에서 슬라이드 (캐러셀 이라는) 코드를 가져왔었다

캐러샐 관련 이미지 조정 코드

.carousel-inner img {
            width: 100%;
            height: 400px;  
            object-fit: cover; -> 이미지 비율 유지하며 크기 맞추기

body 구간에 class 설정을 해준다

<div class="container">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="carousel-item">

이런식으로 구조를 짜서 실행해 보니 그나마 쫌 괜찮아 진거 같다.

차리차리

1주차 미니프로젝트 2일차

티스토리툴바