웹 페이지 역할 담당
박지영(팀원): 메인페이지 상단이미지, 팀이모지, 팀소개글
박준성(팀원): 각자가 좋아하는 음악
정민우(팀장): 개인카드
윤승환(팀원): 개인페이지
저는 메인페이지 상단 이미지, 팀이모지, 팀소개글을 맡아 코드를 작성하고 진행하였습니다.
밑에는 코드진행입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
*{
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
height:250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('https://mstatic2.e-himart.co.kr/contents/content/upload/style/20210602/908354/thumbnail_750_propse_tagging_5740.jpg');
background-position: center;
background-size: cover;
}
.mytitle1 {
width: 300px;
height: 200px;
background-image: "/img/웹화면1.png";
background-position: right;
padding: 20px;
border-radius: 8px;
}
.mytime {
width: 500px;
margin: 30px auto 0px auto;
padding: 5px;
box-shadow: 0px 0px 3px 0px blue;
border-radius: 5px;
flex-direction: row;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="mytitle">
<p><img src="/img/웹화면1.png "> </p>
<p><div class="mytitle1"> </div></p>
</div>
<div class="mytime">
<div class="team-intro">
<p>팀명 : 방구석개발자들</p>
<p>프로젝트명 : 개발 하고잡이</p>
<p>팀소개 :집을 좋아하는 사람들이 모인 팀입니다. </p>
<p>조용하지만, 웹개발을 배워 일상에서 사용하고자합니다.</p>
<p>팀목표 : 일상에서 웹개발 활용하기</p>
</div>
</div>
</body>
방구석 토크지만, 머물고 싶은 공간에서 웹 개발을 공부하는 팀원들과 같이 웹페이지를 만든다는 의미로 상단 이미지를
선택했습니다. 상단이미지 안에 방구석 토크는 다른 팀원분이 도와주셔서 넣었습니다.
기본적인 스타일은 만들었는데, 이미지 연결과 실패해서(이미지 주소 링크는 아니고, PNG로 github와 연결이 필요했습니다.) 임의로 넣은 이름을 상황에 맞게 바꾸어 넣어 홈페이지 상단 이미지 안에 들어 갔습니다.
팀소개글은 팀명과 프로젝트명, 팀소개, 팀목표를 간단하게 div로 하고, style에서 소개글 상자를 나름대로 꾸몄습니다.
구글폰트를 넣어서 글씨도 나름대로 바꿨습니다.
부족하지만, 웹 페이지 개발일지 였습니다. (제가 맡은 부분에 한해 작성이 되었습니다.)
'개발일지' 카테고리의 다른 글
| 2023.12.01 미니팀프로젝트 발표 (0) | 2023.12.01 |
|---|---|
| 2023.11.30 TIL (1) | 2023.11.30 |
| 2023.11.29 TIL (1) | 2023.11.29 |
| 2023.11.28 TIL (0) | 2023.11.28 |
| 2023.11.27 TIL (0) | 2023.11.27 |