003 side_box

...

                <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>

...

...

#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;
}

 

...

                <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>

                    <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>

...

...

.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;
}

.side_box > article{
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    margin-bottom: 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;
}

...

                    <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.jpg" alt="프로필사진">
                                </div>

                                <div class="detail">
                                    <div class="id">kind_tigerrrr</div>
                                    <div class="time">1시간 전</div>
                                </div>
                            </div>
                        </div>
                    </article>

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

...

...

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

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

.side_box > article{
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    margin-bottom: 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;
}

.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; /* x축_자식이 부모 넘지 못하게 한다 */
    overflow-y: auto; /* 자동으로 스크롤을 보여주거나 숨김 */
    /* overflow: hidden auto; x축, y축 한번에 설정 */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js"></script>
</head>
<body>
    <section id="container">
        <header id="header">
            <section class="inner">
					      <h1 class="logo">
						        <a herf="index.html">
                        <div class="sprite_insta_icon"></div>
                        <div class="sprite_write_logo"></div>
						        </a>
					      </h1>

                <div class="search_box">
                    <input type="text" placeholder="검색" id="search-field">
                    <div class="fake_field">
                        <span class="sprite_small_search_icon"></span>
                        <span>검색</span>
                    </div>
                </div>

                <div class="right_icons">
                    <div class="sprite_camera_icon"></div>
                    <div class="sprite_compass_icon"></div>
                    <div class="sprite_heart_icon_outline"></div>
                    <div class="sprite_user_icon_outline"></div>
                </div>
            </section>
        </header>

        <section id="main_container">
            <div class="inner">
                <div class="contents_box">
                    <article class="contents">
                      <header class="top">
                            <div class="user_container">
                                <div class="profile_img">
                                    <img src="imgs/thumb.jpeg" alt="프로필이미지">
                                </div>
	                              <div class="user_name">
                                    <div class="nick_name m_text">KindTiger</div>
                                    <div class="country s_text">Seoul, South Korea</div>
                                </div>
                            </div>
                            <div class="sprite_more_icon" data-name="more"></div>
                        </header>	

                        <div class="img_section">
                            <div class="trans_inner">
                                <div>
                                    <img src="imgs/img_section/img01.jpg" alt="visual01">
                                </div>
                            </div>
                        </div>

                        <div class="bottom_icons">
                            <div class="left_icons">
                                <div class="heart_btn">
                                    <div class="sprite_heart_icon_outline" name="39" data-name="heartbeat"></div>
                                </div>
                                <div class="sprite_bubble_icon"></div>
                                <div class="sprite_share_icon" data-name="share"></div>
                            </div>
                            <div class="right_icon">
                                <div class="sprite_bookmark_outline" data-name="bookmark"></div>
                            </div>
                        </div>

                        <div class="likes m_text">
                            좋아요
                            <span id="count">2,346</span>
                            개
                        </div>

                        <div class="comment_container">
                            <div class="comment">
                                <div class="nick_name m_text">dongdong2</div>
                                <div>강아지가 너무 귀여워요~!</div>
                            </div>
                            <div class="small_heart">
                                <div class="sprite_small_heart_icon_outline"></div>
                            </div>
                        </div>

                        <div class="timer">1시간 전</div>

                        <div class="comment_field">
                            <input type="text" placeholder="댓글달기...">
                            <div class="upload_btn m_text">게시</div>
                        </div>
                    </article>
                </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>

                    <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.jpg" alt="프로필사진">
                                </div>

                                <div class="detail">
                                    <div class="id">kind_tigerrrr</div>
                                    <div class="time">1시간 전</div>
                                </div>
                                <!--**-->
                            </div>
                        </div>
                    </article>

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

.sprite_insta_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -53px -235px;
    width: 22px;
    height: 22px;
}

.sprite_write_logo{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -94px -72px;
    width: 103px;
    height: 29px;
}

.sprite_compass_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -130px -286px;
    width: 23px;
    height: 23px;
}

.sprite_user_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -272px -182px;
    width: 22px;
    height: 24px;
}

.sprite_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -52px -261px;
    width: 24px;
    height: 22px;
}

.sprite_small_search_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -337px -246px;
    width: 10px;
    height: 10px;
}

.sprite_more_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -301px -218px;
    width: 15px;
    height: 3px;
}

.sprite_bubble_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -239px -202px;
    width: 24px;
    height: 24px;
}

.sprite_share_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -324px -52px;
    width: 21px;
    height: 24px;
}

.sprite_bookmark_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -237px -286px;
    width: 19px;
    height: 24px;
}

.sprite_bookmark_outline.on{
    background: url('../imgs/background01.png') no-repeat -159px -286px;
    width: 19px;
    height: 24px;
}

.sprite_small_heart_icon_outline{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -323px -274px;
    width: 12px;
    height: 11px;
}

.sprite_camera_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -271px -104px;
    width: 24px;
    height: 22px;
}

.sprite_insta_big_logo{
    display: inline-block;
    background: url('../imgs/background02.png') no-repeat -98px -150px;
    width: 175px;
    height: 51px;
}

.sprite_plus_icon{
    display: inline-block;
    background: url('../imgs/background01.png') no-repeat -187px -202px;
    width: 23px;
    height: 23px;
}

body{
    background: #fafafa;
}

#header{
    width: 100%; /* 공중에 뜨기 위함 */
    position: absolute; /* 가장 위에 올라가 있어야 하기 위함 */
    z-index: 999; /* absolute의 경우 최소 x축에서 1개 y축에서 1개의 값을 주어야 함 */
    left: 0; top: 0;
    background: white;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#header .inner{ /* inner 안에 컨텐츠를 넣으면 안에 값이 들어옴 */
    width: 975px;
    height: 77px;
    margin: 0 auto; /* 가운데 정렬 */
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 정렬 */
}

