(기능추가2) grid와 fixed를 이용한 상단바 꾸미기

1.gird를 이용해서 상단 타이틀박스가 페이지에 맞게 줄어들게 만들기

.title {

    width: 1205px;

    height: 65px;

    border-bottom: 0.8px groove rgb(255, 188, 188);

    color: rgb(255, 188, 188);

    display:grid;

    grid-template-columns: 1fr auto;

}

발생한 문제>

오른쪽에 있는 업로드버튼이 페이지가 줄어들때 안따라옴

 

해결방법>

미디어 쿼리를 이용해서 페이지가 줄어들때 마다 +버튼이 이동할수있도록 타이틀 박스의 크기를 조정하엿음

@media (max-width:1180px) {

    .photoLayout {

        width: 1000px;

    }

    .line {

        width: 1000px;

    }

    .title {

        width: 1000px;

    }

}

@media (max-width:980px) {

    .photoLayout {

        width: 800px;

    }

    .line {

        width: 800px;

    }

    .title {

        width: 800px;

    }

}

@media (max-width:780px) {

    .photoLayout {

        width: 600px;

    }

    .line {

        width: 600px;

    }

    .title {

        width: 600px;

    }

}

@media (max-width:580px) {

    .photoLayout {

        width: 400px;

    }

    .line {

        width: 400px;

    }

    .title {

        width: 400px;

    }

}

 

2. 상단바 fix 하기

.titleBox {

    width: 1205px;

    height: 65px;

    background-color: white;

    border-bottom: 0.8px groove rgb(255, 188, 188);

    color: rgb(255, 188, 188);

    display:grid;

    grid-template-columns: 1fr auto;

    position : fixed;

}

position 속성을 fixed로 줌

 

발생한 문제>

스크롤을 내리며 title box의 div박스가 아닌 뒤쪽 html여백에 이미지가 표시되는게 보였음

 

해결>

body태그의 자체 margin이 8px로 설정되있어서 이를 0px로 바꾸고, layout 박스에 패딩값을 주는 방식으로 고쳤음