내 웹사이트를 반응형으로 Update!

원래는 어땠는데?

 

학원에서 프론트엔드 수업을 들으며, 웹사이트를 제작했었다

 

반응형을 배우기 전 pc 환경에 맞춰서 제작을 해서 모바일로 보면 난리도 아니였다 ;ㅁ;

 

 

[바꾸기 전]

- PC

 

 

- 태블릿 / 핸드폰

 

 

 

---

어떻게 바꼈는데?

 

기기종류	설명
태블릿	contents (과제 부분)이 줄어들어도 배경이미지가 공간부족으로 아래로 딸려가지 않게함 사이드바(카테고리) 폰트를 줄이고 티스토리 로고를 숨김처리함
핸드폰	핸드폰에선 사이드바를 넣으면 이쁘지 않아서(중요( •̀ ω •́ )✧) 위로 올려서 가로로 나열되게 함 배경이미지를 배경색 변경으로 처리하고 체크를 하트로 변경함

 

 

 

 

 

 

 

 

[반응형 소스코드]

@media screen and (max-width: 1065px) and (min-width: 801px) { /*태블릿 일때*/


    #sidebar{
        width: 20%; /*메뉴, 전체화면의 20%만 차지하게끔 */
        float: left;
        margin: 0;
        margin-right: 10px;
    }
    
    #sidebar > ul > li > a {
        font-family: 'Cafe24Oneprettynight';
        font-size: 14px; /*폰트 줄이기*/
        line-height: 2;
        text-decoration-line: none;
        color: black;
    }


    #contents{
        float: left;
        width: 70%; /*과제부분, 전체화면의 70%만 차지하게끔 */
        height: 430px;
        margin: 0 20px;

    }

    #tape{
        width: 150px;
        top: 125px;
        left: 50%;
    }

    #tistorylogo{ /*티스토리 로고 숨기기*/
        display: none;
    }
}


@media screen and (max-width: 800px) { /*핸드폰 일때*/
    
    .border2{ /*사이드바와 컨텐츠부분 구분짓던 선 없애기*/
        display: none;
    }

    #sidebar{ /*위쪽으로 나열할꺼니까 float 해제*/
        float: none;
        width: 100%;
    }

    #sidebar > ul > li{
        display: inline-block; /* 가로로 나열 되게 */
        margin-right: 10px;
    }
    #sidebar > ul > li > a{
        font-size: 16px;
    }
    #tape{ /*배경이미지(노트같이 생긴거) 없앨꺼니까 짝꿍인 테이프도 없앰처리 */
        display: none;
    }

    #contents{
        margin: 0 auto;
        width: 100%; /*화면에 꽉차게*/
        background: none; /*배경 이미지 없애기*/
        border: none; /*선도 없애기*/
        background-color: rgba(253, 205, 197, 0.274); 
    }

    #contents > .homework::before{
        content: "♥";  /*체크 표시 하트로 변경*/
        color: #F15F5F;
    }
} 

 

 

[바뀐 모습]

 

- 태블릿

 

- 핸드폰

 

 

http://yoonhihi97.dothome.co.kr/

Yoonji's HomePage

---

열심히 공부하고 있지만, 오류 사항이 존재 할 수 있습니다.

수정 사항이 존재 할 경우 알려주시면 감사하겠습니다 <(＿＿)>