2차 회의
2일차 프로젝트 계획이 변경되었다. 1일차 회의때는 개인페이지 부분을 그냥 각자의 개성대로 꾸미기로 하였는데, 2일차에 피드백을 듣고 다시 회의한 결과 개인페이지 양식을 통일하는 것이 더 좋을 것 같아서 양식을 통일하기로 하였다. 그리고 어떻게 통일시킬지 회의를 하였는데 초안 와이어 프레임은 이렇게 나왔다.
바탕은 그라데이션 색을 팀원 각각 다른 색으로 하기로 결정하였고, 사진을 카드형식으로 왼쪽 위에 넣기로 하였다. 그리고 이름 아래에 팀명의 색깔을 위해 MBTI를 삽입하기로 하였다.
그런데 여백이 너무 많은 것 같아서 공간을 채우기 위해 크게 4가지 항목으로 나누어서 다시 배치해보았다.
다음 와이어프레임이다
그리고 사진 크기랑 형식을 통일하는 코딩을 작성했다.
코드
<div class="card">
<img src="..."
width="300px" height="400px" class="card-img" alt="...">
<div class="card-img-overlay">
</div>
</div>style code
.card{
width: 300px;
height: 400px;
overflow: hidden;
border-radius: 10px;
}이렇게 틀을 짜고 페이지를 작성한 후에 다시 회의를 진행하기로 하였다.
회의중 느낀점
회의를 하면서 아무래도 직접 만나서 하는 것이 아닌 화상으로 진행하다보니 중간중간 소통이 끊기는 지점들이 발생하였다. 이때 한번씩 지금까지 회의한 내용을 다시한번 입으로 말하면서 팀원들에게 정리해주니깐 정확하게 인지하고 다음으로 맘 놓고 넘어갈 수 있었던 것 같다. 그리고 한명이라도 헷갈리면 정확하게 짚고 넘어가는 것이 중요하다고 생각한다.
왜냐하면 다음에 원점으로 돌아가서 다시 시작해야 하게 될수도 있기 때문이다.
틀 만들기
다시 처음부터 바탕부터 만들기로 하였다.
그라데이션을 넣어야하는데 알지 못해서 많은 구글링을 하였다.
background: linear-gradient(to bottom, #0e8a09, #ffffff);
수직방향 아래로 초록색과 하얀색으로 그라데이션 바탕을 만들어주었다.
margin: 0;
height: 100vh;
background: linear-gradient(to bottom, #0e8a09, #ffffff);여백을 없애고 화면의 높이를 조정하는 코드를 사용했다.
틀의 총 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자기소개</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(to bottom, #0e8a09, #ffffff);
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
h1 {
color: white;
}
</style>
</head>
<body>
<h1>이상민</h1>
</body>
</html>글자 크기와 위치 변경
글자를 넣고 글자의 색상을 입혀서 넣어보았다.
하지만 글자가 원하는 위치에 배치되지않았다...
글자위치는 조정하였지만, 글자 크기가 맘에 들지 않는다
.text1{
position: absolute;
top: 15%;
left: 40%;
margin-bottom: 20px;
}
.text2{
position: absolute;
top: 30%;
left: 40%;
margin-bottom: 20px;
}
.text3{
position: absolute;
top: 30%;
left: 70%;
margin-bottom: 20px;
}
.text4{
position: absolute;
top: 60%;
left: 40%;
margin-bottom: 20px;
}
.text5{
position: absolute;
top: 60%;
left: 70%;
margin-bottom: 20px;
}줄마다 text(숫자)로 지정하여 위치를 지정해주었다.
글자 크기가 맘에 들지 않는다...
<h1 style = "font-size : 50px;">이상민</h1>위 코드를 사용해서 각 글자마다 폰트를 지정해주었다.
사진 넣기
왼쪽 위 이름 옆에 사진을 넣어보자
나를 소개하는 사진을 넣어보았다. 사진 크기가 적절해 보이진 않지만 그래도 회의 내용에서 정했던 사진크기로 넣었다.
(한번 건의 해보아야 겠다)
줄 넣기
목록을 나누어줄 줄을 넣어보자
.hr{
width: 50%;
color: orange;
} 줄을 넣고 색깔과 줄길이를 늘려주기 위하여 코드를 넣어주었지만 길이와 색깔이 변하지 않았다.
<hr style="border : solid 1px white;width:270px">코드를 사용하여 줄에 스타일을 지정해주어서 해결하였다.
이렇게 팀원들과 소통한 틀을 모두 완성하였다.
Github 링크
https://github.com/Sangmin1999/-sparta
개선점 건의
이번 프로젝트를 만들면서
빨간 부분이 너무 비어보여서 사진 아래에 나이나 다른 정보를 입력하고 오른쪽 위에 목록을 만들어보면 좋을 것 같다는 생각이 들었다. 그래서 다음 회의시간에 한번 팀원들과 소통하는 시간을 가져봐야 겠다.
마무리
만들기전에는 Java만 사용해봐서 걱정을 많이했는데
웹사이트를 만들면서 처음에는 정말 막막했지만 만들면서 구글링과 영상을 통해서 사진,글자크기와 위치 조정을 위해서 코딩을 하면서 느낀점은 내가 만든것이 바로바로 웹사이트에서 눈으로 확인할 수 있어서 직관적이여서 좀 더 빠르게 익숙해 질 수 있는 점이 좋았다. 줄 길이를 조정하는 과정에서 많은 시간을 사용했다. 결과는 오히려 정말 짧은 코드였다.
