개요

1. Bottom -> Up 구조
2. display:flex, 이거 왜 진작 안썼지? 

메인 페이지를 구현하면서 많은 시행착오가 있었는데

그 중심을 꿰뚫는 것이 bottom -> up 구조입니다.

상황에 따라 존재하는 요소가 다를 수 있기 때문에

큰 틀 안의 요소 하나하나 사이의 관계성에 주목했어야하지 못한 것이

구현 기간이 길어진 주 원인인 것 같습니다.

CSS Idea

큰 틀은 위와 같고, 이곳 저곳 display와 position이 넘칩니다.

하나하나 차근차근 정리해야겠습니다.

전체 화면 구성

navigation bar와 아래 컨텐츠 영역의 width는 브라우저의 크기에 따라 동일하게 변경되면서 같이 움직입니다.

즉, 브라우저를 기준하여 모두를 감싸는 Container의 존재가 필요하며

navbar와 컨텐츠들의 관계성으로 배치한다는 것을 알 수 있었습니다.

이에 착안한 css은 아래와 같습니다.

전체 화면 CSS

html,body{
    margin:0;
    padding:0;
    height:100%;
}

#mainContainer{
    width:100%;
    min-height:100%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;    
    background-color: rgba(var(--b3f,250,250,250),1);
}

html, body에 기본적으로 적용된 margin, padding 값으로 인해

위와 같이 처리를 해주어야만 배경색이 브라우저 크기에 맞게 꽉 차오릅니다.

모든 영역을 감싸는 mainContainer을 만들어주고, flex 속성을 이용해 중앙 정렬을 진행했습니다.

전체 화면 CSS #1 navContainer

#mainContainer #navContainer{
    width:100%;
    height:60px;
    position:fixed;
    display:flex;
    flex-direction:row;
    justify-content: center;
    background-color: rgba(var(--d87,255,255,255),1);
    border-bottom: 1px solid rgba(var(--b6a,219,219,219),1);
    z-index:10001;
}

#mainContainer #navContainer #navRowBar{
    max-width:935px;
    width:100%;
    display:flex;
    flex-direction:row;
}

위에 고정되어 있어야하고... 가장 앞단에 있어야하고...

이런 것에 대한 설명은 생략하고

구태여 한 번 더 부모를 감싼 것은

1. 브라우저 전체 width를 아우르는 밑줄이 필요하다.
2. position, margin이나 padding 없이 가운데 정렬을 하고 싶다.

위와 같은 2가지 이유가 있습니다.

부모에서 중앙정렬을 잡아주기 때문에 자식에서 max-width를 설정해주면 깔끔하게 의도한대로 배치됩니다.

max-width를 설정해주고, width는 100%로 설정하여 브라우저에 resizing 이벤트가 발생하면 반응하여 줄어듭니다.

여기에 미디어 쿼리를 활용해 max-width를 변경하기만 하면 여러 크기에도 대처할 수 있을 것 같습니다.

전체화면 CSS #2 bodyContainer

#mainContainer #bodyContainer{
    max-width:935px;
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    padding-top:60px;
}

'Nav, body 둘 다 같이 움직인다며? 왜 나눈거야?'

인스타그램을 이용해보면 Navigation bar 영역 아래에

Feed, Sidebar 두 가지 영역이 존재하며, resizing이 일어나도

그 두 영역은 함께 움직이며 일정 수준 이상으로 줄어들면

Sidebar가 사라지도록 되어있습니다.

그러므로 무작정 center 정렬을 한다면 양 옆에 미묘한 간격이 발생할 수도 있겠다는 생각에 컨텐츠 영역을 따로 분기했습니다.

#mainContainer #bodyContainer #feedContainer{
    max-width:605px;
    width:100%;
    margin-right:28px;
}

#mainContainer #bodyContainer #sideWrapper{
    position:relative;
    top: 53px;
}

#mainContainer #bodyContainer #sideWrapper #sideContainer{
    position:fixed;
}

flex-start를 통해 시작점을 기준으로 정렬됩니다.

즉 영역 내에서 feed를 기준으로 sidebar가 관계를 가지기만 하면 됩니다.

앞서 사용했던 max-width와 width의 혼용, 그리고 position:relative를 통해

브라우저 resizing에 대해 유연하게 대처합니다.

또한 sidebar는 고정된 상태여야하기에, 내부에 영역을 하나 더 감싸고

그 영역을 fixed 처리했습니다.

마무리

display:flex에 익숙해지는 첫걸음이었습니다.

한 페이지에 모두 정리하기엔 각 영역이 가진 CSS나, JS의 양이 많아

우선 전체적인 틀만 작성합니다.

#3 navbar, #4 feed 로 이어집니다.