[22강] 사이드바 구현

<aside>
    <div>
        <div class="faccount">
            <div class="img"></div>
                <div>
                    <div>계정</div>
                    <div>설명</div>
                </div>
                <div>팔로우</div>
        </div>
    </div>
               
    <div>
        <span>회원님을 위한 추천</span>
        <span>모두 보기</span>
    </div>
    <div>
        <div class="faccount">
            <div class="img"></div>
            <div>
                <div>계정</div>
                <div>설명</div>
            </div>
            <div>팔로우</div>
        </div>
        <div class="faccount">
            <div class="img"></div>
            <div>
                <div>계정</div>
                <div>설명</div>
            </div>
            <div>팔로우</div>
        </div>
    </div>
    <div>
        <div>
            소개도움말홍보 센터API채용 정보<br>
            개인정보처리방침약관위치인기 계정해시태그언어<br>
            <br>
            © 2021 INSTAGRAM FROM FACEBOOK  
        </div>
    </div>
</aside>

➰ class="faccount"는 친구 추천 겸 본인 프로필 소개 부분

➰ class="img"는 프로필 사진 부분

➰ 그 옆에 계정 이름과 설명 부분

➰ 제일 오른쪽에 팔로우 버튼

➰ 그 아래부터 친구추천 부분. 구조는 똑같음!

➰ 마지막에 소개말 부분도 추가!

.faccount {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.faccount .img {
    width: 50px;
    height: 50px;
    background-color: red;
    border-radius: 100%;
}

.faccount > :nth-child(2) {
    flex: 1;
    padding: 4px;
}

.faccount > :nth-child(3) {
    color: blue;
}

.faccount > :nth-child(2) > :nth-child(2) {
    font-size: 14px;
    color: lightgray;
}

➰ class faccount부분의 display: flex로 두고, 세로로 가운데 정렬을 했다.

➰ faccount의 img의 크기를 각 50px씩, 배경은 보기 쉽게 red, 테두리를 둥글게 하기 위해 border-radius: 100%를 설정했다.

➰ img 아래의 div 묶음(계정, 설명)은 display: flex를 두지 않아서 자동으로 세로로 정렬된다.

➰ faccount의 두 번째 자식들 즉, 계정, 설명 div들은 flex: 1로 여백을 최대로? 준 것 같다. 이건 다시 알아봐야겠다ㅠ

➰ padding도 4px로 두어 간격을 줬다.

➰ 세 번째 자식들, 즉 팔로우의 글씨 색깔을 파란색으로 줬다.

➰ faccount의 두 번째 자식의 두 번째 자식, 즉 계정, 설명 div의 두 번째 자식인 설명 div의 폰트 크기를 14px, 색깔을 lightgray로 줬다.

aside {
    margin-top: 30px;
    width: 293px;
    padding: 4px;
    margin-left: 10px;
}

aside > :nth-child(2) {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
}

aside > :nth-child(3) {
    margin: 10px 0;
}

aside > :nth-child(4) {
    font-size: 12px;
    color: lightgray;
}

➰ margin-top: 30px로 옆의 스토리 부분과 위치가 맞게 했다.

➰ margin-left: 10px로 스토리와의 간격을 뒀다.

➰ aside의 두 번째 자식 요소인 '회원님을 위한 추천', '모두 보기'의 margin을 위아래 10px을 두어 간격을 두고, display: flex를 둬 정렬을 space-between을 둬 요소 간에 동일한 간격을 두었다.

➰ aside의 세 번째 자식 요소인 class="faccount"들의 margin을 위아래로 10px씩 줬다.

➰ aside의 네 번째 자식 요소인 설명들은 텍스트 크기를 12px, 색깔을 lightgray로 줬다!

➰ 완성된 모습이다! 진짜 인스타그램 페이지 모습이 보인다!

🍒 정리

오늘은 사이드바를 만들었다! 이걸 만드니까 진짜 인스타그램 페이지같다!
어제 게시판 만들기를 좀 해봤는데, 확실이 레이아웃 먼저 짜고 세부적으로 꾸며나가니까 수월했다! 아직 이벤트? 주는 건 어려워서 걱정이긴 한데, 이제 레이아웃 짜는 건 껌으로 할 수 있을 것 같다. 한 두 번만 더 하면..?ㅎㅎ..
진짜 구역마다 색깔을 칠해 놓으니까 보기가 훨씬 편했다. 다 추가하고 그 배경색만 빼면 되니까 너무 수월했다!
여기서 배웠던 속성들도 여러 개 썼다. 역시 아는만큼 보인다!! 내 좌우명? 같은 말...
게시판 만들기 얼른 이어서 해야지. 빨리 자바스크립트, react도 공부하고! 할 게 너무 많다!