22.11.29 미니프로젝트 회고록

hbin·2022년 11월 29일
0

미니프로젝트

금일 오전에는 html css의 수업을 마무리하고
오후에는 2명의 팀원과 함께 기존의 배운것을 토대로
네이버에서 서비스하는 파파고 번역 사이트를 모방제작하는 프로젝트가 시작됨



생각보다 html과 css를 배운기간이 짧았기때문에 프로젝트 진행에 애를먹었는데
다행히 랜덤으로 배정된 팀원들이 너무 좋고 잘하는 사람들이여서 한시름 놓았다.

먼저 주제로 정해진 파파고 사이트를 살펴보았는데


크게 3가지의 요소들로 나뉘어져 있어서 임무분담을 하고나서 합치기로 하였다.

첫째로 메뉴들이 작성되는 헤더부분과
주요한 번역을 하는 기능이 존재하는 바디부분
그리고 마지막 푸터부분 3개로 나뉘었고 나는 그중 푸터를 맡게 되었다.



처음에는 사이트 자체를 이해하는것이 우선이였기에
파파고 사이트에서 개발자 도구를 킨다음 하나씩 확인해보면서

어떤부분을 구현하고 어떤부분을 버릴지 생각을 해보았는데
대부분의 기능은 새로 구현하기엔 시간이 부족하거나 배우지 못한부분들이라

파파고를 모방하되 우리들만의 새로운 방식으로 접근하는것을 목표로 하였다
대신 기존 수업시간에 배웠던 개념적인 부분들을 최대한 활용!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <style type="text/css">
        a:link { color: darkslategrey; text-decoration: none; font-weight: bold;}
        a:visited { color: darkslategrey; text-decoration: none; font-weight: bold;}
        a:hover { color: darkblue; text-decoration: underline; font-weight: bold;}
    </style>
</head>
<body>
    <footer>
        <nav class="footer_link">
            <hr />
            <img class="picat" src="aaa.jpg"  width="150" height="150" alt="My Image">
            <a href="https://policy.naver.com/rules/service.html" target="_blank">이용약관</a> 
            <a href="https://policy.navex`r.com/policy-mobile/privacy.html" target="_blank">개인정보처리방침</a> 
            <span>고객센터</sapn>    
            <div>
                <span>의견제안</span>
                <a href="https://policy.naver.com/policy/disclaimer.html" target="_blank"> 책임의 한계와 법적고지</a>
            </div>
        </nav>
        <p class="admin_address">
            <span>저자 : 빅데이터반 15기</span><br />
            <a href="https://www.google.com/intl/ko/gmail/about/" target="_blank">이메일 : PlayData@gmail.com</a><br />
            <span>Copyright 2022. 15기. All Rights Reserved.</span>
        </p>
        <address class="Logo_address">
            <a href="http://127.0.0.1:3000/web/9.mini/ppgo.html" target="_self" style="color: grey;">ⓒ BigData Corp.</a>
        </address>
    </footer>
</body>
</html>

--------------------------------------
html{
    font-size: 24px;
    list-style:none;
}


body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
  background-color: rgba(0, 0, 0, 0.03)
}

.footer_link {
    font-size: 0.8rem;
}

.admin_address {
    font-size: 0.6rem;
}

.Logo_address {
    display: flex;
    justify-content: center;
    color: grey;
}

.picat {
    float: right;
}

먼저 내가 맡았던 파트인 푸터는 중요시 해야할 부분이
늘 본문의 마지막에 붙게끔 작성하는 코드와
버튼 구성으로 클릭하였을때 이용약관, 법적고지

거기에 추가적으로 어디서 만들어졌는지 adress가 필요하다가고 생각하여
간소하지만 필요한 부분을 집중하여 코드를 작성하였다.



먼저 헤더와 본문 밑에 바짝 푸터를 붙여주기 위해서
푸터의 클래스를 지정해주고 justify라는 flexbox를 사용하였는데
여기서 사용한 flexbox는

뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도
효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는
CSS3의 새로운 레이아웃 방식

기존에 구현하여 작성하던 레이아웃보다 좀더 쉽고 빠르게
접근하고 수정하기에 용이하여 꼭 알아두면 좋다!!

https://d2.naver.com/helloworld/8540176#ch6



이후에는 크게 어려운 부분은 없었는데
먼저 배경색을 rgba를 사용해 투명도와 색상을 지정해주고

a태그를 사용해 원하는 링크들을 메뉴에 연결시켜주었으며
그외에도 글씨색의 변경, 사진을 오른쪽에 넣어보기

글씨의 크기를 %단위로 언제든 크기가 바뀌어도 자연스럽게 적용되게끔 하였고
마지막 로고 또한 flexbox를 사용하여 동적으로 사이트의 창이 작아질때도

늘 가운데로 유지가 되게끔 해주었다.



이후에는 팀원들이 작성한 헤더와 본문내용을 합쳐서 미니 프로젝트 완료



밀려있는 프로젝트 관련 회고록이 2~3개 정도 있기때문에
후에 정리해서 다시 올려야함!!! 너무 힘들다...

profile
> Life is about courage and going into the unknown

0개의 댓글