22년 11월 16일 TIL
오늘은 칼기상!
아침에 팀원들과 회의를 하면서 약식으로 역할분담이 되었다. 나는 일단 기둥이 될 메인 홈페이지를 만들어 놨었는데 그걸 팀프로젝트에도 이용을 한다고 한다. 아래의 사진은 이후에 뭔가를 더 추가한 것이다.
메인페이지 댓글 기능은 우선 다른 분들이 만들기로 하셨고 나는 일단 홈페이지 보강을 좀 하고 개인페이지에 댓글 기능을 넣으려고 했다.
.mytitle {
height: 200px;
background-color: black;
color: white;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.left-box {
padding-left: 20px;
padding-top: 20px;
}
.center-box {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.fneyefocus.com/news/photo/201502/8623_10212_1201.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.right-box {
}
.mybtn > button {
margin-right: 10px;
}
.mymain {
margin: 20px;
border: 3px solid black;
max-height: 650px;
min-width: 1200px;
background-position: center;
background-size: cover;
background-image: url("/static/image/notepad.jpg");
color: black;
display: flex;
flex-direction: column;
}
.mymain > div {
border: 1px solid black;
margin: 10px;
padding: 5px;
display: flex;
flex-direction: column;
}메인페이지에 추가한 내용이다. 기본적으로 각각 배경을 추가해 넣었고 약간의 위치 수정이 있었다.
display : grid
grid-template-columns : 1fr 1fr 1fr
-> 생성한 그리드를 1프레임 1프레임 1프레임 으로 3등분 한다. 프레임수치를 늘려서 조정할 수 있다.
.left-box {
padding-left: 20px;
padding-top: 20px;
}
.center-box {
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://cdn.fneyefocus.com/news/photo/201502/8623_10212_1201.jpg");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.right-box {
}left-box :: 좌측에 들어갈 div로 글자가 들어간다.
글자가 기본적으로 왼쪽 위에 처음에 배치 되어있기 때문에 padding을 적용해서 약간 띄어주었다.
padding-left : 20px;
padding-top: 20px;
center-box :: 안경쓴 현빈이 들어가 있는 중간 div다.
배경이미지를 넣고 캄캄해지는 효과를 주기 위해 linear-gradient를 사용했다.
background-position: center로 사진을 가운데로 맞추고
background-size: cover로 사진이 자동으로 조정되게 하였다.
밑에 4줄은 웹개발 종합반에서 한 것을 그대로 가져왔다.
right-box :: 아무것도 안들어 있기 때문에 형식적으로 div를 만들어 놓았다.
