[HTML]팀 소개 페이지 만들기 (구성 및 뼈대 제작)

김채원·2025년 2월 20일

팀소개 페이지 만들기

목록 보기

1/5

0. 프로젝트 시작

사실 팀 프로젝트는 거진 처음이었고 html과 css도 익숙치 않은 상태에서 덜렁 소개 페이지 만들기라는 숙제가 떨어졌다. 뉴스 페이지를 한 번 만들어본적은 있었지만 그 때는 다른 포털사이트의 디자인을 어느정도 베껴서 만들었던거라 무에서 유 창조는 정말 당황스러웠다. 그렇지만 나는 강한 한국인이니 이겨낼 수 있다..

1. 프로젝트 구성

우선 프로젝트 진행을 위해 틀을 정하기로 했다
각자 러프하게 그려온걸 토대로 아이디어를 취합해 만들기로했다
그렇게 내가 그려온 뼈대

ㅋㅋㅋㅋㅋㅋㅋㅋㅋ 귀여워라
예전에 뉴스 페이지 만들때 써본 기억들로 최대한 만드려고 노력했다
지금 보면 너무 심플하긴 하다

그러다 우리 팀원 한 분이 보내주신 뼈대
사원증 아이디어 너무 좋잖아 ???
무엇보다 강아지 발바닥이 너무 귀여웠다
바로 낙찰해버리기 .. 다른 분들은 화면공유로 보여주셔서 사진이 없는게 아쉽다 ㅜ

그렇게 만들어진 최종 뼈대
4명이서 역할 분담하기도 딱 좋고 깔끔하니 괜찮은것 같다
~~솔직히 나는 내가 제일 잘그려갈 줄 알았는데 우리팀 미감 최고~~

이제 틀이 잡혔으니 4명이서 역할분담을 해 작업한 후 git을 통해 최종합본을 만들기로 했다
전까지 git을 사용한다하면 edit을 통해 직접 수정하는것만 해봤는데(개인 페이지였기 때문,,) 협업에서 git을 사용해볼 수 있다니 너무 좋잖아 ?

우선 두 명이 메인 페이지를 만들고 방명록 작성 페이지와 자기소개 페이지를 한 명씩 나누어 만들기로 했는데 나는 자기소개 페이지를 만들기로 했다

2. 페이지 만들기

우선 회의 내용을 토대로 틀을 잡아주기로 했다 회의에서 결정된건 사원증 뒷면 모양에 내용을 넣는 것이었는데 그렇게하면 페이지가 너무 비어보일거같아 사원증 사진을 왼쪽에 두고 오른쪽에 소개를 두는게 어떨까하고 의견을 내봤는데 다들 좋다고 해주셔서 기뻤다

그렇게 시작된 기본 틀 만들기

내 초기 세팅은 이랬다
어떻게하면 와이어프레임에 크게 벗어나지 않으면서
내 의견을 잘 수용해주실까에 중점을 두고 고안했다

나중에 추가될 QnA 코드를 넣어주기 위해서 사진과 자기소개란을 div로 묶어주었다
그 다음 사진과 글이 들어갈 칸을 나눠주기 위해 각각 또 div로 나눴다


<body>
    <div class="main">
        <div>
            <img class="idCard" src="https://shop.peopet.co.kr/data/goods/388/2022/06/_temp_16557127733930view.jpg"
                alt="Background">
        </div>
        <div class="introduce">
            <div class="aboutMe">
                <span>ABOUT ME</span>
            </div>
            <div class="text">   
                    <span class="thick"> MBTI </span><span class="thin">INFJ</span>
            </div>
            <div class="text">
                    <span class="thick">생년월일 </span><span class="thin">2000.07.29</span>
            </div>
            <div class="text">
                    <span class="thick">전공 유무 </span><span class="thin">비전공</span>
            </div>
            <div class="text">
                    <span class="thick">블로그 </span><a href="https://velog.io/@w0729/posts" class="blogLink"
                        target="_blank">https://velog.io/@w0729/posts</a>
            </div>
            <div class="text">
                    <span class="thick">목표 </span><span class="thin">개발력 좋은 개발자가 되기</span>
            </div>
        </div>
    </div>
</body>

이런식

블로그 링크는 커서를 가져다대면 호버 기능이 있게 만들어주었다
(이때 당시 내가 할 수 있는 최고의 꾸밈 == hover)

<style>
       .blogLink {
            color: black;
            font-weight: 400;
            font-size: 30px;
            text-decoration: none;
        }

        .blogLink:hover {
            color: darkgray;
            font-weight: 400;
            font-size: 30px;
            text-decoration: underline;
        }
</style>

그리고 나의 킥

<style>
        .thick {
            font-size: 35px;
            font-weight: 800;
        }

        .thin {
            font-weight: 400;
            font-size: 30px;
        }
</style>

글씨 하나씩 설정해주기 ㅋㅋㅋ
남들도 이렇게 하는지는 모르겠는데
어 글씨 다르면 괜찮겠다 음 .. thick thin .. ?
그래도 변수명 기억하긴 편해서 좋았다 (가독성도 나쁘지 않은듯)

3. 마무리

하루 회고

사실 이 날 한건 html로 뼈대 맞추기와 뼈대 확인을 위한 정말 간단한 css라서 어렵거나 한건 없었다. 가장 문제는 지금까지 혼자 하던걸 누군가와 공유한다는것이였는데 나는 그냥 체질이 사람들이랑 일하는게 잘 맞는 것 같다 ㅋㅋㅋ. 내가 생각못한 무언가를 누군가가 생각해서 알려주는 점도 좋고 내가 무언가 만들었을때 다른 사람들이 인정해주는게 기분 좋다. 팀원분들이 너무 좋은 사람들이라 진짜 열심히 해서 좋은 결과물을 만들고싶다.