새소식

일상과 코딩 공부를 기록하는 블로그

인기 검색어

👦 내일배움캠프/TIL(Today I Learned)

TIL_220420_ 미니 팀 프로젝트

-

잠시 하던 모든 것을 내려놓고

아침과 함께 시작을 알리는 미니 프로젝트..

이 글을 봤을 때 굉장히 내 마음을 이해해 주셨는지 위로의 글 같았다.

이 글을 보기 전까지..

아니.. 굳이 이 틈을 타셔야 겠냐구요.. ㅠㅠㅠ

아무튼 시작!!

아침 9시 부터 10시 까지 미니 프로젝트 설명이 있었다.

끝나자마자 게더 부실로 모인 팀원들

왜 방 안에 나무가 심어져 있는지 의문이다.

그리고

나다 ⊙_⊙

무엇을 느꼈는가.

오늘은 여기까지. 내일 이어서 계속.

미니가 붙어도 프로젝트인 만큼 협업에 대해서 성실히 임하는 자세를 취했다.

협업을 배우고 실전으로 실습한 오늘 하루.

많은 것을 느꼈다고 볼 수 있다.

만약 팀원들과 원활한 소통이 이루어지기 전에 서로에 대해서 잘 몰라 대화의 분위기를 이끌어갈 수 없었다면,

사전 기획 없이 각자 맡은 역할을 임했을 때 허술했던 기획으로 진행률에 차질이 생겼다면,

아마 지금의 프로젝트는 제대로 진행되고 있지 않았을 것이다.

그만큼 중요한 과정이고, 나는 이 과정을 정말 작은 축소판으로 경험하고 있다.

흔히 경험할 수 없는 이 기회를 나는 놓치 않고 잡아 나아갈 것이다.

이런 배움 하나에도 경험이 되어주고, 나아가 재산이 되어 나를 나타낼 수 있는 귀했던 시간.

오늘도 코딩했다.

[오늘 하루 필기식 공부한 내용 기록하기]

개발자가 되기 앞서 무엇보다 중요한 협업.

이번 교육 기간동안 내가 꼭 얻어갈 부분이다.

[협업 실습이 되시겠다]

1. 팀원과의 교류

ISFP의 내성적인 사람이지만, E 흉내를 내어 팀원들과 친해지기를 시도했다.

즐거웠던 팀원들과의 TMI

너무 알아버린게 아닐까..?

이야기를 나누면서 서로의 성격과 특징을 공유하면서 한층 여유가 있는 대화로 발전하는 것을 볼 수 있었다.

2~3. 미니 프로젝트 컨셉 정하기

컨셉은 팀원을 소개하는 페이지가 되겠다.

묵업이 되는 디자인 초안을 PPT로 작성했다.

[메인 페이지]

- 배경 : #C5C5C5

- 폰트 : 맑은 고딕

- <div> : main, background, text layout

[멤버 목록 페이지]

- 배경 : #C5C5C5

- 폰트 : 맑은 고딕

- <div> : title, card list

[개인 페이지]

- 배경 : 개인이 원하는 사진, 색상

- 폰트 : 맑은 고딕

- <div> : title, picture, text

[사전 디자인을 통해 구현한 웹페이지]

[메인 페이지]

[멤버 리스트]

[HTML/CSS]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!--  부트스트랩  -->
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    <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>KTLO</title>

    <style>
        * body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;

            margin-top: 80px;
            margin-bottom: 80px;

            font-size: 18px;
            font-family: 'Nanum Gothic', sans-serif;

            background-color: #C5C5C5;
        }

        /* 메인 페이지 레이아웃 */
        .main-layout {
            max-width: 1550px;
            width: 100%;
            max-height: 700px;
            height: 100%;

            display: flex;
            align-content: center;
            justify-content: center;
            flex-direction: column;
            flex-wrap: nowrap;

            margin-bottom: 400px;
        }

        /* 배경 */
        .background {
            display: flex;
            justify-content: center;

        }

        /* 배경 이미지 */
        .background-image {
            Position: absolute;
            margin-top: 120px;

            display: flex;

            opacity: 0.6;
        }

        /* 텍스트 레이아웃 */
        .text-layout {
            height: 600px;

            Position: relative;

            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;

            margin: 40px;
        }

        .left-layout {
            width: 425px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
        }

        .right-layout {
            width: 425px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-end;
        }

        /* 멤버 소개 레이아웃 */
        .team {
            color: white;
        }

        .team-layout {
            width: 1520px;
            height: 1000px;
        }

        .team-1 {
            display: flex;
            justify-content: center;

            margin-bottom: 20px;

            font-family: 'Jua', sans-serif;
        }

        .team-1 > .col-lg-4 {
            display: flex;
            flex-direction: column;
            align-items: center;

            margin: 20px;
        }

        .team-2 {
            display: flex;
            justify-content: center;

            font-family: 'Jua', sans-serif;
        }

        .team-2 > .col-lg-4 {
            display: flex;
            flex-direction: column;
            align-items: center;

            margin: 20px;
        }
    </style>
