3. side_box

• side_box
  • profile
  • 스토리
  • 사용자 추천

1) 프로필

• sidebox : 기존 contents_box 옆에 생김
  • 새로운 div
• sidebox
  • userprofile
    • profile_thumb
  • detail
    • id
    • 한글명
• index.html

<div class="side_box">
                        <div class="user_profile">
                            <div class="profile_thumb">
                                <img src="imgs/thumb.jpeg" alt="프로필사진">
                            </div>
                            <div class="detail">
                                <div class="id m_text">cos</div>
                                <div class="ko_name">코오스</div>
                            </div>
                        </div>
                    </div>

• style.css
  • main_container .inner 내 postion:relative로 변경해야만 sidebox가 제대로 나옴

.side_box{
    width: 293px;
    /*height: 300px;*/
    /*background: rgba(255, 0, 0, 0.16);*/
    position:absolute;
    right: 0;
    top: 0;

}

.side_box   .profile_thumb{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
}

.side_box   .profile_thumb  img{
    width: 100%;
    height: 100%;
}

.side_box.on{
    position: fixed;
    top: 80px;
}
.side_box .profile_thumb{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
    margin-right: 10px;
}


.side_box .profile_thumb img{
    width: 100%;
    height:100%;
}

.side_box .user_profile{
    display: flex;
    align-items: center;
    font-size: 14px;
    color:#262626;
}

.side_box .detail .id{
    margin-bottom: 5px;
}

.side_box .detail .ko_name{
    font-size: 12px;
    color:#999;
}

2) 스토리, 추천

• header 동일함
  • 동일한 클래스 내에서 함께 관리

• side_box
  • user_profile
  • detail
• story
  • story_header
    • more
• recommend
  • reco_header
    • more

• index.html

<div class="side_box">
                        <div class="user_profile">
                            <div class="profile_thumb">
                                <img src="imgs/thumb.jpeg" alt="프로필사진">
                            </div>
                            <div class="detail">
                                <div class="id m_text">cos</div>
                                <div class="ko_name">코오스</div>
                            </div>
                        </div>

                        <article class="story">
                            <header class="story_header">
                                <div>스토리</div>
                                <div class="more">모두 보기</div>
                            </header>
                        </article>

                        <article class="recommend">
                            <header class="reco_header">
                                <div>회원님을 위한 추천</div>
                                <div class="more">모두 보기</div>
                            </header>
                        </article>
                    </div>

• style.css

.side_box > article{
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 291px;
    font-size: 14px;
    color:#262626;
    font-weight: bold;
    background: white;
}

.side_box > article > header{
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    color:#999;
}


.side_box > article > header .more{
    font-size: 12px;
    color:#262626;
    cursor:pointer;
}

3) 스크롤 기능 추가

• scroll_inner : 스토리 부분 스크롤 가능
  • 내부 프로필 크기가 훨씬 작음

• story
  • story_header
  • scroll_inner
    • thumb_user
      • profile_thumb
      • detail

• index.html

 <article class="story">
                            <header class="story_header">
                                <div>스토리</div>
                                <div class="more">모두 보기</div>
                            </header>
                            <div class="scroll_inner">
                                <div class="thumb_user">
                                    <div class="profile_thumb">
                                        <img src="imgs/thumb02.jpeg" alt="프로필사진">
                                    </div>
                                    <div class="detail">
                                        <div class="id">juni</div>
                                        <div class="time">1시간 전</div>
                                    </div>

                                </div>
                            </div>
                        </article>

• style.css

.thumb_user{
    display: flex;
    align-items: center;
    padding: 10px 20px;
}

.thumb_user .profile_thumb{
    width: 34px; /*프로필보단 작은 사이즈*/
    height: 34px;
}


.thumb_user .time{
    font-size: 10px;
    letter-spacing: 0.2px;
    color:#999;
}


.side_box .scroll_inner{
    height: 182px;
    overflow-x: hidden;
    overflow-y: auto; /*자동으로 스크롤을 보여주거나 숨김*/
    /*overflow:hidden auto; x축, y축 한번에 설정*/

}

• scroll_inner 부분을 recommend, story 내 header 밑에 여러개 붙여 넣으면 여러개 만들어짐