TIL

TIL - 2024/12/23

호롤로 2024. 12. 23. 21:21

▶ 오늘 하루의 일과

 - 오늘은 본격적으로 부트캠프의 시작과 함께 첫 팀 프로젝트가 시작됬다. 역할 배분으로 팀 프로젝트의 메인 페이지 뼈대 구성을 담당하게 되어 여태 배운것들을 총 동원하여 구축을 진행했다.

 

▶ 진행사항

- 프로젝트 진행에 앞서, 팀원들과 S.A.(Starting Assignment)를 우선 작성했다. 프로젝트를 무엇을 주재로 어떻게 진행할것인지에 대한 방향성과, 각자 맡은 파트의 와이어 프레임을 제작하여 공유, 수정 후 본격 뼈대 작성을 진행하였다.

 

▷ 와이어 프레임

메인 페이지 와이어 프레임

 

▷ HTML / CSS 작성

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

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>미니온보딩</title>
    <link rel="stylesheet" href="style.css" />
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            font-family: "Poppins", sans-serif;
        }

        body {
            background-color: #f5f5f5;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            padding: 2em 1em;
            text-align: center;
        }

        .column {
            width: 100%;
            padding: 0.5em 0;
        }

        h1 {
            width: 100%;
            text-align: center;
            font-size: 3.5em;
            color: #1f003b;
        }

        .card {
            box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
            padding: 3.5em 1em;
            border-radius: 0.6em;
            color: #1f003b;
            cursor: pointer;
            transition: 0.3s;
            background-color: #ffffff;
        }

        .card .img-container {
            width: 13em;
            height: 13em;
            background-color: #a993ff;
            padding: 0.5em;
            border-radius: 50%;
            margin: 0 auto 2em auto;
        }

        .card img {
            width: 100%;
            border-radius: 50%;
        }

        .card h3 {
            font-weight: 500;
        }

        .card p {
            font-weight: 300;
            text-transform: uppercase;
            margin: 0.5em 0 2em 0;
            letter-spacing: 2px;
        }

        .icons {
            width: 50%;
            min-width: 180px;
            margin: auto;
            justify-content: space-between;
        }

        .btn {
            background-color: transparent;
            border: none;
            text-decoration: none;
            color: inherit;
            font-size: 1.4em;
        }

        .card:hover {
            background: linear-gradient(#6045ea, #8567f7);
            color: #ffffff;
        }

        .card:hover .img-container {
            transform: scale(1.15);
        }

        @media screen and (min-width: 768px) {
            section {
                padding: 1em 7em;
            }
        }

        @media screen and (min-width: 992px) {
            section {
                padding: 1em;
            }

            .card {
                padding: 5em 1em;
            }

            .column {
                flex: 0 0 33.33%;
                max-width: 20.00%;
                padding: 0 1.5em;
            }
        }
    </style>
</head>

<body>
    <section>
        <div class="row">
            <h1>미니온보딩</h1>
        </div>
        <div class="row">
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="https://i.pinimg.com/550x/3e/12/48/3e12485387de6dae6cda2f8084bf0702.jpg" />
                    </div>
                    <h3>최다원</h3>
                    <p>팀장</p>
                    <div class="icons">
                        <button class="btn"><i class="fa fa-user"></i></button>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="https://i.pinimg.com/550x/3e/12/48/3e12485387de6dae6cda2f8084bf0702.jpg" />
                    </div>
                    <h3>문성준</h3>
                    <p>팀원</p>
                    <div class="icons">
                        <button class="btn"><i class="fa fa-user"></i></button>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="https://i.pinimg.com/550x/3e/12/48/3e12485387de6dae6cda2f8084bf0702.jpg" />
                    </div>
                    <h3>이지은</h3>
                    <p>팀원</p>
                    <div class="icons">
                        <button class="btn"><i class="fa fa-user"></i></button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="https://i.pinimg.com/550x/3e/12/48/3e12485387de6dae6cda2f8084bf0702.jpg" />
                    </div>
                    <h3>송윤정</h3>
                    <p>팀원</p>
                    <div class="icons">
                        <button class="btn"><i class="fa fa-user"></i></button>
                        </a>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="https://i.pinimg.com/550x/3e/12/48/3e12485387de6dae6cda2f8084bf0702.jpg" />
                    </div>
                    <h3>조은종</h3>
                    <p>팀원</p>
                    <div class="icons">
                        <button class="btn"><i class="fa fa-user"></i></button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="row align-items-md-stretch">
            <div class="col-md-6">
                <div class="h-100 p-5 bg-body-tertiary border rounded-3">
                    <h2>팀 소개 / 목표</h2>
                    <p>~~~~~~</p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="h-100 p-5 bg-body-tertiary border rounded-3">
                    <h2>규칙 / 약속</h2>
                    <p>~~~~~~~</p>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

 

기본적인 뼈대는 아직 실력이 미숙한 관계로, 직접 작성에는 어려움이 있어 여러 사이트를 돌아다니며 괜찮은 템플릿을 가져와, 필요없는 부분은 쳐내고, 추가로 필요한 기능들을 넣어보는 방향으로 진행했고, 가시성을 높이기 위한 박스/사진 크기, 색상 등을 수정하며 전채적인 뼈대를 잡은고 작동에도 이상이 없음을 확인했다.

 

▷ 작동 확인

▶ 마치며

- 본격적으로 부트캠프 시작과 함께 새로운 팀원들과 새로운 팀이 되어 들뜬 마음이 들었지만, 한편으론 다른 팀원 모두가 관련지식이 많다는점에 어려운것이 있을때 물어볼수 있는 사람이 많아서 좋은 마음 반, 나 혼자 비전공자에 아는것도 많이 없어 팀원들에게 누를 끼칠까 걱정도 된다. 팀에 짐이 되지않기 위해 남들에 2배 3배이상 노력하고자 마음먹고 오늘 하루를 끝내본다.

'TIL' 카테고리의 다른 글

TIL - 2025/01/03  (1) 2025.01.03
TIL - 2024/12/31  (0) 2024.12.31
TIL - 2024/12/30  (1) 2024.12.30
TIL - 2024/12/26  (1) 2024.12.26
TIL - 2024/12/24  (0) 2024.12.24

'TIL'의 다른글

  • 현재글TIL - 2024/12/23

관련글

티스토리툴바