</head>
<body>
    <!--  큰 영역  -->
    <div class="main-layout">
        <!--    배경 사진    -->
        <div class="background">
            <img class="background-image" src="/miniproject/background.png"
                 alt="Grapefruit slice atop a pile of other slices">
        </div>

        <!--    text layout    -->
        <div class="text-layout">
            <!--    left layout   -->
            <div class="left-layout">
                <!--    comment1    -->
                <div class="text-1">
                    <h1 style="font-size: 100px; text-shadow: 2px 2px 2px gray; font-weight: bold;">KTLO <p style="font-size : 26px">KIM THREE LEE ONE</p></h1>
                </div>
                <!--    comment2    -->
                <div class="text-2" style="font-weight: bold;">
                    <p>
                    <h3 style="font-weight: bold;">김삼이일 이란?</h3>
                    김씨 3명과 이씨 1명이 한 자리에 모여<br>
                    4개월 동안의 일대기를 그려나갈<br>
                    가슴이 웅장해지는 성장 스토리
                    </p>
                </div>
            </div>

            <!--    right layout   -->
            <div class="right-layout">
                <!--    comment3    -->
                <div class="text-3" style="font-weight: bold;">
                    <p>
                    <h3 style="font-weight: bold;">우리 팀만의 특징과<br>
                    추구하는 궁극적인 목표</h3>
                    특징 : 선한 성격, 안경, 애니메이션, 공통 MBTI I<br>
                    궁극적인 목표 : 4개월 동안 벡엔드 기술들을 배움으로써<br>
                    멋진 개발자로 거듭나는 것이 목표입니다.
                    </p>
                </div>
                <!--    comment4    -->
                <div class="text-4" style="font-weight: bold;">
                    <p>
                    <h3 style="font-weight: bold;">☺ 우리 팀의 약속!!</h3>
                    &nbsp&nbsp✓ 서로 지치지 않도록 격려하기<br>
                    &nbsp&nbsp✓ 지각하지 않기<br>
                    &nbsp&nbsp✓ 원활한 소통하기<br>
                    &nbsp&nbsp✓ 적극적인 회의 참여하기<br>
                    &nbsp&nbsp✓ 서로 부족한 부분 채워주기<br>
                    &nbsp&nbsp✓ 건강하게 수료하기!<br>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="team">
        <h1 style="text-shadow: 2px 2px 2px gray; font-weight: bold;">TEAM MEMBER</h1>
    </div>
    <div class="team-layout">
        <div class="row">
            <!--     team-1       -->
            <div class="team-1">
                <div class="col-lg-4">
                    <svg class="bd-placeholder-img rounded-circle" width="140" height="140"
                         xmlns="http://www.w3.org/2000/svg"
                         role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice"
                         focusable="false">
                        <title>Placeholder</title>
                        <img style="margin-bottom: 20px" src = "/miniproject/IMG_6788.jpg" alt = "photo" class = "rounded-circle" width = "250" />
                        <text x="50%" y="50%" fill="#777" dy=".3em"></text>
                    </svg>

                    <h2>홍 길 동</h2>
                    <p>조선 최고의 의적 그게 바로 나다</p>
                    <p><a class="btn btn-secondary" href="#">View details »</a></p>
                </div><!-- /.col-lg-4 -->

                <div class="col-lg-4">
                    <svg class="bd-placeholder-img rounded-circle" width="140" height="140"
                         xmlns="http://www.w3.org/2000/svg"
                         role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice"
                         focusable="false">
                        <title>Placeholder</title>
                        <img style="margin-bottom: 20px" src = "/miniproject/profile5.png" alt = "photo" class = "rounded-circle" width = "250" />
                        <text x="50%" y="50%" fill="#777" dy=".3em"></text>
                    </svg>

                    <h2>임 꺽 정</h2>
                    <p>꺽 정!!</p>
                    <p><a class="btn btn-secondary" href="#">View details »</a></p>
                </div><!-- /.col-lg-4 -->
            </div>

            <!--      team-2      -->
            <div class="team-2">
                <div class="col-lg-4">
                    <svg class="bd-placeholder-img rounded-circle" width="140" height="140"
                         xmlns="http://www.w3.org/2000/svg"
                         role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice"
                         focusable="false">
                        <title>Placeholder</title>
                        <img style="margin-bottom: 20px" src = "/miniproject/profile3.png" alt = "photo" class = "rounded-circle" width = "250" />
                        <text x="50%" y="50%" fill="#777" dy=".3em"></text>
                    </svg>

                    <h2>이 순 신</h2>
                    <p>오늘도 왜놈들을 물리쳤다. 보람찼다.</p>
                    <p><a class="btn btn-secondary" href="#">View details »</a></p>
                </div><!-- /.col-lg-4 -->

                <div class="col-lg-4">
                    <svg class="bd-placeholder-img rounded-circle" width="140" height="140"
                         xmlns="http://www.w3.org/2000/svg"
                         role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice"
                         focusable="false">
                        <title>Placeholder</title>
                        <img style="margin-bottom: 20px" src = "/miniproject/profile4.png" alt = "photo" class = "rounded-circle" width = "250" />
                        <text x="50%" y="50%" fill="#777" dy=".3em"></text>
                    </svg>

                    <h2>세 종 킴</h2>
                    <p>한글을 만들었다. 잘한건가? 킹정~</p>
                    <p><a class="btn btn-secondary" href="#">View details »</a></p>
                </div><!-- /.col-lg-4 -->
            </div>
        </div>
    </div>
</body>
</html>

[어려웠던 코드]

[위치]

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: nowrap;

[고정비율]

max-width: 1550px;
width: 100%;
max-height: 700px;
height: 100%;

[레이아웃 순서]

Position: absolute;

[폰트 속성]

style="font-size: 100px; text-shadow: 2px 2px 2px gray;" <!--    폰트 그림자    -->
style="font-weight: bold;" <!--    폰트 굵기    -->

'👦 내일배움캠프 > TIL(Today I Learned)' 카테고리의 다른 글

TIL_220422_미니 팀 프로젝트 (0)	2023.01.01
TIL_220421_미니 팀 프로젝트 (1)	2023.01.01
TIL_220419_2 (0)	2023.01.01
TIL_220419_1 (0)	2023.01.01
TIL_220418 (1)	2023.01.01

Contents

당신이 좋아할만한 콘텐츠

댓글 1

소중한 공감 감사합니다

Receive promotional offers?

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.

티스토리툴바