#header .inner .logo > a{
    color: transparent; /* 배경색을 투명하게 만듬 */
}

#header .inner .logo div{
    vertical-align: middle;
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_icon:after{
    content: ''; /* 공백을 받아옴 */
    width: 1px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: -4px;
}

#header .search_box{
    position: relative; /* 기준점을 잡고 가로 배치 */
}

#search-field{
    width: 185px;
    height: 28px;
    background: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    padding: 3px 30px; /* 위아래 양쪽 */
    color: #999;
    font-weight: 400;
    text-align: left; /* 글자 입력 시 왼쪽부터 보이도록 하기 위함 */
    font-size: 14px;
    outline: none; /* 포커스 했을 때 나타나는 파란선 */
}

#search-field::placeholder{ /* 콜론2개(::) - 속성선택자 */
    font-size: 0; /* 포커스가 되지 않을 때 검색 글자가 보이지 않도록 하기 위함 */
}

#search-field:focus::placeholder{
    font-size: 14px; /* 포커스 되었을 때 검색 글자가 보이도록 한다 */
}

#header .search_box .fake_field{
    position: absolute; /* 검색 창 위에 글자를 보이기 위함 */
  	/* 가운데 배치하는 공식 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 검색을 눌렀을 때에는 포인터 인식이 안 됨 */
}

/* 물결(~) - 근처에 있는 fake_field */
#search-field:focus~.fake_field > span:nth-child(1){ 
    transform: translateX(-105px); /* 돋보기를 왼쪽으로 이동 */
}

#search-field:focus~.fake_field > span:nth-child(2){ 
    display: none; /* 포커스 되었을 때 글자 숨기기 */
}

#header .right_icons{
    width: 132px; /* 부모값 좌우값 고정 */
    display: flex;
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
}

#header .inner .logo div:nth-child(2){
    transform: translateY(2px);
}

#header .inner .logo .sprite_insta_icon{
    position: relative; /* after에게 위치 기준을 전달해주기 위함 */
    margin-right: 30px;
}

#main_container{
    padding-top: 130px;
    display: flex; /* 컨텐츠가 가운데에 위치할 수 있도록 함 */
    justify-content: center; /* x축 가운데 정렬 */
}

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

.contents_box{

}

.contents{
    width: 614px;
    /* height: 500px; */
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px; /* 테두리를 둥글게 만듬 */
    margin-bottom: 60px; /* 다른 contents들이 밀려야 되기 때문에 사이에 여백을 준다 */
    background: white;
}

.contents .top{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배 */
    align-items: center;
    padding: 10px 20px; /* 위아래 양쪽 */
}

.contents .top .profile_img{
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 테두리를 둥글게 설정 50% -> 원의 형태 */
    overflow: hidden; /* 자식이 크기가 넘치지 않도록 한다 */
    margin-right: 10px;
}

.contents .top .profile_img img{
    width: 100%; /* 100%가 없을 경우 이미지가 들어가지 않음 */
}

.contents .top .user_container{
    display: flex; /* 가로 배치 */
}

.m_text{
    font-size: 14px;
    font-weight: bold;
}

.s_text{
    font-size: 12px;
}

.contents .img_section{
    overflow: hidden; /* 자식이 부모의 크기를 넘지 않도록 한다 */
}

.contents .img_section img{
    width: 100%; /* 부모의 크기 100%를 받는다 */
}

.contents .bottom_icons{
    display: flex; /* 가로 배치 */
    justify-content: space-between; /* x축 정렬_공간을 자동으로 분배함 */
    align-items: center; /* y축 가운데 정렬 */
    padding: 10px 20px;
}

.contents .bottom_icons .left_icons{
    display: flex; /* 가로 배치 */
}

.contents .bottom_icons .left_icons > div{
    margin-right: 10px;
}

.contents .likes{
    padding: 5px 20px;
    color: #262626;
}

.contents .comment_container{
    display: flex; /* 가로 배치 */
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px;
}

.contents .comment_container .comment{
    display: flex; /* 가로 배치 */
    font-size: 14px;
}

.contents .comment_container .comment .nick_name{
    margin-right: 10px; /* 아이디와 댓글 간의 거리 설정 */
}

.contents .timer{
    font-size: 10px;
    letter-spacing: 0.2px; /* 자간 조정 */
    color: #999;
    border-bottom: 1px solid rgba(0,0,0,0.09); /* 아래쪽 실선 추가 */
    padding: 10px 20px;
}

.contents .comment_field{
    min-height: 56px;
    padding: 0 20px;
    position: relative; /* 자식들이 absolute로 자리를 잡기 위함 */ 
}

.contents .comment_field input{
    width: 100%;
    height: 56px;
    border: none;
    outline: none;
    background: transparent; /* 투명하게 설정 */
}

.contents .comment_field input:focus ~ .upload_btn{
    pointer-events: initial; /* 포인터 이벤트 초기화 */ 
    opacity: 1;
}

.contents .comment_field .upload_btn{
    color: #3897f0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%); /* y축으로 중앙 정렬 */
    cursor: pointer;
    pointer-events: none; /* 처음에는 클릭이 되지 않도록 한다 */
    opacity: 0.6;
}

.contents .bottom_icons .right_icon > div{
    cursor: pointer; /* 누를 수 있도록 하기 위함 */
}

.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 .id{
    margin-bottom: 5px;
}

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

.side_box > article{
    border: 1px solid rgba(0,0,0,0.09);
    border-radius: 3px;
    margin-bottom: 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;
}

.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; /* x축_자식이 부모 넘지 못하게 한다 */
    overflow-y: auto; /* 자동으로 스크롤을 보여주거나 숨김 */
    /* overflow: hidden auto; x축, y축 한번에 설정 */
}