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를 만들어 놓았다.

 

다른 팀원이 한 것을 보고 구조 파악중..