[html , css] 인스타그램 클론 코딩 2. main

main

 

html 파일보다 css 파일의 중요도가 더 높게 느껴졌다 . 
css 파일을 헷갈리지 않기 위하여left_side , main, right_side, content, story 로 구분하였다. 
각 파일명을 해당 html 에서 class의 명칭과 동일하게 부여하였다. 

[ html ]

1. 아이콘

로그인 페이지와 동일하게 아이콘은 실제 인스타그램의 html 을 참고하여 <svg> 태그를 사용하였다. 

 

2. 상단의 사용자 자신의 프로필을 누르면 user_page 로 넘어갈 수 있도록 태그하였다. 

 

+ 코드가 워낙 길고 화면만 구성하여 어려울 부분이 없었다. 깃허브 주소를 참고하여 main.html을 참고,,

[ css ]

css에서 가장 중요했던 부분은 반응형 화면 이었다고 생각한다. 

실제 인스타그램을 살펴 보면 화면의 크기에 따라 메뉴들이 사라지고 크기가 줄어드는 변화를 확인할 수 있다. 

@media screen and (max-width:1260px){
    .left_side{
        width: 5dvw;
    }
}
@media screen and (max-width:1160px){
    .left_side{
        width: 5dvw;
    }
    .right_side{
        display: none;
    }
}

@media screen and (max-width:760px){
    .left_side{
        display: none;
    }
}

 

main.css 에서 화면 크기에 따른 왼쪽 메뉴의 크기를 조절하기 위해 미디어 쿼리를 사용하였다. 

 

1. 화면이 1260px보다 작아지면 왼쪽 메뉴의 크기를 5dvw로 조절한다 .

2. 화면이 1160px 보다 작아지면  오른쪽 메뉴(추천친구)를 보이지 않게 한다. 

3. 화면이 760px 보다 작아지면 왼쪽 메뉴를 보이지 않게 한다. 

 

/* 화면 크기에 따른 메뉴 조절 */
@media screen and (max-width:1260px){
    .navi_title{
        display: none;
    }
    #logo_box{
        padding:0px;
        width:100%;
        height: 43px;
        margin: 10px 0;
        justify-content: center;
    }
    .logo_icon{
        display: flex;
        align-items: center;
        width: 20px;
        height: 20px;
    }
    #logo_box:hover{
        border-radius: 5px;
        background-color:#efefef;
    }
    .logo_image{
        display:none;
    }
    .navi_button> a{
        justify-content: center;
    }
   
}

 

left_side.css 에서도 화면 조절에 따른 미디어쿼리를 작성해주었다. 

화면이 1260보다 작아지면  main.css 에서 왼쪽 메뉴의 크기를 줄여 주었기 때문에 

로고의 사이즈도 변경 되도록 하였다.  (아래 이미지 참고!)

 

브라우저가 1260보다 큰 화면일때

브라우저 사이즈가 1260보다 작을때

 

 

[ 링크 ]

1. 로그인 페이지 설명 

[html , css] 인스타그램 클론 코딩 1. login

 

2. 사용자 페이지 설명 

[html , css] 인스타그램 클론 코딩 3. UserPage

3. Github Repository : https://github.com/notrowing/instagram

GitHub - notrowing/instagram