웹 개발을 오랜만에 해봤다. css는 건들지도 못하고 일단 html 쪽에서 기억나는 것들과 강의를 참고해서 개인별 자기소개 페이지를 만들었다.
완성된 페이지는 이러했다. 솔직히 정렬도 엉망이고 디자인도 구리지만, 짧은 시간 안에 다른 팀원 분들도 열심히 만들어주셨는데 나만 제출이 늦어지는 게 용납이 안되었다.
그래서 아무튼, 이 페이지를 꾸밀 때는 구글 글꼴을 사용했고 상자에 그림자를 적용하고 text와 사진을 정렬하였다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>팀원 소개_내이름</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
* { //글꼴스타일을 전체에 적용하기 위한 것으로, *은 전부를 의미한다.
font-family: "Jua", serif;
font-weight: 400;
font-style: normal;
}
.mytitle{//mytitle div 별명(class)에 대한 설정이다.
background-color: rgb(215, 242, 250);
height: 50px;
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 3px 1px rgb(141, 176, 187);
}
.profilebox{
background-color: rgb(215, 242, 250);
float: left;;
height: 300px;
width: 400px;
text-align: center;
margin-top: 30px;
margin-inline: 100px;
box-shadow: 1px 1px 3px 1px rgb(141, 176, 187);
}
.myimg{
float: left;
margin-top: 30px;
margin-left: 80px;
margin-right: 300px;
}
</style>
</head>먼저 head 안에 있는 sytle들인데, body 속에 있는 div에 별명들을 붙여서 그 div들을 원하는 스타일로 꾸며줄 수 있는 것이다.
*을 붙이면 전체이고 .div 클래스이름으로 하면 해당 div의 스타일로만 저장된다.
나는 소개 페이지는 맨 위에 붙여서 가운데 정렬로 만들었고, 프로필 박스랑 사진은 float을 left로 해서 왼쪽으로 이어붙였다.
처음에는 left랑 right로 설정했었는데 도저히 예쁜 모양이 나오질 않아서 둘 다 left로 설정한 뒤에 맘에 들 때까지 margin으로 이리저리 자리를 바꿔주었다.
그리고 아래쪽 장점이랑 협업 스타일은 아예 div 쪽에 style을 집어넣어서 코드를 작성했다. 이 쪽은 아예 text만 있는 것이기 때문에 head로 따로 스타일을 빼기가 애매한 상황이었기 때문이다.
<div style="width: 150;height: 150px;border:1px;float:inline-start;">
<h1>나의 장점</h1>
<h4>딱딱한 분위기에서도 말을 잘 하는 투머치토커입니다. 분위기를 잘 살릴 수 있는 부분이 장점인 것 같아요</h4>
</div>
<div style="width: 150;height: 150px;border:1px;float:inline-start;">
<h1>협업 스타일</h1>
<h4>
개발에 있어서 모르는 것이 있으면 각자 돌아서서 해결하기보다는 모르는 것은 서로 상호 보완하는 것이 중요하다고 생각을 합니다. 혼자서 계속 안되는 문제는 서로 나누어서 성장하는 개발을 하고 싶습니다.
</h4>
</div>대충 이런 식이었다.
div에 별명도 이 부분은 안 붙였다.
이 정도로 하고 오늘의 작업은 업로드를 끝냈다.
언제 어느 위치에 있더라도 그 자리의 최선을 다 하는 사람이 되고 싶습니다.