오른쪽에 위치하는 side_box를 만들어 보겠습니다.

side_box를 살펴보시면 큰 side_box 안에 프로필을 담당하는 부분과 스토리를 담당하는 부분, 사용자를 추천하는 부분으로 나누어져 있는것을 볼 수 있습니다.

먼저 가장 큰 side_box를 만들어 보도록 하겠습니다.

파일명 : index.html

**...**

                <div class="contents_box">
                    **...**
                </div>		
		
                **<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">KindTiger</div>**
                            **<div class="ko_name">심선범</div>**
                        **</div>**
                    **</div>**
                **</div>**

**...**

파일명 : css/style.css

**...**

#main_container .inner{
    width: 935px;  
    /* height: 500px; */
    /* background: red; */
    **position: relative; /* 기준점을 inner로 변경하기 위함 */**
}

**...**

**.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 .user_profile{
    display: flex; /* 가로 배치 */
    align-items: center;
    font-size: 14px;
    color: #262626;
}

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

프로필을 완성했으니 이제 스토리 박스와 추천 박스를 만들어 보도록 하겠습니다.

스토리 박스와 추천 박스의 header가 같고 스토리 박스에서 비슷한 형태가 중복되니, 이러한 경우에는 클래스를 통해서 한번에 관리를 해주는 것이 편합니다.

파일명 : index.html