1. 팀 프로젝트
22-07-01
Resoft 회사 사이트 만들어 오기.
팀 명: 보람 3조
오늘은 첫날이고 해서 각자 해야 될 부분을 분담하고 오늘은 헤더 부분과 푸터 부분만 html, Css작성을 해보기로 했다.
<!DOCTYPE html>
<html lang="ko">
<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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap"
rel="stylesheet">
<title>Resoft</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div id="CI_wrapper">
<a href="#"><img src="./images/리소프트로고.png" alt=""></a>
</div>
<div class="banner_wrapper">
<div class="banner_text_wrapper">
<p class="banner_text_title">Evolution<br>
With New Software</p>
<p class="banner_text_con">
Mobile APP(Android/iOS) Development, AI Bigdata Analysis, MetaVerse,<br>
Responsive WEBsite, Brand Design Launch, ICT Consulting
</p>
</div>
<div class="banner_img_wrapper">
<img src="./images/메인뇌.png" alt="">
</div>
</div>
</header>
<div id="container">
</div>
<footer>
<div class="footer_wrapper">
<div class="img_wrapper">
<img src="./images/푸터로고.png" alt="">
</div>
<div class="footer_contents">
<div class="footer_con_title">
<p>주식회사 리소프트는 새로운 소프트웨어로 진화하여 여러분께 응답드리고자 노력하겠습니다.</p>
</div>
<div class="footer_info_wrapper">
<div class="footer_info flex-wrap">
<p><span>상호. </span> <span>(주)리소프트</span></p>
<p><span>대표이사. </span> <span>오유나</span></p>
<p><span>사업자등록번호. </span> <span>722-81-02219</span></p>
<p><span>개인정보책임자. </span> <span>이현지</span></p>
<pre> </pre><br>
<p><span>주소. </span> <span>(41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 704호 (신천동 106)</span></p>
<p><span>전화. </span> <span>(053) 475-2110</span></p>
<p><span>팩스. </span> <span>(0504) 257-5966</span></p>
<p><span>이메일. </span> <span>call@resoft.kr</spa></p>
</div>
</div>
<br>
<p class="copyright">Copyright(c) RESOFT CO.LTD. All right reserved.</p>
</div>
</div>
</footer>
</body>
</html>아직 더 작성해야 되는 부분도 많고 적용이 안되는 부분이 있어 수정이 필요하다.
css 부분은 추가 수정이 필요해 다 올리지 못하는점..
2. 어려웠던 점
팀원이 두명이나 나갔던 데 에러가 있었고, 푸터부분 스타일 적용이 어려워 다시 체크해야 한다.
푸터 부분 스타일 적용할때 widht부분을 calc를 적용해 나누는 것을 처음 보아서 구글링 해 찾아보았다.
.footer_info p{
margin: 0 !important;
width: calc(100% / 2);
}우리가 흔히 width 값을 쓸 때 %를 사용하거나, px을 많이 사용하는데
100%를 3등분 하는데 숫자가 딱 떨어지지 않을 때 사용할 수 있다고 한다.
사용은 위와 같이 나누거나
div {width:calc(100% -33%);}으로 하면 된다.
3. 소감
팀으로 프로젝트를 어려운걸 하게 되었는데, 적은 인원임에도 다들 열의가 보이셔서 좋았고, 어렵지만 그만큼 해내면 성취감이 있을거라 그렇게 생각된다.
친숙한 개발자가 되고픈 사람