내일배움캠프 1주차 # 미니프로젝트(1)

미니프로젝트 시작!

드디어 기다리던 미니프로젝트가 시작했다.
아래의 내용을 필수로 포함하여 팀소개 및 팀원소개 사이트 만들기가 이번 프로젝트 주제다.

필수포함내용

[팀]과 [자신]에 대한 설명 및 MBTI

객관적으로 살펴본 자신의 **장점**

**협업**을 하는 과정에서의 자신의 스타일

우리 팀만의 **특징**과 추구하는 궁극적인 목표

우리 팀의 약속

팀원들의 **블로그 주소**

기본포함기술

HTML

CSS

부가기술

부트스트랩

javascript

우리 '킹콩파워' 팀은 기본포함기술은 물론 부가기술까지 더하여 프로젝트를 완성하기로했다.
오늘은 일단 프로젝트를 본격적으로 하기에 앞서 가장 먼저 기획을 해야했기에 목업부터 짰다.
기본적으로 필요한페이지는 팀원소개인 메인페이지와 각 팀원을 소개할 수 있는 개인페이지이다.
일단 메인페이지는 이렇게 기획하였고,

개인페이지는 아래처럼 기획하였다.

이렇게 기획을 탄탄히 해두어야 배가 산으로 가지 않기에 기획짜는데에 힘을 썼다.
기획을 다 짜고 난 후 각자 코딩을 시작했다.
오늘은 '내일배움캠퍼의 밤'(캠퍼들끼리 친해질시간을 갖는자리) 로 인해 진도를 많이 빼진 못했지만,
아래처럼 메인페이지를 구상하였다.

우리 팀 이름은 '킹콩파워' 이기때문에 컨셉을 동물의 숲 컨셉으로 잡고 만들었다.
폰트도 센스있게 동물의 숲 폰트로 ~! ^^
또 각 카드들 위에 hover 됐을때는 색깔별로 그림자가 나올수있도록 꾸몄다.
하지만 한 페이지를 만드는데 너무 시간이 오래걸린거같아 속상하다...

2. main.html

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <title>놀러와요 킹콩팀 숲</title>
    <style>
        @font-face {
            font-family: 'BMJUA';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/BMJUA.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        .mytitle {
            font-family: 'BMJUA';

            max-width: 100%;

            height: 250px;
            color: azure;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)), url('https://mblogthumb-phinf.pstatic.net/MjAyMDA0MDlfMjYw/MDAxNTg2NDA5MzMyNTE0.zHhb_MyySsjc2rtncLLdRbw_o3d4Ww9rj47ib6bbZ_wg.du---nonsDMO0MzhIOYUhNKGpcvWzUvG90m8dRxpKHwg.JPEG.skli0612/2020040819503700-02CB906EA538A35643C1E1484C4B947D.jpg?type=w800');
            background-position: center 50%;
            background-size: cover;

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

        .team-post {
            font-family: 'BMJUA';

            max-width: 1500px;
            width: 90%;

            background-color: blanchedalmond;

            margin: 50px auto 0px auto;
            border-radius: 10px;
            padding-top: 20px

        }

        .team-post > h3 {
            text-align: center;
        }

        .post-content {
            padding: 40px 40px 20px 40px;
            text-align: center;
            font-size: 20px;
        }

        .card{
            max-width: 1500px;
            width: 80%;
            font-family: 'BMJUA';
            margin: 80px auto 30px auto;
        }
        .card1:hover{
            box-shadow: 0px 0px 30px 0px red;
        }
        .card2:hover {
            box-shadow: 0px 0px 30px 0px yellow;
        }
        .card3:hover {
            box-shadow: 0px 0px 30px 0px green;
        }
        .card4:hover {
            box-shadow: 0px 0px 30px 0px blue;
        }



    </style>
    <script>
        function detail01() {
            window.location.href='detail01.html'
        }
        function detail02() {
            window.location.href='detail02.html'
        }
        function detail03() {
            window.location.href='detail03.html'
        }
        function detail04() {
            window.location.href='detail04.html'
        }
    </script>
