[HTML]팀 소개 페이지 만들기(자기소개 페이지 만들기)

김채원·2025년 2월 21일

TIL

팀소개 페이지 만들기

목록 보기

2/5

0.시작 전 목표

기능을 제외한 자기소개 페이지 완성하기
추가할 기능 팀원들과 의논하기
소개 페이지에 들어갈 정보 받기

1. html & css 구체화

회의 내용

우선 어제 하루정도 각자 만들어본 결과

이런 느낌의 페이지에

이런 식으로 사진이 들어가고

이런 느낌의 사원증이 들어가기로 했다

전체적으로 분홍색 상단테마에 하얀색 바탕으로 진행될 예정이고
폰트같은 즉각적으로 수정 가능한 부분은 추후 협의를 통해 다시 정하기로 했다

회의 내용을 페이지에 반영해보자

a. 배경 만들기

우선 대략적인 회의 이후에 전체적인 배경색이 분홍색 ~ 하얀색으로 진행될거기 때문에
그라데이션을 넣어 메인페이지와 연결되게끔 만들어보자 ! 로 결정

여기서 문제

css에 그라데이션을 어떻게 넣지?

바로 검색 시작

https://hianna.tistory.com/736

해당 내용은 여기 블로그에서 참고했습니다
linear-gradient 로 배경넣기 채택

<style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }

        .background {
            background: linear-gradient(#F0586A, white);
            width: 100vw;
            height: 100vh;
        }
 </style>

이렇게 하면

뿅하고 내가 원하는 배경 만들기 성공 !!
생각보다 너무 간단해서 다음에 응용하기 좋을 것 같다

b. 사진 넣어주기

그 다음으로 생각해야할게 사원증 사진에
개인 사진과 역할, 이름이 들어가야하는데 이걸 어떻게 넣지 .. 하고 고민하다가
사진 위에 사진을 올리면 되지 않을까 ?
생각해보면 사실 프론트엔드는 잘 모르지만
페이지도 div 위에 div를 넣어서 계속 레이어를 쌓는거 아닌가 ? 라는 생각도출
바로 실행해보기로 함

https://velog.io/@sweet_sumin/%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%93%A4%EC%9D%84-%EA%B2%B9%EC%B9%98%EA%B2%8C-%EB%A7%8C%EB%93%A4%EA%B9%8C

여기 블로그를 참고해 만들었습니다
position relative로 범위 정해주고 absolute로 위치 정해주기 .. 메모 ..
당장 진행시켜

우선 범위가 되어야하는건 사원증 사진이고
위치로 들어가야할건 내 얼굴 ㅋ 바로 코드 짜봅시다

<style>
    .idCard {
        width: 40%;
        height: 40%;
        position: relative;
    }

    .picture {
        position: absolute;
        width: 150px;
        height: 150px;

        border-radius: 10px;
    }

    .intro {
        position: absolute;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
    }

    .title {
        margin-bottom: 5px;
    }

    .name {
        margin: 0;
    }
</style>

<div class="container">
                <img class="idCard"
                    src="https://postfiles.pstatic.net/MjAyNTAyMTlfODgg/MDAxNzM5OTI0NTQ2NTQ3.nLD3Pmiyds9bM0Vnvq9w6Swj6IGrceiPfcx6Ktj3FYcg.QWf1v1f_aLHtJ81Ra2z-F6pcbWtntdUQKd1gScExBuog.PNG/%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C.png?type=w580">
                <img src="https://teamsparta.notion.site/image/https%3A%2F%2Fprod-files-secure.s3.us-west-2.amazonaws.com%2F83c75a39-3aba-4ba4-a792-7aefe4b07895%2F0d5174cf-b043-41d6-b407-06fc17a82257%2FKakaoTalk_Photo_2025-01-17-16-45-33.jpeg?table=block&id=546419e6-f3d6-493d-8ec1-b052af7aa58c&spaceId=83c75a39-3aba-4ba4-a792-7aefe4b07895&width=1420&userId=&cache=v2"
                    class="picture">
                <div class="intro">
                    <p class="title">팀원</p>
                    <p class="name">김채원</p>
                </div>
            </div>

이렇게 하면 ?

이것 .. 뭐예요 .. ?
난 진짜 이럴때마다 눈물이 난다 ㅠ
어제는 이쁘게 잘 됐으면서 왜그러는거야 ㅠㅠ

사실 사진 위치를 맞춰준적 없으니 당연하지. 바로 수정해.

하고선 위치 조정을 위해 margin으로 조절을 하는데
사진의 오른쪽은 margin 크기가 일정이상으로 올라가면 움직이질 않음 .. 왜그렇지 ?
하다가 깨달은게 내가 container는 아무것도 해주지 않았구나

완성 !!
이제 두 번째 문제는 내려가버린 ABOUT ME 위로 올려주기

<style>
    .main {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 50px;
    }
</style>

이렇게 메인에 들어가는 코드 수정해주면 ??

쨔쟌하고 드디어 내가 원하는 화면 완성

팀원들 개인정보는 따로 받아서 페이지 추가적으로 3개정도 더 만들었다만
개인정보이니만큼 개인 벨로그에는 올리지 않기로했다

그리고 회의를 통해 자기소개 페이지 밑에 QnA 올리기로 결정
기능 구현은 다른 분이 맡으셔서
내일중으로 기능 입력후 css 추가 예정이다

2.마무리

하루 회고

팀플의 가장 큰 장점은 회의시간 전까지 내껄 어느정도 마무리 해야하니까 속도가 진짜 빨라져버렸다 .. 그리고 아무래도 다른 사람한테 어느 부분에서 어떤걸 사용했는지 얘기해줘야할 일이 생기니 남들에게 내가 이걸 설명할 수 있는 레벨까지 공부를 해야해서 단기간 가장 빠르게 지식을 습득할 수 있는 것 같았다