</head>
<body style="background-color: #FFDEAD">
<div class="mytitle">
    <h1 style="font-size: 450%"> 🦍 놀러와요 킹콩팀 숲 🦍</h1>
</div>
<div class="team-post" style="border: 5px solid lightslategrey">
    <h3 style="font-size: 40px"> 🙊 킹콩파워팀을 소개합니다! 🙊 </h3>
    <div class="post-content">
        <p><span style="color: chocolate">1. 킹콩파워팀 설명</span>  <br> 동물을 사랑하는 사람들이 모인 팀이고, 킹콩처럼 패기와 자신감이 넘치는 개발자로 성장하고 싶은 팀입니다 </p>
        <p><span style="color: chocolate">2. 킹콩파워팀 특징</span> <br> 패기는 넘치는데, 생각보다 다들 온순해서 평화로운게 특징입니다. </p>
        <p><span style="color: chocolate">3. 킹콩파워팀 목표</span> <br> 킹콩처럼 실력이 커지는게 궁극적인 목표입니다. </p>
        <p><span style="color: chocolate">4. 킹콩파워팀 약속</span> <br> 서로에게 솔직한 피드백을 한다! <br> 끊임없이 긍정적인 에너지를 서로에게 공급한다! <br> 중도 포기하지 않는다! <br> 건강은 스스로 잘 챙긴다! </p>
    </div>
</div>
<div class="post-card">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div onclick="detail01()" class="col" style="cursor: pointer;">
            <div class="card card1">
                <img src="" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">문명주🐵</h5>
                    <p class="card-text">아이디어담당</p>
                    <a href="https://velog.io/@ansaudwn123"> https://velog.io/@ansaudwn123</a>
                </div>
            </div>
        </div>
        <div onclick="detail02()" class="col" style="cursor: pointer;">
            <div class="card card2">
                <img src="" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">윤가현🙈</h5>
                    <p class="card-text">에이스담당</p>
                    <a href="https://velog.io/@ansaudwn123"> https://velog.io/@ansaudwn123</a>
                </div>
            </div>
        </div>
        <div onclick="detail03()" class="col" style="cursor: pointer;">
            <div class="card card3">
                <img src="" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">김태인🙉</h5>
                    <p class="card-text">유쾌입담담당</p>
                    <a href="https://velog.io/@ansaudwn123"> https://velog.io/@ansaudwn123</a>
                </div>
            </div>
        </div>
        <div onclick="detail04()" class="col" style="cursor: pointer;">
            <div class="card card4">
                <img src="" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">김철현🙊</h5>
                    <p class="card-text"> 리액션쵝오담당</p>
                    <a href="https://velog.io/@ansaudwn123"> https://velog.io/@ansaudwn123</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<느낀 점>

사실 2년간 일을 하며 협업을 해본 경험이 그렇게 많지는 않아서
명확히 협업을 할 때 네 모습이 어떤지 모르겠지만,
이번에 짧게나마 미니프로젝트를 진행하면서 느꼈던 내 모습은
“아이디어를 내는 것에 있어서 주저함이 전! 혀! 없는 모습” 이다.
또한 민폐를 끼치기 싫어하는 성격이라서 팀원들에게 폐가 되지 않도록
열심히 하게 되는 것 같다. 다 팀원들을 잘 만난 덕이다 ㅠㅠㅠ
내일은 개인페이지를 또 열심히 만들어 봐야지!!!

Author And Source

이 문제에 관하여(내일배움캠프 1주차 # 미니프로젝트(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ansaudwn123/내일배움캠프-1주차-미니프로젝트1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

내일배움캠프 1주차 # 미니프로젝트(1)

미니프로젝트 시작!

2. main.html

<느낀 점>

Author And Source

좋은 웹페이지 즐겨찾기